推荐：将NSDT场景编辑器加入你的3D工具链 其他系列工具：NSDT简石数字孪生 常见光源类型 Threejs虚拟光源是对自然界光照的模拟，threejs搭建虚拟场景的时候，为了更好的渲染场景，往往需要设置不同的光源，设置不同的光照强度，就像摄影师给你拍照要设置各种辅助灯光一样。 环境光AmbientLight 环境光是没有特定方向的光源，主要是均匀整体改变Threejs物体表面的明暗效果，这一点和具有方向的光源不同，比如点光源可以让物体表面不同区域明暗程度不同。 //环境光:环境光颜色RGB成分分别和物体材质颜色RGB成分分别相乘 var ambient = new THREE.AmbientLight(0x444444); scene.add(ambient);//环境光对象添加到scene场景中 你可以把光源颜色从0x444444更改为0x888888,可以看到threejs场景中的网格模型表面变的更亮。 点光源PointLight 点光源就像生活中的白炽灯，光线沿着发光核心向外发散，同一平面的不同位置与点光源光线入射角是不同的，点光源照射下，同一个

推荐：将NSDT场景编辑器加入你的3D工具链 其他系列工具：NSDT简石数字孪生 Face3对象定义Geometry的三角形面 几何体Geometry的三角面属性geometry.faces和缓冲类型几何体BufferGeometry顶点索引属性BufferGeometry.index类似都是顶点位置数据的索引值,用来组织网格模型三角形的绘制。 学习本节课最好对照2.4 顶点索引复用顶点数据学习。 下面代码自定义了一个由两个三角形构成的几何体，两个三角形有两个顶点坐标位置是重合的。 var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry var p1 = new THREE.Vector3(0, 0, 0); //顶点1坐标 var p2 = new THREE.Vector3(0, 100, 0); //顶点2坐标 var p3 = new THREE.Vector3(50, 0, 0); //顶点3坐标 var p4 = new

推荐：将NSDT场景编辑器加入你3D工具链 其他工具系列：NSDT简石数字孪生 顶点法向量数据光照计算 前面两节课讲解到了顶点位置坐标数据、顶点颜色数据，这节课讲解第三种顶点数据：顶点法向量。 如果你有初高中物理的光学基础，应该会有漫反射、镜面反射的概念。比如太阳光照在一个物体表面，物体表面与光线夹角位置不同的区域明暗程度不同，WebGL中为了计算光线与物体表面入射角，你首先要计算物体表面每个位置的法线方向，在Threejs中表示物体的网格模型Mesh的曲面是由一个一个三角形构成，所以为了表示物体表面各个位置的法线方向，可以给几何体的每个顶点定义一个方向向量。 不设置顶点法向量数据 下面代码仅仅定义了几何体BufferGeometry的顶点位置数据，没有定义顶点法向量数据。没有法向量数据，点光源、平行光等带有方向性的光源不会起作用，三角形平面整个渲染效果相对暗淡，而且两个三角形分界位置没有棱角感。 var geometry = new THREE.BufferGeometry(); //声明一个空几何体对象 //类型数组创建顶点位置position数据 var ver

推荐：将NSDT场景编辑器加入你3D工具链 其他工具系列：NSDT简石数字孪生 顶点颜色数据插值计算 上节课自定义几何体给大家介绍了一个顶点位置坐标概念，本节课给大家介绍一个新的几何体顶点概念，就是几何体顶点颜色。 通常几何体顶点位置坐标数据和几何体顶点颜色数据都是一一对应的，比如顶点1有一个顶点位置坐标数据，也有一个顶点颜色数据，顶点2同样也有一个顶点位置坐标数据，也有一个顶点颜色数据... 每个顶点设置一种颜色 你可以在上节课代码更改为下面代码设置，你可以看到几何体的六个顶点分别渲染为几何体设置的顶点颜色数据。 var geometry = new THREE.BufferGeometry(); //声明一个缓冲几何体对象 //类型数组创建顶点位置position数据 var vertices = new Float32Array([ 0, 0, 0, //顶点1坐标 50, 0, 0, //顶点2坐标 0, 100, 0, //顶点3坐标 0, 0, 10, //顶点4坐标 0, 0, 100, //顶点5坐标 50, 0, 10,

推荐：将NSDT场景编辑器加入你3D工具链 其他工具系列：NSDT简石数字孪生 顶点位置数据解析渲染 如果你没有WebGL基础，可以先不用记忆每个的threejs 具体内容，有一个大致印象即可，学习本节课的重点是建立顶点的概念。如果你建立了顶点的概念，那么对于你深入理解学习Three.js很有帮助。 如果你已经有WebGL基础或者说图形学基础，说明你肯定有顶点的概念，本节课重点可以放在学习threejs的API使用细节，threejs引擎是如何封装webgl的。 JavaScript类型化数组 本节课会用到javascript的类型化数组，你如果不了解，可查看MDN关于javascript类型化数组的介绍,也可以查看文章类型化数组。 自定义几何体 你可以直接调用BoxGeometry直接创建一个立方体几何体，调用SphereGeometry创建一个球体几何体。不过为了大家更好的建立顶点概念，通过下面的代码自定义了一个几何体，通过网格模型可以渲染出来两个三角形效果。 下面代码通过Threejs引擎的BufferGeometry和BufferAttribute两个A