Cycle through different models using three.js graphical user interface

I have a scene with multiple models and I am using dat.gui to toggle through them.

Previously, I attempted to achieve this by toggling the visibility on/off with the following code:

var gui = new dat.GUI();

var controls = {

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

};

gui.add(controls, 'toggleObjects');

However, I encountered errors such as "Uncaught TypeError: undefined is not a function".

Furthermore, I am looking for a solution where I can switch between more than 2 models at the click of a button, displaying one model while hiding all others.

Is there a better or simpler way to achieve this? Any assistance would be greatly appreciated as I am relatively new to working with three.js.

Answer №1

It is advisable to explore the surroundings, examining whether the child matches the desired object before toggling visibility on and off.

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

Creating a looping animation on multiple elements using jQuery that makes them fade in and out at different intervals

I am currently working on creating a fade in and out animation for multiple elements using jquery. It's a bit complex to explain, so I will start by sharing the relevant code. $(document).ready(function() { $("#1").delay(0).animate({ ...

Combining two objects: A guide for merging with AngularJS or basic JavaScript

There are two sets of data $scope.c= {"Sedan":{"Toyota":["Camry","Corolla"]},"SUV":{"Jeep":["Wrangler"]}}; var d= {"SUV":{"Ford":["Escape"],"Chevrolet":["Tahoe"]}}; After combining the two sets, I expect to see the following outcome {"Sedan":{"Toyota": ...

Are your GetJSON requests failing to execute properly?

I have a code snippet that executes in a certain sequence and performs as expected. <script> $.getJSON(url1, function (data1) { $.getJSON(url2, function (data2) { $.getJSON(url3, function (data3) { //manipulate data1, data2, ...

The Object filter is experiencing a delay with processing 10,000 items

When an API returns over 10,000 objects in the format of {firstName:'john',lastName:'Cena'}, I am faced with a performance issue. In my parent React component, I make the API call in componentDidMount and pass this object to child compo ...

Verifying a checkbox selection within an Autocomplete feature using MUI

[ { label: 'First', checked: false }, { label: 'Second', checked: true } ] Here is a brief example of how the data may be structured. I am utilizing Material UI's Autocomplete feature to enable searching based on labels. Thes ...

Using the ternary operator in React to implement inline styles

Within my React/Typescript project, I aim to dynamically exhibit a color based on the presence or absence of a value in payload[1]. In the code snippet below, note the usage of an inline style tag. <li className="recharts-tooltip-item" style={ ...

Dealing with asynchronous calls in useEffect.Here are some tips for managing

When invoking a function from within a useEffect, which is located in a different class, there seems to be an issue with receiving the expected data back. The function call triggers another async function that makes an API call and performs operations on t ...

How to efficiently load SharePoint profile images in an asynchronous manner

Currently, I am working within a SharePoint farm that has User Profiles enabled. Within this environment, we are developing a community feature that includes a profile wall showcasing all members of the community. My task involves retrieving and displaying ...

Update Refresh Token within Interceptor prior to sending request

I'm stuck on this problem and could use some guidance. My goal is to refresh a user's access token when it is close to expiration. The authService.isUserLoggedIn() function returns a promise that checks if the user is logged in. If not, the user ...

A guide on efficiently organizing and refining an array of objects in Vue

I have been working on filtering and sorting an array of objects in Vue. While I have successfully implemented the filtering functionality, I am now looking to incorporate a sorting feature as well. To achieve this, I have set up a dropdown component throu ...

Switching the border of a div that holds a radio button upon being selected

I have a piece of code that I use to select a radio button when clicking anywhere within a div, which represents a product photo. To make it clear for the customer, I want to add a border around the selected product. Here is the initial code: <script t ...

Varied content types required for unique elements within form data

I am having trouble including the content-type application/json with the initial element of my form data. This is the code I am using: var fd = new FormData(); fd.append('addBank', JSON.stringify(reqData.addBank[0])); fd.append('bankProof& ...

I only notice certain text after carefully inspecting the elements in Google Chrome

While creating an application on Sitefinity (ASP.NET), I encountered an issue where certain elements, such as button text and labels, were not loading correctly when running the application. However, upon inspecting the element, they appeared to be working ...

Backend data displayed on carousel presents either all images or none at all

I am currently working on a Django project that involves displaying a list of images in a Carousel format within my template. I have encountered an issue with setting the active class for the Carousel items. When I include the "carousel-inner active" clas ...

Using JavaScript to launch a new window with an array of parameters

I am working on an asp.net mvc 3 application that has an Action Method for handling GET requests and returning a page. The code snippet is shown below: [HttpGet] public ActionResult Print(IEnumerable<string> arrayOfIds) { ....................... ...

Instructions for removing and recreating an input field along with its parent elements when the value of a Select tag is changed

I currently have a table with four fields, as illustrated below: Semester | Exam Status | GPA | Fee Status My query is regarding the behavior when changing the value in Exam_Status: I noticed that the Select tag-> does not clear automatically. Specifi ...

Tips for sorting an array based on various criteria from a separate array

Seeking assistance with filtering results from the data array using two arrays. var data = [{"role":"Frontend", "languages": ["HTML", "CSS", "JavaScript"]},{"role":"Fullstack", ...

Preserving the name binding in Ractive's radio button functionality

Is there a way to bind a ractive variable to a radio button without showing the curly brackets in the HTML? The simplest method is to use <input type="radio" name="{{myVar}}" value="1" checked> but I want it to output as <input type="radio" nam ...

Implementing Vue.js click event behavior on a component within the template

Encountering an issue while developing Vue's template onclick event. Trying to open a module when clicking a file, I have looked at some samples with native code, but it does not quite fit into my code and I cannot reach the console. Here is my code: ...

The initial number is inserted within the text box upon entering the final number

Whenever I enter the final digit, the text-box swallows up the initial number (it vanishes), resulting in an additional space. https://i.stack.imgur.com/Vfm8s.png https://i.stack.imgur.com/od4bQ.png Upon clicking outside of the text-box, the formatting ...