Three.js教程：顶点颜色数据插值计算

// 假设我们已经有了一个Three.js的场景(scene)和一个渲染器(renderer)
 
// 创建一个新的几何体对象
var geometry = new THREE.BufferGeometry();
 
// 创建顶点位置的数据
var vertices = new Float32Array([
    0.0, 0.0, 0.0, // 顶点1坐标
    1.0, 0.0, 0.0, // 顶点2坐标
    0.5, 1.0, 0.0  // 顶点3坐标
]);
 
// 将顶点位置数据分配给几何体属性
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
 
// 创建顶点颜色数据
var colors = new Float32Array([
    1.0, 0.0, 0.0, // 顶点1颜色（红色）
    0.0, 1.0, 0.0, // 顶点2颜色（绿色）
    0.0, 0.0, 1.0  // 顶点3颜色（蓝色）
]);
 
// 将顶点颜色数据分配给几何体属性
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
 
// 设置材质，使用顶点颜色进行着色
var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors });
 
// 创建一个网格对象
var mesh = new THREE.Mesh(geometry, material);
 
// 将网格添加到场景中
scene.add(mesh);
 
// 渲染场景
renderer.render(scene, camera);

这段代码创建了一个简单的几何体，并为它定义了顶点颜色。然后，它使用了MeshBasicMaterial材质，设置vertexColors属性为THREE.VertexColors来指定使用顶点颜色进行着色。最后，将网格添加到场景中并进行渲染。这样，三角形的每个顶点都会被它自己定义的颜色所着色。