threejs1、创建three三要素2、创建物体3、轨道控制器循环渲染，控制的是摄像机的位置4、坐标轴5、跟随窗口变化而变化6、dat.GUI 工具7、物体放不同的材质颜色8、性能监视器9、删除物体10、创建组，将物体放在组里面进行统一的管理11、移除组12、贴图纹理（虚拟VR看房）13、视频贴图14、将普通的标签添加到 3D 场景中14-1、3D标签14-2、2D标签14-3、精灵标签 CSS3DSprite15、事件15-1、普通的标签事件15-2、3D 物体事件16、不同的材质17、光源 和 阴影18、调整照相机默认进来显示的位置19-A、创建一堆的点（自定义几何体）19-B、创建曲线 Curve、曲线渐变色19-C、样条曲线 和 贝塞尔曲线19-D、管道曲线19-E、旋转成型几何体 LatheGeometry19-F、轮廓填充几何体 ShapeGeometry19-G、拉伸成型几何体 ExtrudeGeometry19-H、添加模型边线20、点材质和模型21、线材质和模型22、clone 和 copy23、查找模型24、获取世界坐标25、改变旋转中心26、改变相机初始位置27、GLTF模型加载28、使用纹理贴图 修改 GLTF模型加载中的贴图问题 flipY29、材质金属度、粗糙度、环境贴图、清漆层、透光率、折射率30、包围盒 - 获取模型尺寸31、空中漫游32、个人的视角运动33、精灵模型34-1、精灵模型 模拟 雨雪天气34-2、雾天35、后处理 - 描边、发光、闪屏36、关键动画帧37、变形动画（高矮胖廋）38、骨骼动画（动作）案例模拟人运动1-1、模拟人前进（距离=速度*时间）带阻尼1-2、相机在人的后脑勺跟着人运动点、线物体X、创建 点 物体Y、创建 线 物体Z、创建 线 物体的区别下载three 包npm i three1、创建three三要素场景、相机、渲染器// 创建场景letscene=newTHREE.Scene()// 创建摄像机（第一个参数相当于人的眼睛睁开的大小；第二个参数是宽高比，要和画布的宽高比一致；后面的两个参数是近截面和远截面）letcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)camera.position.set(3,3,3)// camera.lookAt(0, 0, 0)camera.lookAt(mesh.position)// 创建渲染器letrenderer=newTHREE.WebGLRenderer({antialias:true})// 设置画布大小renderer.setSize(window.innerWidth,window.innerHeight)// 调整清晰度renderer.setPixelRatio(window.devicePixelRatio)// 设置背景色, 第二个参数是透明度renderer.setClearColor(newTHREE.Color("black"),1)// 将画布添加到body标签中进行展示document.body.appendChild(renderer.domElement)2、创建物体// 立方缓冲几何体constgeometry=newTHREE.BoxGeometry(1,1,1)// 网格基础材质constmaterial=newTHREE.MeshBasicMaterial({color:0x00ff00,side:THREE.DoubleSide,transparent:true,opacity:0.6})// 创建网格对象constcube=newTHREE.Mesh(geometry,material)// 对物体做移动、旋转、缩放// 沿着X轴移动5个单位cube.position.x=5// 沿着X轴旋转 45度cube.rotation.x=Math.PI/4// 沿着Z轴放大2倍cube.scale.set(1,1,2)// 给物体取名字, 方便后续对物体进行操作，比如删除物体cube.name="cu"// 创建的物体加到场景中scene.add(cube)3、轨道控制器循环渲染，控制的是摄像机的位置垂直方向旋转水平方向旋转摄像机的最小距离和最大距离import{OrbitControls}from"three/addons/controls/OrbitControls.js"letcontrols=newOrbitControls(camera,renderer.domElement)// 阻尼效果controls.enableDamping=true// 自动旋转controls.autoRotate=true// 垂直方向看到的最小和最大的位置（看上图）controls.minPolarAngle=0controls.maxPolarAngle=Math.PI// 水平方向的旋转controls.minAzimuthAngle=0controls.maxAzimuthAngle=Math.PI// 摄像机的最小距离和最大距离controls.minDistance=1controls.maxDistance=5// 不要忘记在 循环渲染的函数里面 调用 轨道控制器的 update 方法functionrenderLoop(){// 开始渲染renderer.render(scene,camera)controls.update()requestAnimationFrame(renderLoop)// 围绕着Y轴不停的旋转mesh.rotateY(0.01)}4、坐标轴// 创建坐标轴添加在到场景中，长度是5个单位constaxesHelper=newTHREE.AxesHelper(5)scene.add(axesHelper)5、跟随窗口变化而变化window.addEventListener("resize",()={renderer.setSize(window.innerWidth,window.innerHeight)camera.aspect=window.innerWidth/window.innerHeight camera.updateProjectionMatrix()})6、dat.GUI 工具gui 增加 add 方法的时候 第一个参数 传入对象；第二个参数传入 对象的key; 第三个参数 最小值；第四个参数 最大值；第五个参数 step步长constobj={x:5}gui.add(obj,'x',1,10,0.1).name('x坐标轴').onChange(val={})npm i dat.guiimportdatfrom"dat.gui"constgui=newdat.GUI()// 调整样式gui.domElement.style.position="fixed"gui.domElement.style.right="-15px"// 控制浏览器tab文字gui.add(document,'title')// 轨道控制器恢复初始位置gui.add(controls,'reset')// 控制物体的显示和隐藏gui.add(cube,"visible")// 控制物体颜色constcolorCube={color:`#${cube.material.color.getHexString()}`}gui.addColor(colorCube,'color').onChange(v=cube.material.color=newTHREE.Color(v))// 创建分组，影响物体的位置、旋转、缩放constfolder=gui.addFolder("运动")folder.add(cube.position,'x',-5,5,0.1)folder.add(cube.position,'y',-5,5,0.1)folder.add(cube.position,'z',-5,5,0.1)folder.add(cube.rotation,'x',0,Math.PI*2,0.1)folder.add(cube.rotation,'y',0,Math.PI*2,0.1)folder.add(cube.rotation,'z',0,Math.PI*2,0.1)folder.add(cube.scale,'x',0,2,0.1)folder.add(cube.scale,'y',0,2,0.1)folder.add(cube.scale,'z',0,2,0.1)// 下拉菜单，选择方案gui.add({type:'1'},'type',{'方案一':'1','方案二':'2'}).onChange(v={console.log(v);switch(v){case'1':cube.position.set(0,0,0)break;case'2':cube.position.set(1,1,1)break;}})7、物体放不同的材质颜色// 立方缓冲几何体constgeometry=newTHREE.BoxGeometry(1,1,1)// 网格基础材质constmyColors=['red','green','blue','pink','orange','write']constmaterials=myColors.map(myColor={returnnewTHREE.MeshBasicMaterial({color:myColor})})// 创建网格对象cube=newTHREE.Mesh(geometry,materials)// 创建的物体加到场景中scene.add(cube)8、性能监视器importStatsfrom"three/examples/jsm/libs/stats.module.js"stats=newStats()stats.setMode(0)stats.domElement.style.position="fixed"stats.domElement.style.left="0"stats.domElement.style.right="0"document.body.appendChild(stats.domElement)// 在循环渲染函数中需要 update 方法functionrenderLoop(){// 开始渲染renderer.render(scene,camera)controls.update()stats.update()requestAnimationFrame(renderLoop)}9、删除物体window.addEventListener("dblclick",()={// 创建物体的时候给物体取的名字叫 cuconstmeshs=scene.children.filter(v=v.name==='cu')constcubeDele=meshs[0]if(!cubeDele)return// 删除几何体cubeDele.geometry.dispose()// 删除材质cubeDele.material.dispose()// 要是有纹理，也需要把纹理删除掉 texture.dispose()// 场景中移除掉物体scene.remove(cubeDele)})隐藏模型 和 隐藏材质mesh.visible=falsemesh.material.visible=false10、创建组，将物体放在组里面进行统一的管理letgroup=newTHREE.Group()group.add(cube1)group.add(cube2)scene.add(group)11、移除组group.children.map(mesh={mesh.geometry.dispose()mesh.material.dispose()group.remove(mesh)})scene.remove(group)12、贴图纹理（虚拟VR看房）全景贴图，建议放置在球体上constgeo=newTHREE.SphereGeometry(1,32,16)consttexture=newTHREE.TextureLoader().load("放置图片的路径")// 沿着X轴进行平铺texture.wrapS=THREE.RepeatWrapping// 沿着Y轴进行平铺texture.wrapT=THREE.RepeatWrapping// X轴、Y轴平铺20个texture.repeat.set(20,20)// 一张图片加载部分texture.repeat.set(1/15,1)// x轴显示图片的 十五分之一，y轴显示全部texture.offset(0/15,1)// x轴移动到第一份； texture.offset(0 / 15, 1)表示X轴移动到最后一份展示texture.colorSpace=THREE.SRGBColorSpace// 设置纹理贴图的颜色空间，保证颜色不失真constmateirl=newTHREE.MeshBasicMaterial({map:texture})constsphere=newTHREE.Mesh(geo