Setting the color of all meshes in a group using color.setHex in Three.js

I am currently working on implementing a system for selecting objects in the scene by hovering or clicking on them. Within the scene, there are object groups that were created in the following way (please note that I am still learning three.js and this code may not be the most efficient):

var obj = new THREE.Object3D();
// Grouping all segments of the model into a single object
for (c = 0; c < seg.length; c++) {
    obj.add(seg[c]);
}
// Adding the object to the array and updating the screen
objects[objects.length] = obj;
scene.add(objects[objects.length-1]);

The issue arises when attempting to change the color of the meshes within the object groups once they are already in the scene. An error occurs stating that `color.setHex` is undefined. The part of the code used to set the color appears as follows:

for (j = 0; j < intersects[0].object.children.length; j++) {
    intersects[0].object.children[j].color.setHex(0x1A75FF);
}

Answer №1

Thanks to gaitat, I finally cracked the code:

It looks like you need intersects[0].object.children[j].material.color.setHex(0x1A75FF); without having access to the rest of the code.

My next challenge is figuring out how to get the raycaster to work with object groups so that they can be properly identified and placed in the intersects array.

Answer №2

// Initialize a new container object
let myGroup = new THREE.Group(); 

// Combine all segments of the model into a single object
let part1 = new THREE.Object3D();

// your code

myGroup.add(part1); 

let part2 = new THREE.Object3D();

  // your code

myGroup.add(part2);

let part3 = new THREE.Object3D();

// your code

myGroup.add(part3); 

// Add to the scene
scene.add( myGroup ); 

// Change the color of elements in myGroup
for ( let index = 0; index < myGroup.children.length; index++ ) {
   myGroup.children[index].material.color.setHex(0xffffff);
}

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 convert a JSON object into a string containing a negative zero in JavaScript?

Is there a way to properly convert a negative zero into a string using JSON.stringify? I've noticed that JSON.stringify often converts negative zero into a positive one, which is not the desired outcome. Any suggestions for an alternative approach? v ...

Mastering the art of asynchronous programming with $.getJSON

This is how I am approaching the situation: $.getJSON(url1, function(response1){ if(response1.status == 'success'){ $.getJSON(url2, function(response2){ if(response2.status == 'success') { $.getJSON(url3, functi ...

Utilizing JavaScript and Webix to refer to objects in array format

This question revolves around Javascript and JSON, although I'm also open to any solutions using Webix. Context Currently, I am utilizing the Webix Javascript UI framework to populate a Datatable with JSON data structured like this: complexData = { ...

Encountering issues with displaying the French character 'à' on JSON format

My JSON String 'd'instruments cordes à' contains a French character (à) that is causing a JSON error when displayed. I need to show the correct character in my UI. ...

Take the input from the textbox only if the initial character is an alphanumeric

When inputting text into a textbox on my HTML page, I want to only accept alphanumeric characters and ignore integers or special characters if they are the first letter. <input type="text" onKeyUp="filterAlphanumeric(this);"/> function filterAlphan ...

Displaying Google Picker results in an error due to an invalid origin value

After utilizing the same code for a period of 2 years, we are encountering an issue where the picker no longer displays. I have consulted resources on Google Picker API Invalid origin but haven't been able to successfully set the origin value. The cod ...

Achieving functionality with Twitter Bootstrap's "Tabs" Javascript in a Ruby on Rails application

Encountering a JavaScript issue within a Rails application. Although Twitter's documentation is very clear, I'm still struggling to make dynamic tabs work (tab switching and dropdown). I even went ahead and copied their source code, downloaded t ...

Ensure to use e.preventDefault() method when handling form submissions

Check out this code snippet: <form> <input type="text" name="keyword" value="keyword"> <input type="submit" value="Search"> </form> I'm seeking assistance with implementing jQuery to prevent the default action of the submit b ...

Perform an AJAX call from the main file after inserting data using AJAX beforehand

I am in need of assistance with a question I have. On a page, an AJAX function is executed after the page finishes loading, creating a table in PHP that contains two buttons: one for changing passwords and the other for deleting. This table is then injecte ...

Extract the selected date from the datepicker and showcase it within a designated div element

I need to retrieve the selected date from a jQuery UI datepicker and show it in two places on the page. Currently, the selected date is displayed in the input field of the datepicker, but I also want to display it within a div tag elsewhere on the page. ...

The AJAX success callback function failed to execute in cases where the dataType was set to JSONP during Cross domain Access

type = 'math'; var ajurl = "sample.com&callback=myhandler"; var datas = "cateid=" + cateid + "&type=" + type + "&pno=" + pno + "&whos=" + whos; $.ajax({ type: "GET", url: ajurl, data: datas, contentType: "application/json; ...

Techniques for implementing a JS script within a useEffect hook in a functional component

I am currently working on a useEffect hook in my project, within which there is an if-else block that includes a Javascript function called 'B1.X.Change' inside the else statement. However, I am facing difficulty binding 'B1.X.Change' t ...

The program continues running even after the asynchronous function is executed

I am new to using postgresql. After successfully connecting to a cloud database and retrieving data using the 'postgres' package in nodejs, I noticed that the program doesn't terminate even after logging all the retrieved data on the consol ...

The issue with fetching user profile data on the client-side in Next.js 14

I've run into a problem with client-side data fetching on my Next.js 14 project. More specifically, I'm trying to retrieve user profile information from a backend API using Axios within a component, but for some reason, the data isn't coming ...

Setting environmental variables throughout your application using create-react-app on the front end

Hey there! I have a simple Todo app with the client using create-react-app and the server running on node. I'm struggling to properly set environment variables across my app. I've placed my .env file in the root directory of the app, which curre ...

Add the element of surprise. The element must be either a Model, an Association, or an object

Struggling with configuring PostgreSQL with Node.js, I followed this tutorial and encountered an error without any specific details: Here is the stacktrace Unhandled rejection Error: Include unexpected. Element has to be either a Model, an Association or ...

What is the method for defining the current date variable within a .json object?

When using a post .json method to send an object, I encounter the following situation: { "targetSigningDate": "2021-09-22T21:00:00.000Z" } The "targetSigningDate" always needs to be 'sysdate'. Rather than manually c ...

Enhance visual content using JavaScript to filter images in React

I am currently developing a React app with multiple pages that are being imported into another component page. The structure of one of my pages looks like this: export default class Product1 extends React.Component { render() { return ( <di ...

What is the best way to develop a JavaScript function that divides the total width by the number of table headers (`th`)?

I recently came across this amazing scrollable table on a website, but I'm facing an issue with resizing the headers equally. Due to my lack of knowledge in JavaScript, I'm uncertain about how to tackle this problem. My intuition tells me that a ...

Issues with Ajax arise once URL re-routing is activated

When loading content using AJAX and ASP.NET web-methods, the following code is used to trigger the Ajax request: var pageIndex = 1; var pageCount; $(window).scroll(function () { if ($(window).scrollTop() == $(document).height() - $(window).height()) ...