Implementing visibility toggles for objects in three.js using a graphical user interface

I am interested in controlling the visibility of objects in my scene through a button on a GUI. The following function currently hides/shows objects individually:

g3white.traverse(function(child){child.visible = true;});
g3black.traverse(function(child){child.visible = false;});

While this works manually, I want to create an onChange function that will switch the visibility of the black object with the white one (and vice versa) when a button is clicked.

Any assistance you can provide would be greatly appreciated. Thank you.

javascriptthree.js

Answer №1

To implement GUI controls in your web development project, consider using DAT.Gui

var guiControl = new dat.GUI();

var settings = {

  showObjects: function(){
    whiteObjects.traverse(function(item){item.visible = true;});
    blackObjects.traverse(function(item){item.visible = false;});
  }

};

guiControl.add(settings, 'showObjects');

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

Can anyone suggest a node.js equivalent for XMLHttpRequest.readyState in http?

One important feature of Javascript's XMLHttpRequest object is the readyState property. This property, often used alongside response codes, allows developers to determine if an HTTP request has completed before proceeding with additional code. if (th ...

javascriptnode.jsxmlhttprequest

Tips for accessing a variable through request.query

When I made a call to getContents() in my client-side code: $.getJSon("/getContents", function(room){ theRoom=$("#roomName").val();//textarea's value ... }); I am now trying to figure out how to retrieve theRoom variable in getContents(), which is ...

javascriptjquery

Leverage recursion for code optimization

I'm currently working on optimizing a function that retrieves JSON data stored in localStorage using dot notation. The get() function provided below is functional, but it feels verbose and limited in its current state. I believe there's room for ...

javascriptjsonrecursionfunctional-programming

Tips for sending <p> data to a router function with HTML

I am currently working on a page where users are presented with a list of unverified accounts, each containing its own form element. Each form has a "submit" button that triggers a POST call to /verify. However, I am facing an issue where the data within t ...

javascripthtmlnode.jsexpresshandlebars.js

How does the onclick event trigger even without physically clicking the button?

I am struggling with creating a simple button using mui. My intention is to activate a function only when the button is clicked, but for some reason, as soon as I enter the webpage, it triggers an alert automatically. This behavior is puzzling to me and ...

javascriptreactjsmaterial-ui

Displaying empty values in the post via plupload data

I have encountered an issue where a JSON string that I am trying to post is not getting posted, despite being visible in an alert. The strange part is that when I manually create a JSONArray, it gets posted successfully. Below is the code snippet, I would ...

javascriptjqueryjquery-pluginsplupload

Converting JSON array with ES6 functions

I have a specific array format that needs to undergo transformation. { [ { "condition": "$and", "children": [ { "column": "Title", "comparison": "$eq", "columnValue& ...

javascriptjsonmongodb

Reveal Password Feature in Angular After User Click

I am working on an inventory page that includes a password field. My goal is to initially hide the password and display it as points (****) instead. I would like the password to be revealed either when clicked or through a pop-up. JS var retrieveCert ...

javascriptjqueryhtmlangularjs

Record the clicks registered within an external jQuery UI modal window

I have a jQuery UI dialog window that contains thumbnail images. When an image is clicked, I want to retrieve the id of that specific image. I believe using data attributes can help me achieve this easily. However, I'm facing an issue where I am unab ...

javascriptjqueryjquery-ui

Angular 2+ Service for tracking application modifications and sending them to the server

Currently I am facing a challenge in my Angular 4 project regarding the implementation of the following functionality. The Process: Users interact with the application and it undergoes changes These modifications are stored locally using loca ...

javascriptangulartypescriptangular2-services

Tips for clearing a textbox value in JQuery after a 5-second delay

I attempted the following: <script type="text/javascript"> $(function() { $("#button").click( function() { alert('button clicked'); // this is executed setTimeout(function() ...

javascriptjquery

Removing a Django object via AJAX or JavaScript with a confirmation prompt

Greetings! I am looking to implement a feature in Django where I can delete an object using AJAX or JavaScript with a confirmation message upon clicking the delete button. However, I am struggling to complete the AJAX request. Here is the code in views.py ...

javascriptpythonajaxdjangorequest

Issue with AngularJS: The select dropdown fails to update the selected option when the bound scope variable changes

I am facing an issue with a select control in my Angular app. The options for the select are generated dynamically from an array of objects in the scope. When I try to pre-select a specific option on app init by changing a bound variable on the scope, it d ...

javascriptangularjs

The bootstrap modal is appearing correctly, but the content within it is not displaying properly

I've been working on a website and added a modal for signup. However, when the user clicks on the signup button, the modal appears but the content inside it is not clickable. Can someone please help me with this issue? Here is the code snippet I am us ...

javascriptcsstwitter-bootstrap

The view in my node is rendering a different ejs view, and I have verified that the path

Currently, I am using the render method for a view in EJS. The path is correct but the view in the route is an old one that I used for testing purposes. This is my server.js code: https://i.sstatic.net/Xl1Ct.png Here is my route: https://i.sstatic.net/ ...

javascriptnode.jsexpressviewejs

Exploring Particles with three.js

Could you please help me understand why there are no particles visible in this code snippet? I followed a tutorial and it all seems correct. (function() { var camera, scene, renderer; init(); animate(); function init() { scene = new THREE.Scene(); ...

javascriptcanvasthree.js

Using Async/await appropriately in node.js

I have written code to call a procedure with an OUT parameter type of cursor (ResultSet). To fetch data from this ResultSet, I created a function called fetchRowsFromRS() that extracts the data. In my fetchRowsFromRS() function, I am using a return state ...

javascriptnode.jsasync-await

nextJS does not recognize the term 'Window'

I'm encountering the error "window is not defined" in my NextJS project. The variable isMobile determines whether the window size is less than 767.98 to handle the hamburger menu functionality. This code worked in ReactJS but seems to be causing issue ...

javascriptreactjsnext.js

Is there a way for me to retrieve the widths of all child elements within an HTML document?

I have been working on a JavaScript (jQuery) function to calculate the maximum width of all child and children's-child elements within a specific div element. Here is the code I have written so far: function setBodyMinWidth(name){ var max = 0; $(nam ...

javascriptjqueryhtmlcsswidth

Issues with d3.js transition removal functionality not functioning as expected

Having an issue with a d3.js visualization that involves multiple small visualizations and a timeline. When the timeline changes, data points are supposed to be added or removed accordingly. Here is the code snippet responsible for updating: var channels ...

javascriptd3.js