关于three.js:ThreeJS一盘魔性的甜甜圈-大帅老猿threejs特训

44次阅读

共计 1707 个字符，预计需要花费 5 分钟才能阅读完成。

魔镜魔镜谁的代码写的最好，最烂的是你，最好的不晓得。。。。。

恍惚间进入了梦幻，收场就是 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);
});


![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d7938bd3127f467f9c3e50fe70cc0f01~tplv-k3u1fbpfcp-watermark.image?)

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

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，一起交流学习

正文完