Unable to adjust the color of the material in three.js

I am facing a challenge with my obj file that includes vertex groups within the main object. My goal is to assign colors to each of the tagged groups using vertex groups. In three.js, I discovered that each vertex group is represented as an Object3D. There isn't a direct function like 

setColor</code; instead, each child has two children of type <code>THREE.Mesh
, which have a setColor function accessed through a material property. This hierarchy seems unclear to me. How can I set color for each vertex group?

In previous versions of three.js, there was a different structure in terms of object-child relationships. Can someone please provide guidance on this matter? Any input would be greatly appreciated as I search for a solution.

javascriptthree.jsrenderingwebgl

Answer №1

If you're looking to set colors for vertexes in your project, there are numerous similar questions on stackoverflow that may prove helpful. You can explore them here and here.

To achieve color assignments for vertexes, one approach is to navigate through the object tree until you reach the faces of the mesh geometry. It is at this point where you can define a vertexColors array:

var numberOfSides, j, vertexIndex;

for ( var i = 0; i < geometry.faces.length; i++ ) 
{
    face = geometry.faces[ i ];   
    face.color = baseColor;      
    numberOfSides = ( face instanceof THREE.Face3 ) ? 3 : 4;
    for( j = 0; j < numberOfSides; j++ ) 
    {
        vertexIndex = face[ faceIndices[ j ] ];
        face.vertexColors[ j ] = geometry.colors[ vertexIndex ];
    }
}

If you require further information, be sure to refer back to the provided links for additional insights.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to completely clear $rootScope when a user signs out of my application?

In my development work, I frequently find myself using $rootScope and $scope within controllers and services. Despite searching through numerous Stack Overflow answers for a solution to clear all $scope and $rootScope values, such as setting $rootScope t ...

javascriptangularjsnode.jsangularjs-directive

Encountered a syntax issue when attempting to modify state in React.js

I encountered a syntax error when trying to update the state in React.js with the following code. import { FETCH_POSTS } from '../actions/index'; const INITIAL_STATE = { all:[], post: null }; export default (state = INITIAL_STATE, action) => ...

javascriptreactjs

Is your CPU overheating due to IE7, encountering script issues, and need help with debugging

My current web design project is running smoothly on all Mac browsers and Windows Firefox, Chrome, and IE 8. However, I'm facing significant issues with IE 7. Despite having the CSS almost in place with a few adjustments needed, the CPU usage spikes t ...

javascriptjqueryinternet-explorercpu-usage

Stop users from being able to input line breaks by pasting

I am currently facing a challenge with my code. Within the code, I have included a textarea where users can input the title of an article, and I want this title to be restricted to only one line. To achieve this, I created a script that prevents users from ...

javascriptjquery

Adjusting the front size while utilizing the SideNav feature in Materialize

While creating a website using Symfony and Materialize, my client requested to have the menu displayed on the side. I followed the guidelines from and successfully implemented the side menu on the left. However, I am encountering two issues: The first ...

javascriptcssmaterialize

I'm wondering if you have any insights on how to retrieve objects using Mono WebAssembly

I am looking to send a c# object back via mono-wasm, but when I attempt to do so, the returned object appears in my JavaScript file here. The C# code can be found in [image2]: C# code My JavaScript code can be found here: JS code Everything seems to wor ...

javascriptc#monowebassembly

Error in JavaScript Slideshow

I am attempting to create a slider that changes with a button click. Below is my JavaScript code: var img1=document.getElementById("p1"); var img2=document.getElementById("p2"); var img3=document.getElementById("p3"); function slide(){ ...

javascripthtmlcssuser-interfaceslider

jQuery link disabling malfunctioning

I attempted to disable a hyperlink by checking a certain condition using an if statement in jQuery. After researching other solutions, I implemented the following code: if (discussionPointsSize == 0) { $('#discussionPointsLink').preventDefault ...

javascriptjqueryhtml

Unable to retrieve the JSON response sent by the REST API within an HTML page

My ajax function is unable to properly receive the JSON content generated by a REST API. The REST API successfully creates the JSON data, but when passed to my ajax function, it does not work as expected. function loadJsonData(){ var dropDownValue = ...

javascriptjavajqueryajaxrest

Arrange the objects in the array in React based on their time and date of creation

As a newcomer to the world of React.js and Redux, I am faced with an array of objects structured like this: quizList = [ { createdDate : 1543314832505, id:5bfd1d90d4ed830001f589fc, name:'abc'}, { createdDate : 1543314152180, id:5bfd1ae8d4ed83000 ...

javascriptreactjsreduxreact-redux

Store the values of checkboxes in session storage

I am attempting to save the values of the same array from the setRooms React hook into sessionStorage. However, I keep receiving a TypeError: prev is not iterable for the sessionStorage. {bedRooms.map((room, index) => ( <FormControlLabel ...

javascriptreactjsmaterial-uisession-storage

What steps should I follow to obtain the return value after invoking these functions?

I have a task that requires creating a nodejs script for two specific functions: Retrieve my public IP address. Update my public IP address on my freenom.com account for a registered domain. Currently, I have two separate scripts in place to accompl ...

javascriptnode.jsrequestip

Map failing to refresh

Having some trouble with the map function as it's not updating my select box with the new selected value. The issue occurs within a material UI dialog that appears when viewing a file. I notice that the values get updated only after closing and reopen ...

javascriptreactjsmaterial-uireact-functional-component

Can I inform the interpreter that my function in TypeScript specifically handles undefined and null values?

Consider a scenario where there is a method isEmpty that verifies if a value is empty, null, or undefined, and returns true accordingly. In TypeScript, this method may not effectively communicate to the interpreter, leading to a red underline in IDEs like ...

javascripttypescriptwebstorm

Why isn't my textarea in jQUERY updating as I type?

On my website, I have a comment script that is not functioning correctly in some parts of the jQuery/JavaScript code. Instead of posting an edited comment to PHP, I created a notification window to test if the value passed through is actually changing. W ...

javascriptphpjqueryhtml

Should I use a single directive with ng-if statements in AngularJS, or opt for two separate directives?

Question about optimizing performance in Angular JS. I am using ng-repeat to display a list of search results. Each search item is extracted using a directive/template. Should I wrap two directives with ng-if statements or use one directive with multiple ...

javascriptangularjsangularjs-directiveangularjs-ng-repeatangular-ng-if

Guide to setting up a trigger/alert to activate every 5 minutes using Angular

limitExceed(params: any) { params.forEach((data: any) => { if (data.humidity === 100) { this.createNotification('warning', data.sensor, false); } else if (data.humidity >= 67 && data.humidity <= 99.99) { ...

javascriptangulartypescript

Tips for Sending a Message Using TypeScript Websockets

I'm currently working on an Angular application that requires subscribing to a websocket to receive incoming data. Within the Angular service, I have the following code snippet: setContextChannel(channel) { this.contextWS = new WebSocket(channel ...

javascriptnode.jsangularwebsocket

Is there a way to determine the monitor's frame rate using JavaScript?

Could JavaScript be used to determine the refresh rate of a monitor, typically set at 60Hz for most LCD monitors? Is there a method available to execute a function after a specific number of frames have passed? There has been some curiosity about my reaso ...

javascript

Slicing a URL using JavaScript or jQuery

Hey everyone, I have a question: Can I remove the initial section of a URL? var mydir = $("script[src$='jquery_main.js']").attr('src').slice(0, -14); http://127.0.0.1:9081/Mgr/resources/ui/skins/default/js/main/ I want to get rid of ...

javascriptjqueryparsing