Three.js RGB Cube with vertices

Question

I try to do a RGB cube in Three.js, but i must use a vertices, no textures. I look at some tutorials, but my code does not work, can I ask for advice? Thanks.

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);

You can use box geometry - [link to box geometry docs](https://threejs.org/docs/#Reference/Geometries/BoxGeometry) — uhura, Mar 16 '17 at 21:30

score 3 · Accepted Answer · answered Mar 16 '17 at 21:33

Using of geometry.colors[] works with vertexColors: THREE.VertexColors when you use the geometry for THREE.Points().

If you want to apply vertex colors for faces' vertices of THREE.Mesh(), then it's better to follow 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 example

Three.js RGB Cube with vertices

1 Answers1