示例
HTML
<div id="loader">
<canvas></canvas>
</div>
<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();
});