使用 Three.js 的顶点颜色创建渐变三角形，展示顶点颜色的插值效果。

let geometry = new THREE.BufferGeometry();
let vertices = new Float32Array([
    0, 0, 0,   // 顶点p1
    0, 200, 0, // 顶点p2
    200, 0, 0, // 顶点p3
]);

geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));

let colors = [
    1.0, 0.0, 0.0, // 颜色1 (红色)
    0.0, 1.0, 0.0, // 颜色2 (绿色)
    0.0, 0.0, 1.0, // 颜色3 (蓝色)
];

let colorAttribute = new THREE.BufferAttribute(new Float32Array(colors), 3);
geometry.setAttribute("color", colorAttribute);

let indices = [0, 1, 2]; // 索引0, 1, 2 表示顶点数组中的p1, p2, p3
let indexAttribute = new THREE.BufferAttribute(new Uint16Array(indices), 1);
geometry.setIndex(indexAttribute);

let material = new THREE.MeshBasicMaterial({
    vertexColors: true,
    side: THREE.DoubleSide,
    wireframe: false,
});