掉落的甜甜圈 ｜大帅老猿threejs特训

大帅老师邀请胖达老师进行了为期三天的threejs实训，三天的直播课下来，学到了很多，包括：

• threejs基础API
• blender操作和模型调整教学
• 贴图处理/材质设置
• 角色模型、骨骼动作、动作控制
• 环境照明

写一篇文章小小记录一下学习的成果，本篇文章主要介绍第一节课的内容：掉落的甜甜圈。

例行先上最终效果：

这样的效果是怎么实现的呢？ 首先需要有一个模型，模型可以去一些模型网站（比如sketchfab.com/ ）下载并使用blender修改成所需要的样子，我这里用了胖达老师预先做好的模型。

模型长这样：

那么如何让它在网页中展示并且动起来呢？一步一步跟我做吧～

首先，最最重要的是基础场景三大件：场景、相机、渲染器

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 });

其次，加载glb模型

new GLTFLoader().load('../resources/models/donuts.glb', (gltf) => {
    scene.add(gltf.scene);
}

这时候是黑的，啥也看不见

加一个光：

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

看着阴森森的，怪吓人，再加载一个环境光HDR图片：

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);
});

这就好多了嘛～然后就是动画啦，播放所有动画：

mixer = new THREE.AnimationMixer(gltf.scene);
const clips = gltf.animations;
clips.forEach(function (clip) {
    const action = mixer.clipAction(clip);
    action.loop = THREE.LoopOnce;
    action.play();
});

嗯？怎么又回去了？

加一行代码，控制播放完成后停在最后一帧：

// 停在最后一帧
action.clampWhenFinished = true;

搞定！

最后，很感谢胖达老师细致的讲解，感谢大帅老师提供的平台供大家一起学习交流，也欢迎大家加入猿创营(v:dashuailaoyuan)一起交流学习，共同进步。