前言我曾经通过threejs高手的零度点断断续续的学过threejs。虽然没花多少功夫，但也学习了一些Threejs的技巧和API。本课程主要讲Threejs的制作内容。在我看过的几个3D项目中，大量的动画和操作是结合在一起的。不禁感慨3D工程太复杂了。近日，大帅请来了庞大老师进行了虚拟宇宙的特训。他详细介绍了如何在Threejs中使用Blender进行3D建模、添加动画、显示和控制3D模型，并解答了我的疑问。一个看似复杂的3D项目能如此轻松地实现吗？我们先看看甜甜圈盒子，看看threejs的安装和基本APP应用的分析需求。实现动画的圆环效果，代码层面的思路需要使用threejs制作圆环，改变圆环的位置来实现动画效果。.看起来也不错，但是自己实现这个甜甜圈和动画太复杂了。这不，庞达老师给我们带来了实用的解决方案。1、下载模型可以到3D模型资源网站下载甜甜圈模型，在Blender中对模型进行详细处理，处理成我们想要的形式。因为之前接触过3DMAX，所以觉得这部分的处理大体相同，比如虚线和纹理贴图的处理。Blender除了可以建立模型，还可以给模型添加逐帧动画，这样实现的模型导入Threejs后就可以很方便的动画了。二、代码实现1、在npmnpmithree2上下载Threejs。参考Threejsimport*asTHREEfrom'three'项目中；3.创建场景、相机和渲染器，并将渲染器添加到dom中/***创建场景、相机和渲染器的逻辑*/constscene=newTHREE.Scene()constcamera=newTHREE.PerspectiveCamera(75,//wide-anglewindow.innerWidth/window.innerHeight,//压缩比0.01,//场景的近距离锥体10//场景的远距离锥体)constrenderer=newTHREE.WebGLRenderer({antialias:true//抗锯齿（开启会消耗更多性能）})//设置渲染器大小renderer.setSize(window.innerWidth,window.innerHeight)//将渲染器添加到domdocument.body.appendChild(renderer.domElement)4.创建环境光/***创建环境光*/constambientLight=newTHREE.AmbientLight(0xffffff,0.2);场景。添加（环境光）；5.创建几何体，看看场景是否搭建成功/***创建几何体（测试用）*/constboxGeometry=newTHREE.BoxGeometry(1,1,1)constboxMaterial=newTHREE.MeshBasicMaterial({color:0xdedede})constboxMesh=newTHREE.Mesh(boxGeometry,boxMaterial)scene.add(boxMesh)6.创建关键帧动画，渲染生成的场景和相机/***创建关键帧动画*/functionanimate(){requestAnimationFrame(animate)renderer.render(scene,camera)}animate()7.这样，基本的场景就完成了，但是此时页面已经完全黑了，为测试做的程序集也消失了。其实camera的初始位置是geometry里面的(0,0,0)，所以会offsetthepositionofcamera//放置cameraposition，否则就是在box里面，一个黑色的camera。position.set(0,0,2)8.控制器控制相机的制作import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";//....//Createcontrolconstcontrols=newOrbitControls(camera,renderer.domElement)functionanimate(){//....controls.update()}9.添加hdr环境贴图/***添加hdr环境贴图*/newRGBELoader().load('../resources/sky.hdr',function(texture){scene.background=texture;texture.mapping=THREE.EquirectangularReflectionMapping;scene.environment=texture;renderer.outputEncoding=THREE.sRGBEncoding;renderer.render(scene,camera);});10、添加3D模型import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader";//....letdonuts;newGLTFLoader().load('../resources/models/donuts.glb',(gltf)=>{console.log(gltf);scene.add(gltf.scene);donuts=gltf.scene;})这加载了我们的3D模型。很简单吧？但是，它现在对甜甜圈也没有影响。如何提高效果？您可能会考虑一个接一个地获取甜甜圈对象，并对其进行手动编码以提高性能。然后，让我们考虑如何获取甜甜圈对象。打印下面加载的模型以查看包含哪些属性。可以看到场景对象包含了几个Mesh。这些其实都是用Blender搭建的单个模型，通过改变这些Mesh的位置就可以得到动画效果。但是，我们也发现动画有六个AnimationClips。事实上，这6个动画片段对应于Blender中为6个环面创建的动画。这六个动画片段包含六个甜甜圈的动画信息。让我们看看下面的用法.scene);donuts=gltf.scene;mixer=newTHREE.AnimationMixer(gltf.scene);constclips=gltf.animations;//播放所有动画clips.forEach(function(clip){constaction=mixer.clipAction(clip);action.loop=THREE.LoopOnce;//在最后一帧停止action.clampWhenFinished=true;action.play();});})//....functionanimate(){//....if(mixer){mixer.update(0.02);}}总结这个案例比较简单，但是可以了解程序开发和美术资源是如何配合的，可以了解3D模型在Threejs中的工作原理，相信对打开Threejs的大门会有帮助。当然，胖老师在下一堂课中讲到如何实现更复杂的虚拟世界场景，以及如何加载角色模型来控制移动，引起了大家的兴趣。另外，如果有时间，请分享。最后还可以和嘉如园创营（v:dashhuailaoyuan）一起交流学习。`
