ThreeJS一盘魔性的甜甜圈 | 大帅老猿threejs特训

开场

魔镜魔镜谁的代码写的最好，最烂的是你，最好的不知道。。。。。

恍惚间进入了梦境，开场就是Blender

咣当掉下一些超两米的甜甜圈，大喊赶紧完成任务不然下一个掉头上

素材处理

我丢

这是哪个进程出了bug

打开Blender一顿拖拽，分和，在磕磕盼盼中控制的了外星来的甜甜圈

看着这甜甜圈似乎可以吃，离氛围还缺点场景，没有香槟还不能来点烛光

跳动的甜圈

刚好在搭建的three场景中增加一束光，照亮不起眼的床

const directionLight = new THREE.DirectionalLight(0xffffff, 0.4);
scene.add(directionLight);

甜甜圈来吧，到照相机前站着别动，我给你个片段特写

GLTFLoader押着怪异的甜甜圈来了

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 10);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.set(0.3, 0.3, 0.5);
const controls = new OrbitControls(camera, renderer.domElement);
new GLTFLoader().load('../resources/models/donuts.glb', (gltf) => {
    console.log(gltf);
    scene.add(gltf.scene);
    donuts = gltf.scene;
    // gltf.scene.traverse((child)=>{
    //     console.log(child.name);
    // })
    mixer = new THREE.AnimationMixer(gltf.scene);
    const clips = gltf.animations; // 播放所有动画
    clips.forEach(function (clip) {
        const action = mixer.clipAction(clip);
        action.loop = THREE.LoopOnce;
        // 停在最后一帧
        action.clampWhenFinished = true;
        action.play();
    });
})
new RGBELoader()
    .load('../resources/sky.hdr', function (texture) {
        scene.background = texture;
        texture.mapping = THREE.EquirectangularReflectionMapping;
        scene.environment = texture;
        renderer.outputEncoding = THREE.sRGBEncoding;
        renderer.render(scene, camera);
});

甜甜圈还在不安分的掉落着，那就洗脑循环吧，不爽也打不着我

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    controls.update();
    if (donuts){
        donuts.rotation.y += 0.01;
    }
    if (mixer) {
        mixer.update(0.02);
    }
}
animate();

这做梦都在完成代码，欢迎大家一起相约Threejs，加入猿创营 (v:`dashuailaoyuan`)，一起交流学习