javascript - Three.js 带顶点的 RGB 立方体

Question

我尝试在 Three.js 中做一个 RGB 立方体，但我必须使用顶点，没有纹理。我看了一些教程，但是我的代码不起作用，我可以求教吗？谢谢。

https://jsfiddle.net/yjru14q3/

var geom = new THREE.Geometry();

        geom.vertices = vertices;
        geom.vertexColors = colors;
        var colors = [];
        colors[0] = new THREE.Color( 0, 0, 0 );
        ....
        var vertices = [];
        vertices[0] = new THREE.Vector3( 0, 0, 0 );
        ....
        var material = new THREE.MeshBasicMaterial({ 
            vertexColors: THREE.VertexColors,
            side: THREE.DoubleSide, // in case we go inside the cube
        });

        var cube = new THREE.Mesh(geom, material);
        scene.add(cube);

Answer 1

当您为 THREE.Points() 使用几何时，geometry.colors[] 的使用与 vertexColors: THREE.VertexColors 一起使用。

如果要为THREE.Mesh() 的面顶点应用顶点颜色，那么最好遵循this example。 :

var geom = new THREE.BoxGeometry(1, 1, 1);
var faceIndices = ['a', 'b', 'c'];
var vertexIndex, point;
geom.faces.forEach(function(face) { // loop through faces
  for (var i = 0; i < 3; i++) {
    vertexIndex = face[ faceIndices[ i ] ]; // get the face's vertex's index
    point = geom.vertices[vertexIndex]; // knowing the index, find the vertex in array of vertices
    color = new THREE.Color( // create a color
      point.x + 0.5, //apply xyz as rgb
      point.y + 0.5,
      point.z + 0.5
    );
    face.vertexColors[ i ] = color; //store the color in the face's vertexColors array
  }
});

var mat = new THREE.MeshBasicMaterial({
  vertexColors: THREE.VertexColors
});

var cube = new THREE.Mesh(geom, mat);
scene.add(cube);

jsfiddle例子