three Face3对象定义Geometry的三角面

---

前言

通过Geometry定义的几何体, 只定义了顶点位置数据, 是不足以用面的渲染模式 , 只能使用点 和 线 的渲染模式

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、描述

如何让Geometry使用面渲染模式, 可以使用 Geometry中的faces属性来定义
faces属性是一个数组,其中每个元素都是一个Face3对象

1.首先创建一个几何体

/**
 * 创建网格模型
 */
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 THREE.Vector3(0, 0, 100); //顶点4坐标
//顶点坐标添加到geometry对象
geometry.vertices.push(p1, p2, p3,p4);

使用Face3函数构建三角面, 值其实是每一个顶点的索引 , 这里其实跟缓冲几何体中的顶点索引类型(只是缓冲几何体中的顶点索引需要创建一个整数型数组, 然后转换 ,然后赋值给几何体index属性即可)

2.定义第一个三角面

定义第一个三角面 , 注意vertexNormals, 其实是face的属性, 是一个数组, 其属性值是一个Vector3对象,可以给里面的每一个索引进一步设置法向量 ,也就是说, 在创建Face3对象的时候, 能同时创建三角面的索引, 和三角面各个顶点的索引

// Face3构造函数创建一个三角面
var face1 = new THREE.Face3(0, 1, 2);
//三角面每个顶点的法向量
var n1 = new THREE.Vector3(0, 0, -1); //三角面Face1顶点1的法向量
var n2 = new THREE.Vector3(0, 0, -1); //三角面2Face2顶点2的法向量
var n3 = new THREE.Vector3(0, 0, -1); //三角面3Face3顶点3的法向量
// 设置三角面Face3三个顶点的法向量
face1.vertexNormals.push(n1,n2,n3);

3.定义第二个三角面

定义第二个三角面 , 正常的定义Face3索引, 然后使用normal统一的定义每个索引顶点的法向量
第一个三角面可以分别对每个顶点索引设置单独的法向量, 而第二个三角面, 是统一设置的, 这是区别

// 三角面2
var face2 = new THREE.Face3(0, 2, 3);
// 设置三角面法向量
face2.normal=new THREE.Vector3(0, -1, 0);

4.赋值给几何体的faces属性中

接着把两个三角面, 赋值给几何体的faces属性中, faces 是一个数组, 其每个属性值必须是一个Face3对象

//三角面face1、face2添加到几何体中
geometry.faces.push(face1,face2);

5.三角面中的每个顶点设置颜色

为每个三角面中的每个顶点设置颜色,使用到了Face.vertexColors是一个数组, 每个元素都是一个Color对象

// 设置三角面face1三个顶点的颜色
face1.vertexColors = [
  new THREE.Color(0xffff00),
  new THREE.Color(0xff00ff),
  new THREE.Color(0x00ffff),
]

6.使用面的渲染模式

使用面的渲染模式 可同时使用 线 点 面渲染模式

//材质对象
var material = new THREE.MeshLambertMaterial({
  //color: 0xffff00,
  side:THREE.DoubleSide,//两面可见
  vertexColors: THREE.VertexColors, //以顶点颜色为准
});
//网格模型对象
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh); //网格模型对象添加到场景中

总结

通过Geometry定义的几何体, 只定义了顶点位置数据, 是不足以用面的渲染模式 , 只能使用点 和 线 的渲染模式
所以可以通过Geometry中的face来创建三角面, 才能使用面的渲染模式
且 Geometry中的face属性, 是一个数组, 数组中的每个元素都是一个Face3对象
Face3构造函数, 每个参数都是顶点的索引值
Face3在创建完顶点索引后, 还可以分别对每个顶点设置法向量 , Face3.vertexNormals ,vertexNormals是一个数组, 每个元素都是一个Vector3对象
Face3在创建完顶点索引后, 还可以一次性对每个顶点同时设置同一个法向量 , Face3.normal,直接复制一个Vector3对象即可
Face3在创建完顶点索引后,还可以为每个顶点设置颜色,然后使用面渲染模式, 材质使用顶点颜色, 即可做到颜色差值显示,使用到了Face.vertexColors是一个数组, 每个元素都是一个Color对象