举荐：将NSDT场景编辑器退出你3D工具链
其余工具系列：NSDT简石数字孪生

顶点地位数据解析渲染

如果你没有WebGL根底，能够先不必记忆每个的threejs 具体内容，有一个大抵印象即可，学习本节课的重点是建设顶点的概念。如果你建设了顶点的概念，那么对于你深刻了解学习hree.js很有帮忙。如果你曾经有WebGL根底或者说图形学根底，阐明你必定有顶点的概念，本节课重点能够放在学习threejs的API应用细节，threejs引擎是如何封装webgl的。

JavaScript类型化数组

本节课会用到javascript的类型化数组，你如果不理解，可查看MDN对于javascript类型化数组的介绍,也能够查看文章类型化数组。

自定义几何体

你能够间接调用BoxGeometry间接创立一个立方体几何体，调用SphereGeometry创立一个球体几何体。不过为了大家更好的建设顶点概念，通过上面的代码自定义了一个几何体，通过网格模型能够渲染进去两个三角形成果。

上面代码通过Threejs引擎的BufferGeometry和BufferAttribute两个API自定义了一个具备六个顶点数据的几何体。
var geometry = new THREE.BufferGeometry(); //创立一个Buffer类型几何体对象

//类型数组创立顶点数据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, //顶点6坐标]);// 创立属性缓冲区对象var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，示意一个顶点的xyz坐标// 设置几何体attributes属性的地位属性geometry.attributes.position = attribue;

通过自定义的几何体创立一个网格模型。对于网格模型而言，几何体所有顶点每三个顶点为一组能够确定一个三角形，几何体是六个顶点，也就是说能够绘制两个三角形，当然了你能够本人再减少三个顶点地位坐标数据，测试下渲染成果。

// 三角面(网格)渲染模式var material = new THREE.MeshBasicMaterial({  color: 0x0000ff, //三角面色彩  side: THREE.DoubleSide //两面可见}); //材质对象var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

点模型Points

为了更好的了解几何体是由顶点形成的，能够把几何体geometry作为点模型Points而不是网格模型Mesh的参数，你会发现下面的六个点坐标会渲染为六个方形的点区域，能够用上面代码代替下面的网格模型局部代码测试成果。对于网格模型Mesh而言，几何体geometry三个顶点为一组渲染进去一个三角形，对于点模型Points而言，几何体的每个顶点对应地位都会渲染进去一个方形的点区域，该区域能够设置大小。

// 点渲染模式var material = new THREE.PointsMaterial({  color: 0xff0000,  size: 10.0 //点对象像素尺寸}); //材质对象var points = new THREE.Points(geometry, material); //点模型对象scene.add(points); //点对象增加到场景中

线模型Line

下面两个案例实用点模型和网格模型去渲染几何体的顶点数据，上面代码是把几何体作为线模型Line参数，你会发现渲染成果是从第一个点开始到最初一个点，顺次连成线。

// 线条渲染模式var material=new THREE.LineBasicMaterial({    color:0xff0000 //线条色彩});//材质对象var line=new THREE.Line(geometry,material);//线条模型对象scene.add(line);//线条对象增加到场景中

几何体实质

查看上面一段代码，你能够看进去立方体网格模型Mesh是由立方体几何体geometry和材质material两局部形成，立方体几何体BoxGeometry实质上就是一系列的顶点形成，只是Threejs的APIBoxGeometry把顶点的生成细节封装了，用户能够间接应用。比方一个立方体网格模型，有6个面，每个面至多两个三角形拼成一个矩形立体，每个三角形三个顶点形成，对于球体网格模型而言，同样是通过三角形拼出来一个球面，三角形数量越多，网格模型外表越靠近于球形。

var geometry = new THREE.BoxGeometry(100, 100, 100); //创立一个立方体几何对象Geometryvar material = new THREE.MeshLambertMaterial({  color: 0x0000ff}); //材质对象Materialvar mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

3D建模学习工作室