three顶点颜色数据差值计算_three 差值图

---

前言

每个顶点也可以是不同的颜色

---

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

一、创建一个几何体

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1.可以给每个顶点设置不同的颜色

//类型数组创建顶点颜色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
1
2
3
4
5
6
7
8
9
10
11
12

2. 组合模型 几何体 + 材质

2.1 点渲染模式

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

2.2 线渲染模式 (使用线渲染模式时候, 默认会进行颜色差值计算)

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

2.3 面渲染模式 , 使用面渲染模式, 也会进行颜色差值计算

//材质对象
var material = new THREE.MeshBasicMaterial({
  // 使用顶点颜色数据渲染模型，不需要再定义color属性
  // color: 0xff0000,
  vertexColors: THREE.VertexColors, //以顶点颜色为准
});
// 网格模型  三角面渲染模式
var mesh = new THREE.Mesh(geometry, material); //网格模型
scene.add(mesh); //点对象添加到场景中
1
2
3
4
5
6
7
8
9

总结

几何体是右各个顶点组成, 那么每个顶点也可以拥有不同的颜色
其中 使用点(Points)渲染模式, 会依次正常的显示设置好的颜色
使用线(Line)或面(Mash | Group) ,每个顶点会进行差值计算