带有顶点的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

当geometry.colors[]使用几何图形时，使用vertexColors: THREE.VertexColors可与THREE.Points()一起使用。

如果要为面部应用顶点颜色＆＃39; 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示例