连环扣（Link Buckle）

示例

HTML

<div id="loader">
    <canvas></canvas>
</div>

<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/6862662-3d-loading-circles" target="_blank"><img src="https://dribbble.com/assets/logo-small-2x-9fe74d2ad7b25fba0f50168523c15fda4c35534f9ea0b1011179275383035439.png" alt=""></a>

CSS

#loader {
    canvas {
        width: 240px;
        height: 240px;
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// Center & dribbble
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #275EFE;
    .dribbble {
        position: fixed;
        display: block;
        right: 24px;
        bottom: 24px;
        img {
            display: block;
            width: 76px;
        }
    }
}

JS

$(document).ready(function() {

    let $canvas = $('#loader canvas'),
        canvas = $canvas[0],
        renderer = new THREE.WebGLRenderer({
            canvas: canvas,
            context: canvas.getContext('webgl2'),
            antialias: true,
            alpha: true
        });

    renderer.setSize($canvas.width(), $canvas.height());
    renderer.setPixelRatio(window.devicePixelRatio || 1);

    renderer.shadowMap.enabled = true;

    let scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(45, $canvas.width() / $canvas.height(), 0.1, 1000);

    camera.position.z = 500;

    let material = new THREE.MeshPhongMaterial({
        color: 0xE4ECFA,
        shininess: 20
    });

    let shape = new THREE.TorusGeometry(60, 20, 60, 180);

    let circle1 = new THREE.Mesh(shape, material),
        circle2 = new THREE.Mesh(shape, material);

    circle1.castShadow = true;
    circle1.receiveShadow = true;
    circle2.castShadow = true;
    circle2.receiveShadow = true;

    scene.add(circle1);

    circle2.position.set(60, 0, 0);

    let circle2Pivot = new THREE.Object3D();

    circle2Pivot.castShadow = true;
    circle2Pivot.receiveShadow = true;

    circle2Pivot.add(circle2);

    scene.add(circle2Pivot);

    circle2Pivot.rotation.y -= Math.PI / 2;

    circle1.rotation.x -= Math.PI / 2;

    let lightFront = new THREE.PointLight(0xBACCFF, .25);
    lightFront.position.set(0, 300, 300);
    lightFront.castShadow = true;
    scene.add(lightFront);

    let lightTop = new THREE.PointLight(0xBACCFF, .4);
    lightTop.position.set(0, 0, 400);
    lightTop.castShadow = true;
    scene.add(lightTop);

    let lightBottom = new THREE.PointLight(0xBACCFF, .1);
    lightBottom.position.set(0, -300, 0);
    lightBottom.castShadow = true;
    scene.add(lightBottom);

    scene.add(new THREE.AmbientLight(0xCDD9ED));

    let speed = .024;
    var render = function() {
        requestAnimationFrame(render);
        circle1.rotation.x -= speed;
        circle2Pivot.rotation.x -= speed;
        circle2Pivot.rotation.y += speed;
        renderer.render(scene, camera);
    };
    render();
});