Interaction with three.js objects by clicking

I am looking for a way to show or hide objects by simply clicking a button. For example, when the button is clicked on the GUI, obj1 should be hidden and obj2 revealed. I tried using

 object.traverse(object.visible=false);

but it doesn't seem to be working as expected.

This is how I currently render my objects:

var gal = jsonLoader.load( "model/galmodel.js", addModelToScene ) ;
gal.traverse(gal.visible = false);

Can anyone provide guidance on how to achieve this functionality? What command should I use to hide or reveal the objects upon click?

Thank you in advance.

javascriptthree.js

Answer №1

From what I remember, the traverse function acted as a callback method. To make it work, you would have to write code similar to this:

gal.traverse(function(child){
   child.visible = false;
});

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

In what ways can we utilize a consistent state across various tabs or pages?

One feature of my application is a dynamic chart with various settings such as filters and time ranges. I want to save these settings in the app's state so they can be shared with other components on different pages. However, when switching tabs and r ...

javascriptjqueryreactjs

Issue with Tweening in Three.js: Initial value does not change

Having trouble with tweening my camera position. I've set up a Codepen with minimal code to showcase the issue, complete with annotations and plenty of console.log() statements for debugging purposes. Check out the Codepen The starting point of my c ...

javascriptthree.jsgsaptween

Internet Explorer automatically moves the cursor to the beginning of a textarea when it gains

When trying to insert "- " into an empty textarea, I am facing issues with Internet Explorer. While Firefox and Chrome work perfectly fine by inserting the text as expected, IE causes it to jump to the beginning of the textarea after insertion. Therefore, ...

javascriptjqueryhtmlinternet-explorertextarea

Switching up icons using React Spring - a step-by-step guide!

Is it possible to change the icon when I click on it using react spring? For example, if I click on " ...

javascriptcssreactjsreact-spring

Selenium: The ultimate guide to inserting text within a div element located inside an iframe

Snippet of HTML code: <div class="listRte__editorFrame"> <iframe src="about:blank" style="height: 150px;"> #document <html> <head> <body> ...

javascriptjavaselenium

res.render() Displaying Data in Frontend using Local Variables

I have a question regarding defining local variables in Express. When I use res.render(view, {variable: variable}), how can these variables be accessed on the frontend? Where are they stored? I attempted to access a variable with console.log(variable), but ...

javascriptnode.jsdomexpress

Loading HTML file using XMLHttpRequest

I am currently developing a website using HTML, CSS, and JavaScript. The project follows the usual structure with multiple HTML files (such as Index.html, Footer.html, Whatsapp.html), styles.css, and app.js. Within my Index.html file, I include the styles ...

javascripthtmljquerycss

JavaScript/CSS manipulation: The power of overriding animation-fill-mode

When animating text using CSS keyframes, I use animation-fill-mode: forwards to maintain the final look of the animation. For example: #my-text { opacity: 0; } .show-me { animation-name: show-me; animation-duration: 2s; animation-fill-mod ...

javascriptjquerycss

What is the best way to ensure that my transitionend event is triggered?

I'm currently exploring the <progress> element and attempting to incorporate a CSS transition to achieve a smooth progress bar effect as its value increases. Despite my efforts, I can't seem to trigger JS after the transitionend event occur ...

javascripthtmljquerycsscss-transitions

What is the best way to send a string without using quotation marks as a parameter in a function?

If I have an API that takes the query as http://localhost:8000/api/v1/rental/?place__startswith=kathmandu, how can I implement a generic search in ReactJS? What I attempted to do is pass the default parameter as search(query=kathmandu) so that the result ...

javascriptajaxreactjstastypie

Reading a Json file with keys in puppeteer BDD: A Guide

Greetings, I am new to the world of puppeteer. I have successfully created my basic framework and now I am trying to figure out how to read data from .json files. I attempted to use the readFile method in my helper class, but unfortunately, it resulted in ...

javascriptjsonautomationpuppeteerbdd

"Attempting to access a variable defined in one pipe results in it being undefined in a

Currently, I am utilizing gulp to process pages for a website. Some of these pages are PHP files, however, after going through the template engine, they all end up with a .html file extension. My intention is to add a property to each file indicating if it ...

javascriptnode.jsgulpgulp-rename

Is it possible for the like button to display specific information when clicked?

When working with a looping structure in Ionic and Angular, which includes post content such as text, photos, and videos, I am encountering an issue with selecting specific data when clicking on the like button. How can I ensure that only the data associat ...

javascriptjsonangularionic-framework

Creating an HTML design with divs: a trio of pictures that adjusts in size to match the viewport (sl

As a newcomer to HTML and CSS, I find myself nearing completion of my website, with the final obstacle being an image slider in the background. The Challenge: The images are not perfectly centered within the viewport. Specifically, the first image needs ...

javascripthtmlcss

"Encountering an Error with Route.get() when attempting to utilize an imported

I have a function that I exported in index.js and I want to use it in test.js. However, when I try to run node test, I encounter the following error message: Error: Route.get() requires a callback function but got a [object Undefined] What am I doing wro ...

javascriptnode.jsexpress

Remove a textbox dynamically in jQuery using solely jQuery without the use of traditional JavaScript code

My code is aimed at creating a dynamic way to add and remove textboxes. However, I am encountering a problem where clicking the delete button removes everything instead of just one textbox. Can anyone spot the error in my code or offer a solution to remo ...

javascriptjqueryhtmlcss

Tips for incorporating Vue.js tag attributes in IDEA

I am using IDEA 2016.2.5 and I'm trying to incorporate Vue.js into my project. However, Vue has some tag attributes that IDEA is not recognizing and keeps highlighting as errors. I have installed the Vue Plugin and tried setting the HTML custom unkno ...

javascriptintellij-ideavue.js

Expand the HTML Template and Resize Children to Fit the Window

My software creates HTML email templates that typically range from 600px to 650px in width, but can sometimes be as wide as 900px. The templates have nested table elements for email clients, with all dimensions specified in fixed pixels rather than relativ ...

javascripthtmlmeta-tagsviewportemail-templates

Move objects on the webpage by dragging and dropping them

My goal is to create a website with drag-and-drop functionality for elements, similar to Wordpress widgets. Users should be able to easily add text boxes to different areas on the site by simply dragging and dropping them. If necessary, they can also choos ...

javascriptphpjqueryhtmldrag-and-drop

Can anyone recommend a reliable continuous integration pipeline for StrongLoop and GitHub integration?

How can you effectively develop websites using strongloop and github/bitbucket, ensuring smooth transitions from development to testing to production? I understand the key components of a successful workflow, but I'm interested in hearing about strat ...

javascriptnode.jsexpressnpmstrongloop