Is there a way to conceal JSON objects within a three.js scene using the loader.load function?

I am working with multiple JSON files in my three.js project and loading them using loader.load. The files are displayed when I click on the corresponding text content.

How can I unload or hide an object with a second click?

Below is the code I am currently using:

document.getElementById("dest").getElementsByTagName("span").onclick = function(element, key) {myFunction()};
    function myFunction() {
        document.getElementById("dest").getElementsByTagName("span").height = "100%";
        var t = event.target.textContent;
        var a = t.slice(1,t.length-1);
        path = 'examples/brain_parts/' + groupNames[a] + '.json';

                loader.load( path, 
                        function ( geometry, materials, data ) {
                        var material = new THREE.MultiMaterial( materials );
                        var object = new THREE.Mesh( geometry, material );
                        object.scale.set(5,5,5);
                        object.position.set( 0, 0, 0 );
                        scene.add( object );
                        render();

                })

    }

Answer №1

Let's say we have a variable "a" that is equal to everything in t except for the first and last elements.
We then create a string called objName by concatenating "groupNames" with the value of variable a.

In order to search through the scene, we need to find the object that has a "name" attribute matching the value of objName. Alternatively, you can use the following code:

var obj = scene.getObjectByName(objName);

If the desired object is found, remove it. If not, you can execute the following command:

loader.load(...
    var object = new THREE.Mesh(geometry, material);
    object.name = objName;
    ...
);

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

Issue with rendering Base64 image array strings in FlatList component in React Native

In my RN App, I am trying to display a FlatList with Image Items but it seems like I have missed something. I am retrieving blob data from my API, converting it to a String using Buffer, and then adding it to an Array. This Array is used to populate the F ...

Error occurs in Windows script while running a project installed globally

Upon installing my project globally, I encountered a Windows Script Host error. https://i.stack.imgur.com/unFVu.png What steps can I take to resolve this issue? The following is my JavaScript code snippet: Object.defineProperty(exports, "__esModule ...

Issue: Inability to scroll on div overflow section

My website consists of one static page with an HTML and CSS file. Oddly enough, when testing the page and inputting content into a multiline textarea until it overflows, the browser fails to display a scrollbar. Despite inspecting the div with the id &apos ...

Retrieving data in JSON format from an API and converting it into a more usable JSON format using Flask

How can I convert data from JSON format into a web application using Flask to populate values in HTML? Here is the code in spec_player.html: {% for p in posts: %} <p>{{p.first_name}}</p> {% endfor %} This method works (main.py): posts = ...

MUI: How can I resolve the issue of TextField not supporting the number type with maxLength restriction?

I am currently facing an issue with applying maxLength to the TextField component when the type is set to number. Here is my code snippet: const CustomTextField = ({ label, value, maxLength, required, disabled, handleChange, ha ...

Utilize jQuery Function on Identical Class of <ul> Elements

I have integrated a listview control in my ASPX page. The data is being fetched from the database and displayed in the listview. I have also utilized jQuery script to implement the .fadein() and .fadeout() effects on the listview elements. However, when I ...

I kindly request your assistance in resolving the issues with the append() and empty

Here is some code I've been working on: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ ...

Managing the type of content in a Restful web service

Currently in the process of developing a Restful web service for an internal company project, I am intrigued by the idea of merging JSON and "web content" requests. The corporate application, following standard procedure, has a three-letter abbreviation t ...

Retrieve the HTML content of all children except for a specific child element in jQuery

Is there a way to utilize jQuery/Javascript for selecting the HTML content of the two <p> elements in the initial <div class="description? I'm open to using Regex as well. This specific jQuery selection is being executed within Node.js on a c ...

Having trouble with the babel-loader and its version compatibility, as well as not finding the babel-loader folder in the node_modules directory when

Here are the steps I've taken: I cloned the project from Github. Ran the command 'yarn' to start the project. Encountered an error after running the command 'yarn start'. Even after following the steps provided in the e ...

Sending Arguments to JQuery click Event

Seeking guidance in utilizing Jquery for a dynamic form creation. I am looking to design a dynamic form where I fetch values from a database, showcase them as rows, and allow users to add multiple rows for each value. Below is a snippet showing a loop tha ...

Ensure that the page has completely loaded using WebdriverJS

Is there a reliable method to ensure that a page has fully loaded using selenium-webdriver in JavaScript? I came across this similar query, but I require an implementation specifically in JavaScript. var webdriver = require('selenium-webdriver') ...

Integrating Express into a React Webpack project

I am currently in the process of integrating express into my React project to establish connections with databases for storing form data. As of now, I am using webpack to create a dev server that displays my React view. My technology stack includes... Web ...

Seeking assistance to prevent data duplication when transferring information from list1 to list2 in React.js

As I work on developing two lists in React.js, I encountered an issue with avoiding repetitions when transferring items from list-1 to list-2. I need assistance creating a function that prevents duplicate items in list-2 while also ensuring that the items ...

Guide on changing the CSS of MUI parent components to set the display of buttons to 'block' in React

I'm facing a challenge with my modal design for mobile view. I need the buttons to display in a stacked format, one above the other, taking up the full width of the modal. I've been exploring ways to override the existing CSS within the component ...

Getting the selected item from a dropdown menu and including it in an email

While working in React, I have successfully created a contact form that includes fields for name, email, and a message box. When the form is submitted, these three items are sent as expected. However, I am facing difficulty in sending a selected item from ...

What is the proper way to display the date and time 2021-11-14T18:30:00.000+00:00?

Here is my ts file code: mydate: Date = new Date('2021-11-14T18:30:00.000+00:00'); However, I want the date to be in this format:- 07-July-2022 If anyone can assist with achieving this format, it would be greatly appreciated. Thank you! ...

Navigate to another HTML division using data-toggle

I have 2 HTML documents index.html and services.html In services.html, I have the following code: <a class="nav-link" data-bs-toggle="tab" href="#ds-tab">Data Science</a> <a class="nav-link" data-bs- ...

How to Retrieve JSON Response in Link Function within AngularJS Directive

I have decided to implement a chart library called Plotly in my project. To ensure reusability, I am creating a directive in AngularJS that will allow me to easily integrate the library in the future. The directive will receive an object as input to creat ...

Error in React+Redux: Trying to access the "address" property of a null value is not permitted

I am new to using react and encountering an issue with my ecommerce app. The app runs smoothly until I log out and then log back in at the shipping address page, which triggers the following error: TypeError: Cannot read property 'address' of nu ...