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

與vertexColors: THREE.VertexColors的geometry.colors[]作品使用時，使用幾何THREE.Points()。

如果你想申請頂點顏色的面孔的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例如