頂点を持つThree.js RGBキューブ

Question

Three.jsでRGBキューブを作成しようとしましたが、頂点やテクスチャは使用しなくてはなりません。私はいくつかのチュートリアルを見ていますが、私のコードがうまくいかない、アドバイスを求めることはできますか？ありがとう。あなたがTHREE.Points()のジオメトリを使用する場合vertexColors: THREE.VertexColorsとgeometry.colors[]作品の使用

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.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例