Is there a way to verify if an item is currently present in a three.js scene and subsequently update it?

I am currently facing an issue with checking if an object is already present in a three.js scene and then replacing it. It seems to be more of a scope problem rather than a specific three.js issue.

My scenario involves a form that pops up upon clicking, allowing users to customize options related to a model. Upon submission, I need the application to verify if an object already exists at the designated location (determined by assigning a name to the object during creation). If something is already there, the goal is to replace it with the new selection.

While I have managed to implement the checking mechanism successfully, I am encountering difficulties with the actual replacement:

var places = [];
$('#submit').off().on("click", function(){
        //create a variable that stores info from the selections
        place = motifClass.toString() + placeValue.toString();
        motifChecker(place);

        if (places.indexOf(place) === -1 ){
         places.push(place);
        };

        ….

        var loader = new STLLoader().load(‘/assets/object.stl’, function( geometry ){
        …

        mesh.name = place;
        place = "";
        scene.add(mesh);
    };

});

function motifChecker(){
      var existing = scene.getObjectByName(place);
      if ( places.includes(place) ){
         scene.remove(existing);
      }
}; 

The current code successfully removes the object but does not appear to replace it. Even though my browser console shows that the new .stl file is loaded, it fails to display on the screen.

Answer №1

It is important to properly dispose of the existing item after removing it.

existing.geometry.dispose();
existing.geometry = undefined;
existing.material.dispose();
existing.material = undefined;
scene.remove(existing)

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

Understanding the significance of "this" within node.js modules and functions

Upon using the require method, a JavaScript file is loaded. The code snippet demonstrates an interesting scenario where this behaves differently within different parts of the script. // loaded by require() var a = this; // "this" here refers to an empty ...

"Is there a way to reverse the action of $( "button" ).remove()

Currently, I have implemented JQuery's $( ".button" ).remove(); function to get rid of all the buttons on my webpage immediately after a user clicks the print PDF button that changes the HTML page into a PDF. Nevertheless, once this process is done ...

How to assign multiple selection values in Bootstrap's select picker

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select ...

Using raycasting in Three.js to select objects and adding animation

In my current project, I have found that raycasting selection works perfectly fine for static meshes. However, when it comes to animated meshes, I have encountered an issue where the ray selection does not take into account the movement of the mesh. Instea ...

The wrap() method in jQuery clones elements multiple times

I have created a simple function that wraps a div tag inside another div tag when the browser window exceeds a certain width of x pixels. However, I've encountered a strange bug when resizing the page more than once. Let me share with you the jQuery ...

Create basic HTML using the react.cloneElement method

When using React.cloneElement(), the first parameter always needs to be a react component that is passed as children in props. Is there a way to pass a simple HTML node as a child? Please see the example code below for clarification: Dialog.jsx (Common c ...

What is the most effective way to accurately identify the mobile platform of a user using JavaScript?

I need to determine whether a user has accessed the application through a browser on Android or iOS. The company would like to display slightly different content depending on the platform. While I am aware that navigator.platform can be used for this pur ...

Seeking assistance for my dissertation assignment: electron, express, and SQLite3

I am currently dedicated to my thesis project, which involves designing an educational desktop video game for both public and private schools within my city. Being a fan of electron, I thought it would be a great idea to develop my app using this platform ...

What could be causing the data storage issue in the state?

Using axios, I am fetching data and storing it in a state variable useEffect(() => { getCartItems(); }, []); const [abc, setAbc] = useState([]); const getCartItems = async () => { let data = await CartApi.get(`/${store.getState().auth.user.id}/ ...

Unexpected Behavior in ComponentDidMount

During my exploration of the React documentation, I came across an example of a clock timer implementation. It was interesting to see how the setInterval function is used inside the componentDidMount method to update the state and trigger re-rendering of ...

rotating vertices on a billboard in the vertex shader

Here is a snippet of code that showcases the issue at hand: (comment/uncomment out the gl_Position lines in the vertex shader) var scene; var book; var shaderMaterial; var renderer = new THREE.WebGLRenderer({ antialias: true ...

How can you hide all siblings following a button-wrapper and then bring them back into view by clicking on that same button?

On my webpage, I have implemented two buttons - "read more" and "read less", using a Page Builder in WordPress. The goal is to hide all elements on the page after the "Read More" button upon loading. When the button is clicked, the "Read More" button shoul ...

Unable to insert a JSON object into an Array

This might appear to be a duplicate, but it's not. None of the solutions I've tried have worked. Within my angular module, I have a list: this.checkedInterviews = [] Followed by a function that does the following: var interviewModel = { ...

The dynamic duo of JavaScript and HTML forms are like peanut

My HTML form has some validation functions, but I'm running into an issue where some functions can access the form while others cannot! Here is the form code: <form id="contactForm" action="javascript:submitForm()" method="post"> <table ...

Can you provide some insight into why the init() method is throwing an error?

My project utilizes DynamoDB access through https://www.npmjs.com/package/react-native-dynamodb. I followed the code provided on the website for implementation. The issue I'm facing is that when hovering over my .init() method in WebStorm IDE, it sho ...

When making xmlhttp requests, IE9 will prioritize loading from the cache rather than from the server when the data is available

During my local development process, I've been utilizing this AJAX code: function getChart(num,ld,margin,idr) { idr = typeof(idr) != 'undefined' ? idr : 0; $(ld).style.display="inline-block"; if (window.XMLHttpRequest) { ...

Displaying an alert when the text box contains a duplicate value

I have a set of input fields with various values that can be edited but must not be left empty (if left empty, display an alert). When I update a field with a new value, if that new value matches any of the other input field values, I want to display an al ...

Guide to deploying a node.js web application with a local MongoDB database

Seeking guidance for a crucial query. I have developed a node.js API project that is currently linked with MongoDB on localhost. However, I intend to deploy this API for my react native project and require a URL address for it. The primary issue lies in t ...

Combining my CSS and JS files is causing code issues (works on my Mac, but not on the server)

Currently, I am in the process of merging my CSS and JS files before minifying them with the YUI compressor. My web application functions perfectly when each file is linked individually. Now, I am attempting to combine all the files into one single CSS fi ...

The output from the Moment.js HTTP server is currently experiencing errors and is not displaying the expected

My first time working with JavaScript and the Momentjs library has not been smooth sailing. I am facing an issue where the output is not displaying as required. The goal is to show dates in the format "Day, date month year" (e.g., Tuesday, 14th May 2018). ...