three设置Geometry顶点位置,顶点颜色数据

---

前言

使用 BufferGeometry创建的几何体,顶点数据是类型化数组
使用 Geometry创建几何体使用一个对象表示Vector3

---

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

一、 创建一个Geometry

1.创建网格模型

/**
 * 创建网格模型
 */
var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry

var p1 = new THREE.Vector3(50, 0, 0); //顶点1坐标
var p2 = new THREE.Vector3(0, 70, 0); //顶点2坐标
var p3 = new THREE.Vector3(80, 70, 0); //顶点3坐标
//顶点坐标添加到geometry对象
geometry.vertices.push(p1, p2, p3);

2.创建顶点颜色

// Color对象表示顶点颜色数据
var color1 = new THREE.Color(0x00ff00); //顶点1颜色——绿色
var color2 = new THREE.Color(0xff0000); //顶点2颜色——红色
var color3 = new THREE.Color(0x0000ff); //顶点3颜色——蓝色
//顶点颜色数据添加到geometry对象
geometry.colors.push(color1, color2, color3);

3.可以使用点渲染模式和线渲染模式, 不能直接使用面渲染模式

线渲染模式

//材质对象
var material = new THREE.LineBasicMaterial({
  // 使用顶点颜色数据渲染模型，不需要再定义color属性
  // color: 0xff0000,
  vertexColors: THREE.VertexColors, //以顶点颜色为准
});
//线条模型对象
var line = new THREE.Line(geometry, material);
scene.add(line); //线条对象添加到场景中

点渲染模式

var material = new THREE.PointsMaterial({
  // 使用顶点颜色数据渲染模型，不需要再定义color属性
  // color: 0xff0000,
  vertexColors: THREE.VertexColors, //以顶点颜色为准
  size: 10.0 //点对象像素尺寸
}); //材质对象
var points = new THREE.Points(geometry, material); //点模型对象
scene.add(points); //点对象添加到场景中

小结

使用 Geometry创建几何体使用一个对象表示Vector3
且顶点位置数据集合在geometry.vertices中, 且是一个数组,数组的元素是一个Vector3
且顶点颜色数据集合在geometry.colors中, 且也是一个数组 , 数组的元素是一个Color
且只能使用点渲染模式 和 线渲染模式