three.js.Line顶点显示不同颜色
时间: 2023-11-07 08:26:13 浏览: 37
要显示`THREE.Line`的每个顶点的不同颜色,可以使用`THREE.BufferGeometry`和`THREE.LineBasicMaterial`,并将颜色数据传递给几何体的`color`属性。以下是一个简单的例子:
```javascript
// 创建一个包含顶点坐标和颜色的数组
var positions = [
0, 0, 0, 1, 0, 0,
1, 1, 1, 0, 1, 0,
2, 2, 2, 0, 0, 1
];
// 创建一个几何体并将顶点坐标数组传入
var geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
// 将颜色数据传递给几何体的color属性(每个顶点对应一个颜色)
geometry.addAttribute('color', new THREE.Float32BufferAttribute([
1, 0, 0,
0, 1, 0,
0, 0, 1
], 3));
// 创建一个材质
var material = new THREE.LineBasicMaterial({vertexColors: THREE.VertexColors});
// 创建一个线对象并将几何体和材质传入
var line = new THREE.Line(geometry, material);
// 将线对象添加到场景中
scene.add(line);
```
在这个例子中,我们创建了一个包含3个顶点的数组,并将它们传入一个`THREE.BufferGeometry`。接着,我们将颜色数据传递给几何体的`color`属性,并使用`THREE.LineBasicMaterial`创建一个材质,并设置`vertexColors`为`THREE.VertexColors`。最后,我们创建了一个`THREE.Line`对象并将几何体和材质传入。最终,我们将线对象添加到场景中。