前言这一天主要是基础理论的学习。我的学习资料库https://gitee.com/zhang_dezhe...YCY-TrainingCamp-S2：将我的学习记录添加到原文件中。Blender第一天操作|大帅老猿threejs特训【超级详细】【我在掘金的同名文章】1.大纲2.三个基本概念透视相机模拟人眼的视角，平时用的比较多。正交相机，远近一样，没有近小远大的感觉。一点点环境光就可以，太多就不真实了。定向光，阴影太暗时补光。漫反射，基本色，比如给苹果加红色。3、THREEAPI一般使用左方法，右方法会浪费空间。4.获取glTF格式的模型。Blender是目前唯一可以导入和导出这种格式的3D软件。5.Blender快捷键6.Blender初体验导入甜甜圈文件，记得选择gltf格式，因为模型尺寸太大，稍微移动一下就看不到后面的部分，所以需要放大出去。缩放后需要ctrl+a选择所有transformation进行应用，以免缩放对后续操作造成影响。点击对象，选中对象，然后左上角的对象模式可以切换到编辑模式【tab】。分离所选项目以拆分出模型的一部分。使用该操作可以将上述组合中选择的面包拆分成一个个的面包，如下图所示。如下图，我发现每次只能拆一小部分，重复操作多次后才能拆出一个完整的面包！！模拟甜甜圈从空中落到托盘上的过程。为每个甜甜圈添加一个刚体，并为托盘添加一个刚体。如下设置被动效果。烘焙到关键帧并导出为win10识别的glb格式，打开预览七。操作说明编辑模式下可以点、线、面切换，ctrl+点击选择，可以实现点、线、面的多选。按钮/可以独立操作对象8.开始使用我们之前创建的面包动画的属性来查看文件。该文档非常清楚。根据前面的知识，我的代码如下constcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.01,10)//camera.position.set(0,0,2)可以看到释放后的绿色立方体//RendererWebGL1Rendererconstrenderer=newTHREE.WebGL1Renderer({//antialiasantialias:true})renderer.setSize(window.innerWidth,window.innerHeight)document.body.appendChild(renderer.domElement)//创建环境光，让所有东西都亮起来constambientLight=newTHREE.AmbientLight(0xffffff,0.5)scene.add(ambientLight)//物体创建立方体：长宽高均为1constboxGeometry=newTHREE.BoxGeometry(1,1,1)//MaterialMeshBasicMaterial:基础材质constboxMaterial=newTHREE.MeshBasicMaterial({color:0x00ff00})constboxMesh=newTHREE.Mesh(boxGeometry,boxMaterial)scene.add(boxMesh)//帧循环函数animation(){requestAnimationFrame(animation)renderer.render(scene,camera)}//动画入口animation()我这里眼前一片漆黑，什么也看不见。补充知识接下来我创建一个人脸平面，这里有背面剔除的3D知识点，如下图，让我们进入透视相机的视角【这里是右手坐标系】回到正面，“眼睛是黑色的”是因为没有设置相机的位置。我在前面的代码中添加了这个注释。释放后，就可以看到立方体了。添加一个控制器来用鼠标控制对象。constcontrols=newOrbitControls(camera,renderer.domElement)importdonuts.glb以供使用THREE.AnimationMixer创建一个动画混合器，允许所有动画共享混合器，迭代执行，记得在真正的循环混合器中执行混合器的更新?.update(0.02)【0.02是必须的，没有值，不知道多久更新一次】，可以让动画动起来。现在默认是循环播放，优化一下，设置播放一次，最后一帧停止。代码如下//当场景中的多个对象独立动画时，每个对象可以使用同一个动画混合器。mixer=newTHREE.AnimationMixer(gltf.scene)//播放每个动画constclips=gltf.animationsclips.forEach(clip=>{constaction=mixer.clipAction(clip)//只播放一次action.loop=THREE.LoopOnceaction.play()//动画停在最后一帧action.clampWhenFinished=true})functionanimation(){requestAnimationFrame(animation)renderer.render(scene,camera)controls.update()//0.02必须被填充ornotDatamixer?.update(0.02)}效果如下添加背景色，旋转，完成洒花！
