Three.js RGB Cube mit Vertices

Question

Ich versuche in Three.js einen RGB-Würfel zu erstellen, aber ich muss einen Vertices, keine Texturen verwenden. Ich schaue mir einige Tutorials an, aber mein Code funktioniert nicht. Kann ich um Rat fragen? Vielen Dank.

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

Verwendung von geometry.colors[] Arbeiten mit vertexColors: THREE.VertexColors, wenn Sie die Geometrie für THREE.Points() verwenden.

Wenn Sie Vertexfarben für Gesichter Eckpunkten THREE.Mesh() anwenden möchten, dann ist es besser, this example zu folgen:

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 Beispiel