Acquiring the parent object (a group) from the children in Three.js

In the scenario I have created, there are multiple groups of objects (Object3Ds) and I have established a mechanism for clicking or hovering over them to trigger specific actions. However, when using the raycaster to identify the objects under the cursor, it identifies the individual object rather than the group itself, which is what I require.

The snippet of code used to obtain the objects beneath the cursor appears as follows:

raycaster.setFromCamera(mouse, camera);
clickobjstore = raycaster.intersectObjects(objects, true);

// The problem lies in the fact that intersects[0] points to an individual object within the group, not the group itself!
for (j = 0; j < intersects[0].object.children.length; j++) {
    intersects[0].object.children[j].material.color.setHex(0x1A75FF);
}

Answer №1

When working with the Object3D class, you can conveniently access the reference to the parent Object using the following code snippet:

var group = intersects[0].parent;

for (k = 0; k < group.children.length; k++) {
    group.children[k].material.color.setHex(0x1A75FF);
}

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

There was a lack of dynamic content on the webpage when using the view/template engine (Handlebars)

I'm currently using the Handlebars template engine in my project. Despite not encountering any errors in the console, I'm facing an issue with displaying dynamic content in the index.hbs file that is rendered from app.js. app.js const express = ...

Ionic ion-view missing title issue

I'm having trouble getting the Ionic title to display on my page: http://codepen.io/hawkphil/pen/oXqgrZ?editors=101 While my code isn't an exact match with the Ionic example, I don't want to complicate things by adding multiple layers of st ...

Using Javascript and jQuery to modify the element's ID

I've been trying to automate the loading process of articles on my website, but I'm having trouble with the line $(tytul).html(data);. Is there a way to get this working correctly? var numboart = 3; $(document).ready(function(){ for(i=0;i& ...

Utilize JSON data to dynamically populate TextFields or Select menus depending on a specific key in the JSON object

As I retrieve multiple JSON groups from an API, each group contains one or more questions objects. The task at hand is to attach each question along with its corresponding response to a textField. Based on the value of QuestionType, it will be decided whet ...

Switch the monitored variable's value in VueJS

` ` I have a data variable that is of boolean type, and I have included this in a watch hook. When the value changes to true, I execute certain tasks within the watch function and everything works perfectly.` `watch: {` ` boolVar: func ...

What is the best way to position an image in the center of the screen with uniform margins around it?

Could someone please help me figure this out? I've been attempting for some time but can't seem to make it work with the bottom margin. This website in the fashion industry showcases what I'm trying to achieve: It's designed to be resp ...

Mongoose: Enhancing Arrays with maximum values for each item

How to Update an Array Property in Mongoose with Item-Wise Max and Default Null Upon Instantiation I have a MongoDB collection that stores time series data in a fixed-length array (1 item per minute, 1 document per day). { 'series': '#1& ...

Error encountered: The call stack size has been exceeded due to the combination of Node JS, MongoDB, and Mongoose

I am facing a RangeError issue while attempting to create a new object using a predefined schema and inserting it into my mongodb database. I need assistance in debugging this error and finding a solution for it. Any help would be appreciated, thanks. App ...

Transmit a file using multipart with XMLHttpRequest

Is it possible to use XMLHttpRequest to send a multipart file to a servlet? I am currently working on a form that needs to be submitted as multipart, but I am not receiving a response after successfully uploading it. It is important that the process happe ...

Gain access to PowerBI reports effortlessly without the need to input any credentials

Seeking guidance on calling Power BI reports from an ASP.NET C# web application while passing credentials, specifically without utilizing Azure AD. Access has been granted to certain users in the Power BI Service workspace with view permissions. We aim t ...

Guide on how to streamline JSON output from aggregation result

I have written a NodeJs api using mongo db aggregation to obtain some output. However, the result I received is not what I expected. Can anyone help me figure out how to get the desired output? app.get('/polute', function (req, res) { Light. ...

Guide to building a seamless page without refreshes with the help of jquery, express, and handlebars

I need assistance with my express JS project. I am trying to set up two pages using NodeJS, incorporating handlebars as the template engine. My objective is to have the first page rendered using res.render('home'), and for the second page to be l ...

I am attempting to send an array as parameters in an httpservice request, but the parameters are being evaluated as an empty array

Trying to upload multiple images involves converting the image into a base64 encoded string and storing its metadata with an array. The reference to the image path is stored in the database, so the functionality is written in the backend for insertion. Ho ...

In ES6 React, if you want to add arguments to event handlers when functions are bound in the constructor, follow these

When working with constructors in es6, it is recommended to bind functions early like so: class App extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); // binding done in the constructor ...

What is the best way to style an icon in CSS?

I am facing an issue with the following code snippet: <span class="stars">★★☆☆☆ </span> My objective is to style the empty stars differently, but I am unsure how to specifically target them. The following CSS rule does not produc ...

Disabling related videos in React Native: A guide to preventing suggested content from appearing at the end of YouTube videos

Is there a way to turn off the display of related videos after a YouTube video ends in react native? I've tried the following code, but it doesn't seem to be working: state = { isPlaying: true, related :false, }; <YouTube apiKe ...

Is it possible for XSS attacks to exploit the HREF attribute when used with jQuery?

Burp suite displaying an error message. The application seems to have a potential vulnerability related to DOM-based cross-site scripting. Data is retrieved from the location and passed to jQuery() using the following statement: jQuery(location). ...

Unable to utilize the 'require' function in subdirectories within the node_modules directory

In the development of my express api, I have set up routes as a dependency within the main project. The main project contains a config folder with an index.js file that exports an object serving as the route configuration. While I can access this exported ...

JavaScript does not allow executing methods on imported arrays and maps

In my coding project, I created a map named queue in FILE 1. This map was fully built up with values and keys within FILE 1, and then exported to FILE 2 using module.exports.queue = (queue). Here is the code from FILE 1: let queue = new.Map() let key = &q ...

Create a list using ReactJS

I've been working on rendering a dynamic list in JSX, but I'm facing issues displaying the items. Below is my code snippet where I attempted to use useState const [orderList, setOrderList] = useState([]) and setOrderList(prev => [...prev, chil ...