Adjust the CSS2D objects' visibility based on their parent THREE.js Group's visibility toggling

Question

Adjust the CSS2D objects' visibility based on their parent THREE.js Group's visibility toggling

In my project using THREE.js, I have successfully added meshes and CSS2DObjects (labels) to a group. When I toggle the visibility of the group, the meshes change visibility as expected. However, the CSS2DObjects' visibility does not change accordingly.

I came across a discussion thread from 2019 that provided a solution to toggle the visibility of CSS2DObject by setting its style.display property to 'none' or 'block'.

labelDiv1.style.display = 'none';
    labelDiv2.style.display = 'block;

Now, I am looking for a way to retrieve a list of all CSS2DObjects within a group, whether they were directly added to the group or have hierarchical relations with meshes in the group. For each selected CSS2DObject, I need to access its associated div element.

While I could potentially create a solution for my current project, I am interested in finding a more flexible and future-proof solution to avoid reinventing the wheel. It would be ideal if such a feature was integrated into THREE.js in my opinion.

javascript html css three.js

Answer 1

Answer №1

If you're in search of a function that will scan through all the descendants of an object, including its children and grandchildren, you'll want to use Object3D.traverse().

For more information about how to use Object3D.traverse(), check out this link:

When inside the traverse callback, you can examine the object's .type to determine if it's a CSS2DObject.

Answer 2

If you're in search of a function that will scan through all the descendants of an object, including its children and grandchildren, you'll want to use Object3D.traverse().

For more information about how to use Object3D.traverse(), check out this link:

When inside the traverse callback, you can examine the object's .type to determine if it's a CSS2DObject.

Adjust the CSS2D objects' visibility based on their parent THREE.js Group's visibility toggling

Answer №1

Similar questions

What is the best way to conceal selected options in a MUI multiselect in the select field?

Updating the state within a component while specifically modifying the second item within a list

Tips for implementing xpath in module.exports with mocha javascript

Elements displaying outside of block 'a' tag

I am encountering an issue where the msal-browser login process seems to be frozen at the callback

Using CSS to resize an element with both dimensions while maintaining its

Using ajax.actionlink to display the desired text

Difficulty encountered when trying to template routes with more than one slash in Angular-route

easy method for creating a hyperlink that triggers a "download" pop-up box

Pausing until the user clicks the button again

Uploading files into an array using Angular 2

Display a table using Angular's md-card and md-color

Encountering an error due to the script being placed at the top of the page resulting in an undefined

Issue with event listener not functioning properly with dynamically created content using AJAX (only using vanilla JavaScript

Activate the toggle menu

Having difficulty creating a file labeled as "undefined" within the grunt plugin

Explore the world of threejs with a sphere adorned with cube bumps

Is there a more effective method for detecting changes in a class variable in JavaScript, aside from using setInterval()?

Ways to implement a parallax effect by changing images within a specific div on scrolling with the mouse

Guide on setting up and customizing run.json within the latest JetBrains Fleet for Next.js