Coloring vertices in a Three.js geometry: A guide to assigning vibrant hues

Question

Coloring vertices in a Three.js geometry: A guide to assigning vibrant hues

This inquiry was previously addressed in this thread: Threejs: assign different colors to each vertex in a geometry. However, since that discussion is dated, the solutions provided may not be applicable to current versions of three.js. The latest versions no longer support the attribute vertexColors for the Geometry class.

I am aware that it's feasible to designate the color of each face of a geometry. In my case, I am assigning the vertices of a sphere varying distances and aim to adjust the color of each vertex based on its distance from the center simultaneously.

javascript 3d three.js

Answer 1

Answer №1

It seems like this solution might help with what you're looking for (even though I'm not too familiar with Three.js):

The important thing, as mentioned by user morris4, is to set the colors on the face rather than the geometry itself.

Make sure to also specify the 'vertexColors' property in the material so that it displays correctly.

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

geometry = new THREE.CubeGeometry( 10, 10, 10 );

for ( var faceIndex in geometry.faces )
{
    var face = geometry.faces[ faceIndex ];
    face.vertexColors[ 0 ] = new THREE.Color(0xFF0000);
    face.vertexColors[ 1 ] = new THREE.Color(0x00FF00);
    face.vertexColors[ 2 ] = new THREE.Color(0x0000FF);
    face.vertexColors[ 3 ] = new THREE.Color(0xFFFFFF);
}

var material = new THREE.MeshBasicMaterial({ color: 0xFFFFFF, vertexColors: THREE.VertexColors });

var object = new THREE.Mesh( geometry, material );

object.position.z = -25;

scene.add(object);

function render() {
    requestAnimationFrame(render);
    object.rotation.x += 0.01;
    object.rotation.y += 0.01;
    renderer.render(scene, camera);    
}
render();

I've uploaded this code snippet to a fiddle at: http://jsfiddle.net/87mcD/3/

Keep in mind that this was tested on r54 and may not work exactly the same on newer versions like r63.

However, it could still be useful for your project...

EDIT: Here's an updated fiddle for three.js r.63: http://jsfiddle.net/87mcD/4/

Answer 2

It seems like this solution might help with what you're looking for (even though I'm not too familiar with Three.js):

The important thing, as mentioned by user morris4, is to set the colors on the face rather than the geometry itself.

Make sure to also specify the 'vertexColors' property in the material so that it displays correctly.

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

geometry = new THREE.CubeGeometry( 10, 10, 10 );

for ( var faceIndex in geometry.faces )
{
    var face = geometry.faces[ faceIndex ];
    face.vertexColors[ 0 ] = new THREE.Color(0xFF0000);
    face.vertexColors[ 1 ] = new THREE.Color(0x00FF00);
    face.vertexColors[ 2 ] = new THREE.Color(0x0000FF);
    face.vertexColors[ 3 ] = new THREE.Color(0xFFFFFF);
}

var material = new THREE.MeshBasicMaterial({ color: 0xFFFFFF, vertexColors: THREE.VertexColors });

var object = new THREE.Mesh( geometry, material );

object.position.z = -25;

scene.add(object);

function render() {
    requestAnimationFrame(render);
    object.rotation.x += 0.01;
    object.rotation.y += 0.01;
    renderer.render(scene, camera);    
}
render();

I've uploaded this code snippet to a fiddle at: http://jsfiddle.net/87mcD/3/

Keep in mind that this was tested on r54 and may not work exactly the same on newer versions like r63.

However, it could still be useful for your project...

EDIT: Here's an updated fiddle for three.js r.63: http://jsfiddle.net/87mcD/4/

Answer 3

Answer №2

Upon conducting a quick grep search (attempt grep "vertexColors" */*.js . in the src directory of three.js), it seems that in recent versions of three.js, you can only set the color per face, rather than per vertex. Each triangle face may have a vertexColors property containing 3 colors aligned to the vertices of the face.

To assign colors to each vertex, you will need to determine which faces use that particular vertex and then set the colors on the faces' vertexColors property.

Update: Depending on your specific needs, you could iterate over the faces, retrieve the 3 vertices using the face's indices (a, b, c), and calculate and assign the color to them. This method may compute the same color multiple times (potentially around 8 times per vertex in your case), but it provides a simple and efficient way to achieve your objective.

function color(v) {
    var c = new THREE.Color();
    c.r = (10 + v.y)/20;
    c.g = (10 + v.y)/10 + Math.sin(v.x/10 * Math.PI) - 0.3;
    c.b = 1 - (10 + v.y)/20;
    return c;
}

for(var i = 0; i < geometry.faces.length; ++i) {
    var face = geometry.faces[i];
    face.vertexColors[0] = color(geometry.vertices[face.a]);
    face.vertexColors[1] = color(geometry.vertices[face.b]);
    face.vertexColors[2] = color(geometry.vertices[face.c]);
}

Fiddle: http://jsfiddle.net/87mcD/5/

Answer 4

Upon conducting a quick grep search (attempt grep "vertexColors" */*.js . in the src directory of three.js), it seems that in recent versions of three.js, you can only set the color per face, rather than per vertex. Each triangle face may have a vertexColors property containing 3 colors aligned to the vertices of the face.

To assign colors to each vertex, you will need to determine which faces use that particular vertex and then set the colors on the faces' vertexColors property.

Update: Depending on your specific needs, you could iterate over the faces, retrieve the 3 vertices using the face's indices (a, b, c), and calculate and assign the color to them. This method may compute the same color multiple times (potentially around 8 times per vertex in your case), but it provides a simple and efficient way to achieve your objective.

function color(v) {
    var c = new THREE.Color();
    c.r = (10 + v.y)/20;
    c.g = (10 + v.y)/10 + Math.sin(v.x/10 * Math.PI) - 0.3;
    c.b = 1 - (10 + v.y)/20;
    return c;
}

for(var i = 0; i < geometry.faces.length; ++i) {
    var face = geometry.faces[i];
    face.vertexColors[0] = color(geometry.vertices[face.a]);
    face.vertexColors[1] = color(geometry.vertices[face.b]);
    face.vertexColors[2] = color(geometry.vertices[face.c]);
}

Fiddle: http://jsfiddle.net/87mcD/5/

Coloring vertices in a Three.js geometry: A guide to assigning vibrant hues

Answer №1

Answer №2

Similar questions

Looking for a jQuery Gantt Chart that includes a Treeview, Zoom functionality, and editing capabilities?

What does the reportProgress function do in HTTP services with JavaScript?

Has Apache initiated a forced logout process?

Cross-Domain Image Uploading

Show only specific items in an AngularJS application

Implement a jQuery DataTable using JSON data retrieved from a Python script

In MUI v5 React, the scroll bar vanishes from view when the drawer is open

Gather numerical values and transform them into dates using AngularJS

Utilizing slid.bs.carousel to retrieve values upon slide change

Highlight particular terms (key phrases) within text contained in a <td> tag

Enhancing a React Native application with Context Provider

How can I fetch a value from a database and set it as the selected option in a

JavaScript does not display checkbox values

Removing White Spaces in a String Using JavaScript Manually

Ending an $.ajax request when the page is exited

How can I show a title when redirecting a URL in VUE JS?

What does the underscore before a function in JavaScript or PHP signify?

Having trouble with res.redirect not working after the page has been rendered with data?

Troubleshooting: Next.js - Issues with encodeURIComponent function when using `/` in getStaticPaths

updating the row of an html table with elements from a javascript object