CODEWITHSUNDEEP
javascriptthree.jsrgb
Lukáš Pícha
Lukáš Pícha

Reputation: 51

Three.js RGB Cube with vertices

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

Upvotes: 1

Views: 2299

Answers (1)

prisoner849
prisoner849

Reputation: 17596

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

enter image description here

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

Upvotes: 3

Related Questions