ThreeJS 第二篇：顶点概念、几何体结构
一、顶点位置数据解析渲染
👼学习本节课的重点是建立顶点的概念。如果你建立了顶点的概念，那么对于你深入理解学习 Three.js 很有帮助。
(一)、JavaScript 类型化数组
(二)、自定义几何体
😋可以直接调用 BoxGeometry 直接创建一个立方体几何体，调用 SphereGeometry 创建一个球体几何体。
下面代码通过 Threejs 引擎的BufferGeometry和BufferAttribute两个 API 自定义了一个具有六个顶点数据的几何体。
var scene = new THREE.Scene(); 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 //点光源 scene.add(mesh); //网格模型添加到场景中
(三)、点模型 Points
三个点为一组渲染出三角形
// 点渲染模式 var material = new THREE.PointsMaterial({ color: 0xff0000, size: 10.0, //点对象像素尺寸 }); //材质对象 var points = new THREE.Points(geometry, material); //点模型对象 scene.add(points); //点对象添加到场景中
(四)、线模型 Line
可以把上面的点连接起来
// 线条渲染模式 var material = new THREE.LineBasicMaterial({ color: 0xff0000, //线条颜色 }); //材质对象 var line = new THREE.Line(geometry, material); //线条模型对象 scene.add(line); //线条对象添加到场景中
(五)、几何体本质
一个立方体网格模型，有 6 个面，每个面至少两个三角形拼成一个矩形平面，每个三角形三个顶点构成，对于球体网格模型而言，同样是通过三角形拼出来一个球面，三角形数量越多，网格模型表面越接近于球形。
矩形顶点线条
var scene = new THREE.Scene(); var geometry = new THREE.BoxGeometry(100, 100, 100); var material = new THREE.PointsMaterial({ color: 0xff0000, size: 10.0 //点对象像素尺寸 }); //材质对象 // var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh var line = new THREE.Line(geometry, material);//线条模型对象 scene.add(line);
球顶点线条
var scene = new THREE.Scene(); var geometry = new THREE.BoxGeometry(100, 100, 100); var material = new THREE.PointsMaterial({ color: 0xff0000, size: 10.0 //点对象像素尺寸 }); //材质对象 // var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh var line = new THREE.Line(geometry, material);//线条模型对象 scene.add(line);
二、顶点颜色数据插值计算
(一)、顶点颜色数据插值计算
这节介绍一下几何体顶点颜色
顶点一有一个坐标数据，那么他就也有对应的顶点颜色数据…以此类推
(二)、每个顶点设置一种颜色
var scene = new THREE.Scene(); 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, //顶点6坐标 ]); // 创建属性缓冲区对象 var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，作为一个顶点的xyz坐标 // 设置几何体attributes属性的位置position属性 geometry.attributes.position = attribue; //类型数组创建顶点颜色color数据 var colors = new Float32Array([ 1, 0, 0, //顶点1颜色 0, 1, 0, //顶点2颜色 0, 0, 1, //顶点3颜色 1, 1, 0, //顶点4颜色 0, 1, 1, //顶点5颜色 1, 0, 1, //顶点6颜色 ]); // 设置几何体attributes属性的颜色color属性 geometry.attributes.color = new THREE.BufferAttribute(colors, 3); //3个为一组,表示一个顶点的颜色数据RGB //材质对象 var material = new THREE.PointsMaterial({ // 使用顶点颜色数据渲染模型，不需要再定义color属性 // color: 0xff0000, vertexColors: THREE.VertexColors, //以顶点颜色为准 size: 10.0 //点对象像素尺寸 }); // 点渲染模式 点模型对象Points var points = new THREE.Points(geometry, material); //点模型对象 scene.add(points); //点对象添加到场景 var axisHelper = new THREE.AxisHelper(250); scene.add(axisHelper);
(三)、材质属性.vertexColors
通过材质的颜色属性 color 设置模型颜色，而本案例并没有这样设置，而是设置了材质属性.vertexColors。
var material = new THREE.PointsMaterial({ // 使用顶点颜色数据渲染模型，不需要再定义color属性 // color: 0xff0000, vertexColors: THREE.VertexColors, //以顶点颜色为准 size: 10.0 //点对象像素尺寸 });
关于材质的属性.vertexColors 可以查看Material 文档 介绍，属性.vertexColors 的默认值是 THREE.NoColors，这也就是说模型的颜色渲染效果取决于材质属性.color，如果把材质属性.vertexColors 的值设置为 THREE.VertexColors,threejs 渲染模型的时候就会使用几何体的顶点颜色数据 geometry.attributes.color。
(四)、颜色插值
var scene = new THREE.Scene(); 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, //顶点6坐标 ]); // 创建属性缓冲区对象 var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，作为一个顶点的xyz坐标 // 设置几何体attributes属性的位置position属性 geometry.attributes.position = attribue; //类型数组创建顶点颜色color数据 var colors = new Float32Array([ 1, 0, 0, //顶点1颜色 0, 1, 0, //顶点2颜色 0, 0, 1, //顶点3颜色 1, 1, 0, //顶点4颜色 0, 1, 1, //顶点5颜色 1, 0, 1, //顶点6颜色 ]); // 设置几何体attributes属性的颜色color属性 geometry.attributes.color = new THREE.BufferAttribute(colors, 3); //材质对象 var material = new THREE.PointsMaterial({ vertexColors: THREE.VertexColors, size: 10.0 //点对象像素尺寸 }); // 点渲染模式 点模型对象Points var line = new THREE.Line(geometry, material);//线条模型对象 scene.add(line);
之所以出现渐变是因为Threejs通过底层WebGL进行渲染的时候会对顶点的颜色数据进行插值计算。颜色插值计算简单点说，比如一条直线的端点1设置为红色，端点2设置为蓝色，整条直线就会呈现出从点1到红色点2的蓝色颜色渐变，对于网格模型Mesh而言，就是三角形的三个顶点分别设置一个颜色，三角形内部的区域像素会根据三个顶点的颜色进行插值计算。
