Cube of RGB vertices created using Three.js

Question

Cube of RGB vertices created using Three.js

I am attempting to create an RGB cube using Three.js without textures, only vertices. I have followed various tutorials but my code is not working as expected. Can anyone provide some advice? Thank you.

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

javascript three.js rgb

Answer 1

Answer №1

When utilizing geometry.colors[] in conjunction with vertexColors: THREE.VertexColors, it functions seamlessly when the geometry is used for THREE.Points().

https://i.sstatic.net/7qznb.png

If you wish to implement vertex colors for faces' vertices of THREE.Mesh(), it's recommended to refer to this specific example:

var geom = new THREE.BoxGeometry(1, 1, 1);
var faceIndices = ['a', 'b', 'c'];
var vertexIndex, point;
geom.faces.forEach(function(face) { // iterate through faces
  for (var i = 0; i < 3; i++) {
    vertexIndex = face[ faceIndices[ i ] ]; // obtain the index of the face's vertex
    point = geom.vertices[vertexIndex]; // locate the vertex within the vertices array
    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);

View jsfiddle example

Answer 2

When utilizing geometry.colors[] in conjunction with vertexColors: THREE.VertexColors, it functions seamlessly when the geometry is used for THREE.Points().

https://i.sstatic.net/7qznb.png

If you wish to implement vertex colors for faces' vertices of THREE.Mesh(), it's recommended to refer to this specific example:

var geom = new THREE.BoxGeometry(1, 1, 1);
var faceIndices = ['a', 'b', 'c'];
var vertexIndex, point;
geom.faces.forEach(function(face) { // iterate through faces
  for (var i = 0; i < 3; i++) {
    vertexIndex = face[ faceIndices[ i ] ]; // obtain the index of the face's vertex
    point = geom.vertices[vertexIndex]; // locate the vertex within the vertices array
    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);

View jsfiddle example

Cube of RGB vertices created using Three.js

Answer №1

Similar questions

Is it possible to create a dynamic input form that appears within a textarea using jquery?

Using Node-twitter within the Express framework

An array mapping itself leads to an unexpected and peculiar outcome

Creating a standalone executable for Node.js without including the entire Node.js framework

How come the checkboxes for trees are not being checked in the child component while using Ant Tree Design?

Maintain the link's functionality even after it's been clicked by utilizing the same

Develop an asynchronous function that can fetch a result at a later time within an Express route

Tips for saving a webcam captured image location into a MySQL database

Summing an Array in Javascript

Troubleshooting a cross-origin resource sharing problem in Express.js

JavaScript HTTP request causes website navbar animation to malfunction

jQuery alert: A TypeError was caught stating that the object being referred to does not have the 'dialog' method available

What is the best way to access a nested array within a React component?

An issue with three.js involving sprites, the material of sprites, and detecting mouse clicks

Should we pass <script> tags or unsanitized values to the Handlebars layout?

HTML5 Boilerplate and optimizing the critical rendering path by deferring scripts and styles

Tips for retrieving all JavaScript source links from a website URL during page download

Dramatist: What are effective methods for distinguishing and monitoring frames within a webpage?

Is it more beneficial to reference JavaScript libraries in individual user controls or in the master page when constructing a website?

Unable to add an item from an array to the data property in Vue.js