Using Three.js to give distinct colors to individual vertices within a geometric shape

Question

Using Three.js to give distinct colors to individual vertices within a geometric shape

I am looking to implement picking functionality using IdMapping in Three.js

Due to concerns about performance, I have a single large geometry that is calculated as follows:

for (var i = 0; i < numberOfVertices; i += 9) {
  p1  = new THREE.Vector3(graphData.triangles.vertices[i+0], graphData.triangles.vertices[i+1], graphData.triangles.vertices[i+2]);
  p2  = new THREE.Vector3(graphData.triangles.vertices[i+3], graphData.triangles.vertices[i+4], graphData.triangles.vertices[i+5]);
  p3  = new THREE.Vector3(graphData.triangles.vertices[i+6], graphData.triangles.vertices[i+7], graphData.triangles.vertices[i+8]);
  geometry.vertices.push(new THREE.Vertex( p1.clone() ));
  geometry.vertices.push(new THREE.Vertex( p2.clone() ));
  geometry.vertices.push(new THREE.Vertex( p3.clone() ));
  geometry.faces.push( new THREE.Face3( i/3, i/3+1, i/3+2 ) );

geometry.colors.push(new THREE.Color(0xFF0000));
  geometry.colors.push(new THREE.Color(0xFF0000));
  geometry.colors.push(new THREE.Color(0xFF0000)); 
}

geometry.computeFaceNormals();
var material = new THREE.MeshBasicMaterial({});

var triangles = new THREE.Mesh( geometry, material );
scene.add(triangles);

Is there a way for me to assign unique colors to each vertex within my geometry?

javascript webgl three.js picking

Answer 1

Answer №1

Make sure to use geometry.vertexColors instead of geometry.colors (assign a color to each vertex).

Also, remember to update the material:

material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors });

Answer 2

Make sure to use geometry.vertexColors instead of geometry.colors (assign a color to each vertex).

Also, remember to update the material:

material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors });

Answer 3

Answer №2

Currently, I am utilizing version 71 of the software. The solution provided by Lee may still be effective, but it appears overly intricate.

Below is a straightforward demonstration of creating a Mesh with individual color assignments for each vertex:

var geometry = new THREE.Geometry();

// Creating a basic shape - a triangle.
geometry.vertices.push(
    new THREE.Vector3(-10,  10, 0),
    new THREE.Vector3(-10, -10, 0),
    new THREE.Vector3( 10, -10, 0)
);

// Storing the face in a variable before adding it to the geometry.
var face = new THREE.Face3(0, 1, 2);

// Assigning colors to the vertices of the face.
face.vertexColors[0] = new THREE.Color(0xff0000); // red
face.vertexColors[1] = new THREE.Color(0x00ff00); // green
face.vertexColors[2] = new THREE.Color(0x0000ff); // blue

// Adding the face to the geometry.
geometry.faces.push(face);

// Using a specific material is crucial.
var material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors});

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

Hopefully, this explanation is less intimidating.

It's a drawback that colors are assigned to the face's vertices rather than directly to the geometry's vertices. This means repeating the color assignment process. Personally, I prefer having an interface built on top of Three.js to enable color assignments directly to geometry.

Answer 4

Currently, I am utilizing version 71 of the software. The solution provided by Lee may still be effective, but it appears overly intricate.

Below is a straightforward demonstration of creating a Mesh with individual color assignments for each vertex:

var geometry = new THREE.Geometry();

// Creating a basic shape - a triangle.
geometry.vertices.push(
    new THREE.Vector3(-10,  10, 0),
    new THREE.Vector3(-10, -10, 0),
    new THREE.Vector3( 10, -10, 0)
);

// Storing the face in a variable before adding it to the geometry.
var face = new THREE.Face3(0, 1, 2);

// Assigning colors to the vertices of the face.
face.vertexColors[0] = new THREE.Color(0xff0000); // red
face.vertexColors[1] = new THREE.Color(0x00ff00); // green
face.vertexColors[2] = new THREE.Color(0x0000ff); // blue

// Adding the face to the geometry.
geometry.faces.push(face);

// Using a specific material is crucial.
var material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors});

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

Hopefully, this explanation is less intimidating.

It's a drawback that colors are assigned to the face's vertices rather than directly to the geometry's vertices. This means repeating the color assignment process. Personally, I prefer having an interface built on top of Three.js to enable color assignments directly to geometry.

