Setting the hex color of a material in Three.js using material.color.setHex with a Mesh

Question

Setting the hex color of a material in Three.js using material.color.setHex with a Mesh

My code is configured to change the colors of certain objects based on different conditions. Currently, it utilizes loops like

for (j = 0; j < objects[i].children.length; j++) {
    objects[i].children[j].material.color.setHex(0x1A75FF);
}

to update the color when necessary from the render() function.

The issue arises when dealing with MeshLambertMaterial and MeshFaceMaterial objects. The provided code works flawlessly for MeshLambertMaterial, but throws an error

Cannot read property 'setHex' of undefined

when trying to execute it on a MeshFaceMaterial object.

I have been unable to find a solution to this problem so far. If there is a fix that involves converting all scene objects to MeshFaceMaterial allowing the color setting process to be unified in one function, I am willing to make that adjustment.

(What I absolutely do not want is to handle separate sets of code within the loop based on whether the object has LambertMaterial or FaceMaterial!)

javascript three.js html5-canvas

Answer 1

Answer №1

let items = data[i].elements[j].item.items;
if ( items ) {
    for ( let x=0,y=items.length; x < y; x++ ) {
        items[x].color.setHex( 0xFF4500 );
    }
} else {
    data[i].elements[j].item.color.setHex( 0xFF4500 );
}

Answer 2

let items = data[i].elements[j].item.items;
if ( items ) {
    for ( let x=0,y=items.length; x < y; x++ ) {
        items[x].color.setHex( 0xFF4500 );
    }
} else {
    data[i].elements[j].item.color.setHex( 0xFF4500 );
}

Setting the hex color of a material in Three.js using material.color.setHex with a Mesh

Answer №1

Similar questions

What is the best way to modify a large portion of JSON data in a nodejs environment?

Implementing a JavaScript function that uses the AJAX method to confirm and update

Unable to set two image layers on HTML canvas to display in different colors as anticipated

Checking with `validate.js` IF statement

Terminate the rethinkdb data stream

Effortless JavaScript function for retrieving the chosen value from a dropdown menu/select element

Issue with Vue not displaying HTML content retrieved from an API

Is there a way to bring in an NPM module without utilizing the keywords 'require' or 'import'?

Capture a fragment of a scene and convert it into a unique texture using THREE.JS

Tips for restricting the width of Arabic paragraphs in text

URL not functioning properly on Django CMS menu

Remove the carriage return and newline characters from a Python variable

Troubleshooting the issue of AngularJs location.path not successfully transferring parameters

Discovering routes in Angular2

What is the best way to invoke a function and dynamically load a section of a view using AJAX?

Accessing a specific value based on a selected option in Angular 2+

Leaving the pipeline of route-specific middleware in Express/Node.js

An alert box displays N times when the submit button is clicked N times

When using Node.js, you may encounter the error message: "TypeError: brevo.ApiClient is not a constructor

Having trouble transferring data between Vue.JS components