写在前面，第一次发表技术文章。2022年，我给自己定下一个目标，在掘金发表10篇技术文章。结果由于种种原因，最终没有完成，甚至没有开始。2022年0产出。之所以上这个实践课，是因为看到熊猫老师在群里下单，量真的好羡慕。那么，期待已久的号召中，庞达老师要发布教程，在带领大家入门之后，再发布大教程，引导大家丰富致富手段。当然，这次决定写这篇文章还有一个决定性的因素。群里大佬每天签到完成文章，比你厉害的大佬比你更努力还在学习中。瞬间，我觉得我必须迈出第一步。平时我都知道老板们工作很辛苦，但实际上我并没有看到。这一次，天天看到，兴奋之情更加明显。也感谢群里的各位大佬。如果是第一次写技术文章，如果写的不好，或者如何改进，希望路过的前辈们指点一下！！！看到效果图，我的第一反应是，这就是难度？？？我一个新手三，上来就让我跑，不合适啊！当然这可能只是我的反应。当然，我毕竟是程序员，不能上当（工作中遇到奇怪的需求也不少见）。那么接下来我们就来分析一下需求，看看如何实现这个效果。分析首先，这部动画有几个东西。第一个背景应该以类似于背景图像的方式加载，所以这应该不会很麻烦。第二个转盘还是有图案的。这个旋转在Three.js中应该有对应的api，图案也是背景图。第三个是甜甜圈盘，一共有6个甜甜圈，都是自动掉落的。这个怎么做？以上是我看到这个东西的第一反应，然后熊猫君在讲解的时候，首先我们去3D模型网站（这里写网址）下载一个甜甜圈模型。当然，这并不能说找到了符合我们需求的模型图。这时候我们下载一个本体，然后用Blender修改模型。要更改为您需要使用的模型。处理好模型之后，接下来就是搭建运行环境（Three.js的安装可以参考官网文档地址），接下来介绍一下制作方法。首先是三个基本场景：scenenewTHREE.Scene();camera:cameranewTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.01,10)renderer:renderernewTHREE.WebGLRenderer()后三主要部分都可用了，就要渲染到renderer设置renderer的大小，然后将renderer添加到页面中，再设置camera的位置。这是我们创建盒子模型的地方。放入场景中，打开帧循环初始化场景和里面的相机。这时候我们来看看效果，就是会出现一个绿色的方块，可以根据我们的鼠标进行旋转、放大和缩小。可以控制对象。案例代码此时还在黑夜，我们来加载环境光HDR图像：RGBELoader现在感觉对不对，效果和第一个差不多，环境有了，现在我们只是替换我们创建的盒子with甜甜圈模型的效果就完成了。事不宜迟，让我们立即加载甜甜圈模型。当当当当，最后的效果出来了。END的个人陷阱首先是类型问题。三不像TS。如果类型不对，它会报错给你。在主机上也很正常，没有流行起来。不像我们平时的业务代码，如果代码有问题，控制平台会直接报错，会给你错误提示。三只能自己查。前面可以，突然这里不行了，也可以在本地测试一下。效果消失了。这时候可以检查接口返回的数据类型是否有误。因为Three.js是3D的，有时候我们一开始不熟练的时候，往往相机位置不对，然后你的代码没有错，但是看效果的时候，直接看不出什么。这时候你会疑惑，什么情况，我是不是不适合学习这种idea，你可以用鼠标滚轮放大缩小看看能不能达到效果，是不是真的有问题影响本身，还是相机的初始位置有问题？.Three.js是慢工细活。可能大家用的是一样的API，一样的代码，但是人家调了很久的参数，效果可能很好看，也可能很真实。这个没有捷径，只能慢慢调整。当然可能有只是我不知道。结语终于写完了自己的第一篇技术文章，迈出了第一步，先为自己鼓掌。本文只是简单介绍了Three.js的基本API，并做了一个小demo。打算后面写一篇文章，从在Blender软件中建模开始，搭建一个基础模型，然后整理。找某人。允许这个角色在场地周围移动。元宇宙的一个雏形，因为涉及到建模操作，所以打算录个视频放到B站，仅供参考，毕竟我也是新手。（本来想写成一篇的，但是觉得篇幅太长，看腻了，二来也有私心，怕写第一篇就不写文章的习惯了）.熟能生巧，仅仅因为你学会了它，并不意味着你理解它。当你用你的语言说出来，让别人听懂了，就说明你真正掌握了知识和技能。可以直接去B站搜索Web3DPanda的直播回放视频，有三天签到营。当然，它比我的更详细，更好。当然，最后还是要感谢大帅老师（知道凯客巴的前端全栈课程）和庞达老师（知道什么时候在群里分配收入），不仅教会了我知识，也让我迈出了写文章的第一步，希望2023年能完成发表10篇技术文章的目标。欢迎加入源创影（v:dashhuailaoyuan）一起交流学习。案例代码import{OrbitControls}from'three/examples/jsm/controls/OrbitControls';import{GLTFLoader}from'three/examples/jsm/loaders/GLTFLoader';import{RGBELoader}from'three/examples/jsm/loaders/RGBELoader';letmixer;constscene=newTHREE.Scene();constcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.01,10);constrenderer=newTHREE.WebGLRenderer({antialias:真});renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);camera.position.set(0.5,0.4,0.7);constcontrols=newOrbitControls(camera,renderer.domElement);//创建环境光，有光了才亮了constambientLight=newTHREE.AmbientLight(0xffffff,0.3);scene.add(ambientLight);constdirectionLight=newTHREE.DirectionalLight(0xffffff,0.4);scene.add(directionLight);letdonuts;newGLTFLoader().load('../resources/models/donuts.glb',(gltf)=>{scene.add(gltf.scene);donuts=gltf.scene;混音器=新的THREE.AnimationMixer（gltf.scene）；constclips=gltf.animations;//播放所有动画clips.forEach(function(clip){constaction=mixer.clipAction(clip);action.loop=THREE.LoopOnce;//停在最后一臂action.clampWhenFinished=true;action.play();});});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);});/**寻循环*/animate();functionanimate(){requestAnimationFrame(animate);renderer.render（场景，相机）；控制.更新（）；如果（甜甜圈）{donuts.rotation.y+=0.01;}if(mixer){mixer.update(0.02);}}
