示例代码托管于：http://www.github.com/dashnowords/blogs博客园地址：《大史住在大前端》原博文目录华为云社区地址：【你要的前端打怪升级指南】【TOC】一、资料推荐与建议1、官方文档写的很详细，但是API部分单独看很难理解，属于参考书。官方github仓库提供了大量的插件和demo页面。2、在CSDN上找到的一篇【Three.js系列博文】内容比较全面，包括three.js的基础知识、官方仓库的示例说明、插件说明等，算是主线了作者的学习。3.以上内容最好做个大功课练习4.如果想学习底层知识，需要学习的资料是线性代数和WebGL编程指南。2.Three.js中的基本概念官方文档中的新手示例过于简单，所以本节对Three.js中的概念进行一些补充说明：目标三要素：场景Scene、相机Camera、渲染器Renderer具体用法可见官方文档LightTHREE.js中的【Demofornewbies】提供了点光源、射线光源、平行光、环境光等多种光源来模拟光线。几何生成实体的第一步是建立几何模型。THREE.js根据构建数据的数据类型，将几何模型分为Geometry和BufferGeometry两大类。每个内置类型都可以使用其中的任何一个。在实现上，BufferGeometry操作在构造型数组上，使用起来更严格、更复杂，但性能相对较好。THREE.js内置了数十种常见的几何图形，包括立方体、球体和多面体。它还可以将canvas绘制的平面图形拉伸成实体。MaterialMaterial第二步是为实体选择material材料。材质描述了几何体表面对光线的表现。无论是像金属表面那样的高光，还是像粗糙表面那样的漫反射光，也可以利用几何体的不同表面。选择不同的材料。material材质需要和贴图贴图适当搭配，才能让最终的物理效果更加逼真。比如立方体选择了镜面反射材质，却贴上了砖墙的纹理，最后的效果会很奇怪。第三步，为实体选择纹理纹理。纹理通常是通过引入一张图片来生成的。通过纹理，可以将几何体呈现为它所代表的实体模型，例如球体。如果贴一个足球的贴图就是Soccer，贴篮球的贴图，把周围的环境当贴图贴在它的表面就是水晶球。纹理通常通过在实例化材质时指定贴图参数来关联。实体对象在大多数博文的例子中，只有Mesh（网格实体）作为实体模型的一类。其实THREE.js还提供了Points（粒子点集实体）、Line（线状实体）、Skeleton（骨骼动画实体）等抽象实体模型来构建模型。实体的实例化依赖于geometry几何模型实例和material材质实例。最后调用场景的add方法将实体实例添加到场景中，实体就可以被渲染器渲染出来了。动画更新动画的更新其实和二维动画一样，也是通过requestAnimationFrame和逐帧动画来实现的。3.重点说明webGL中的世界坐标是基于屏幕中心(0,0,0)的。面向屏幕时，X正向在右，Y正向在上，Z正向指向屏幕外。dat.GUI是一个很棒的动态调试工具，官方仓库地址：https://github.com/dataarts/dat.guiTHREE.CameraHelper类可以生成camerafrustum辅助线，非常好用。常见材质的区别如下：MeshLambertMaterial适合表达漫反射面，MeshStandardMaterial和MeshPhongMaterial适合表达镜面反射面，MeshBasicMaterial是不响应光照的基础材质。THREE.PointLight是真正的点光源，THREE.SpotLight是射线光源。flyControls控件相当于实现了相机的第一人称视角。玩过CS的应该都懂。材质的基本定义：生成网格实例时传入wireframe:true，以网格形式显示几何体。三、LatheGeometry相当于3D建模软件中的“根据样条曲线生成旋转体”。构造函数的参数中没有旋转轴。这里官方文档中是这样写的：Turning是绕Y轴旋转。THREE.shapeGeometry、THREE.ExtrudeGeometry和其他类型的从平面生成3D实体的模型。有兴趣的可以试试3D建模软件solidworks。完全是一种方式，对于理解这些抽象的几何实体很有帮助。3D动画和2D动画的原理没有区别，都是通过逐帧动画实现的。AnimationMixer是场景中特定对象的动画播放器。当场景中有多个独立的动画时，可以为每个对象使用一个AnimationMixer。变形动画的实现过程：获取animationMixer实例，获取clip实例，获取action实例，最后调用action.setDuration().play()开始动画播放。与骨骼动画相比，变形文件更大，加载速度更慢，但实际上在网页上需要的计算更少；骨骼动画文件较小，在网页上运行时需要更多的计算。反射面是通过在实例化材质时修改envMap属性来实现的。舞台背景scene.background可以设置贴图贴图。四。调整贴图的补充例子Section15-关于物体的阴影，后来发现这个问题在Section27有说明。许多演示无法生成投影。投影不仅需要设置光线和物体的castShadow=true，receiveShadow=true，还需要选择一种可以响应光线的材质。另外，影子需要独立相机拍摄。默认为正交相机。正确调整其参数即可显示阴影。当参数配置错误时，可能会出现半阴影或马赛克黑色区域：//InitializelightfunctioninitLight(color){//添加环境光ambientLight=newTHREE.AmbientLight(0x404040)scene.add(ambientLight);//添加平衡灯light=newTHREE.DirectionalLight(0xffffff);light.castShadow=true;light.shadow.camera.near=0.1;//默认light.shadow.camera.far=1000;//默认light.shadow.camera.left=-5;//默认light.shadow.camera.top=10;//默认light.position.set(60,30,0);scene.add(light);}另外，可以通过开启相机辅助功能查看阴影相机的视锥，并通过dat.GUI等其他工具进行调整：shadowCameraHelper=newTHREE.CameraHelper(light.影子相机）；scene.add(shadowCameraHelper);第46节-关于将svg拉伸成实体，原文中提到的transformSVGPathExposed函数和官方代码仓库lib中的脚本已经找不到了。新版官方文档听说有SVGLoader来完成svg到shape的转换。具体使用请参考SVGLoaderDocumentation，官方仓库的例子提供了webgl_loader_svg.html样例文件，我们对其稍作改动，将转换后的形状作为参数，得到拉伸体实例THREE.ExtrudeGeometry，你可以看到读入的svg被拉长了：Section58-Focus:实现与THREE的交互。Raycaster在这里很重要，它是3D模型能够响应用户交互的关键。下面文章101部分也对这部分知识进行了讲解，官方文档中已经提供了示例代码。如果对平面坐标到三维坐标的转换不了解，可以看这篇博文ThreeJS中的点击与交互——Raycaster的使用。作者还提供了示例demo，供参考。第85节：使用morphTargetInfluences实现动画（简称Morph动画）Morph动画的基本原理摘录如下（原文链接）：value是一个标量，决定了一个morphtarget的效果。变形目标是与原始顶点列表并列的另一个顶点列表（相同长度）。假设我们有一个大小为2（一行）的列表，varlist1=[0.1,-0.2]和一个变形目标：varlist2=[0.2,-0.3]标量值的使用方式如下：finalVertexPosition=list1[0]+(list2[0]*标量);使用时需要在Geometry实例构造函数的配置项中开启morphTargets:true，目标几何的点集顶点相当于上面的list1，目标聚合几何实例的morphTargets数组中存储的向量相当于上面的list2（可以存储多个），morphTargetInfluences数组中存储的是每个morphTargets中变形向量对原物体的影响系数，取值为-1~1，相当于上面的标量，变形动画可以通过不断改变morphTargetInfluences的值来实现，morphTargetInfluences是mesh实例的属性而不是geometry属性。第101节：3D世界坐标找平面坐标文中提到的localToWorld方法其实是继承自Object3D父类。当前版本的方法签名为：Object3D.localToWorld(target:THREE.Vector3):target表示调用时需要传入一个空的Vector3实例，然后将结果填入其中，方式为文章中不带参数调用会报错。其他的可以按照原来的方法把二维空间的坐标倒过来。