Answer 5

Answer №3

Utilize this snippet of code to generate a vivid RGB color cube in three.js version 49.

(Associated with How to alter face color in Three.js)

// Implementation of material for assigning colors to vertices
var vertexColorMaterial = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );

var color, point, face, numberOfSides, vertexIndex;

// Faces are labeled using characters
var faceIndices = [ 'a', 'b', 'c', 'd' ];

var size = 100;
var cubeGeometry = new THREE.CubeGeometry( size, size, size );

// Color allocation to vertices as intended
for ( var i = 0; i < cubeGeometry.vertices.length; i++ ) 
{
    point = cubeGeometry.vertices[ i ];
    color = new THREE.Color( 0xffffff );
    color.setRGB( 0.5 + point.x / size, 0.5 + point.y / size, 0.5 + point.z / size );
    cubeGeometry.colors[i] = color; // Utilizing this array for ease
}

// Transmission of colors to respective positions in each face's vertexColors array.
for ( var i = 0; i < cubeGeometry.faces.length; i++ ) 
{
    face = cubeGeometry.faces[ i ];
    numberOfSides = ( face instanceof THREE.Face3 ) ? 3 : 4;
    for( var j = 0; j < numberOfSides; j++ ) 
    {
        vertexIndex = face[ faceIndices[ j ] ];
        face.vertexColors[ j ] = cubeGeometry.colors[ vertexIndex ];
    }
}

cube = new THREE.Mesh( cubeGeometry, vertexColorMaterial );

Answer 6

Utilize this snippet of code to generate a vivid RGB color cube in three.js version 49.

(Associated with How to alter face color in Three.js)

// Implementation of material for assigning colors to vertices
var vertexColorMaterial = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );

var color, point, face, numberOfSides, vertexIndex;

// Faces are labeled using characters
var faceIndices = [ 'a', 'b', 'c', 'd' ];

var size = 100;
var cubeGeometry = new THREE.CubeGeometry( size, size, size );

// Color allocation to vertices as intended
for ( var i = 0; i < cubeGeometry.vertices.length; i++ ) 
{
    point = cubeGeometry.vertices[ i ];
    color = new THREE.Color( 0xffffff );
    color.setRGB( 0.5 + point.x / size, 0.5 + point.y / size, 0.5 + point.z / size );
    cubeGeometry.colors[i] = color; // Utilizing this array for ease
}

// Transmission of colors to respective positions in each face's vertexColors array.
for ( var i = 0; i < cubeGeometry.faces.length; i++ ) 
{
    face = cubeGeometry.faces[ i ];
    numberOfSides = ( face instanceof THREE.Face3 ) ? 3 : 4;
    for( var j = 0; j < numberOfSides; j++ ) 
    {
        vertexIndex = face[ faceIndices[ j ] ];
        face.vertexColors[ j ] = cubeGeometry.colors[ vertexIndex ];
    }
}

cube = new THREE.Mesh( cubeGeometry, vertexColorMaterial );

Using Three.js to give distinct colors to individual vertices within a geometric shape

Answer №1

Answer №2

Answer №3

Similar questions

Dynamically shift the table footer to the bottom of a scrolling div by utilizing jQuery

Is it possible to rewrite this function recursively for a more polished outcome?

show information retrieved from database according to the drop-down menu selection

Experiencing an infinite loop due to excessive re-renders in

Waiting for multiple asynchronous calls in Node.js is a common challenge that many developers

Just diving into JavaScript, what makes jQuery so powerful?

What is the best way to include the 'selected' attribute within the <li> element using jQuery or Javascript?

JavaScript date formatting without using jQuery

The resolution of deferred actions is not as successful as foreseen

Ways in which elements can be toggled through jquery or javascript?

Exploring the Various Textures within the CANVAS 2D Context

Transform a list of H1..6 into a hierarchical structure

Bing Translator and XMLHttpRequest are two powerful tools for translating and

Failed installation of Semantic-ui through npm encountered

When tapping on grid items in the Safari browser using React Material-UI, they mysteriously switch positions

Exploring the utilization of type (specifically typescript type) within the @ApiProperty type in Swagger

Revise the line graph

What is the method for identifying modules that rely on a specific module?

Is there a way to retrieve and store a JSON object from a URL using JavaScript and jQuery?

What is the process for sending a message from the internet to a mobile device?