Ways to delete an item from the environment

I need to change the position of some cylinders in the scene by removing them and adding new ones.

Here is a snippet of code to show how I currently place the cylinders:

for (i = 0; i < cylinderCount; i++) { 

var geometry = new THREE.CylinderGeometry( (cylinderDiameter * scale), (cylinderDiameter * scale) , cylinderLength * scale , 20 );
var material = new THREE.MeshBasicMaterial( {color: 0xffe26f} );
var cylinder = new THREE.Mesh( geometry, material );

scene.add( cylinder );

cylinder.position.set( 0 , 0 ,bottomEdgeGrid);
bottomEdgeGrid -= (cylinderSpacing * scale);
cylinder.rotation.z = Math.PI / 2;
}

To remove the cylinders, I utilize this function:

function ClearMesh(){
scene.remove(scene.getObjectByName(cylinder));
scene.remove(scene.getObjectByName(secondCylinder));
}

This button triggers the removal of the cylinders:

<button onclick="ClearMesh();">Clear mesh</button>

Answer №1

To utilize the Object3D.getObjectByName() method, you need to provide a string as a parameter. Specifically, you should use the Object3D.name, which is not currently set in your application. Try something similar to this:

// inside your for loop

var cylinder = new THREE.Mesh( geometry, material );
cylinder.name = 'cylinder' + i;

// within your ClearMesh() function

scene.remove( scene.getObjectByName( 'cylinder1' ) );

Additionally, consider reusing your material and geometry for creating cylinder meshes with the same properties. Declare them outside of the for loop. If not, remember to use the respective .dispose() methods to release internal resources when removing a cylinder. Refer to https://example.com/a/12345678/9876543 for more information.

three.js R103

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

WordPress header causing issues with Document.write()

I have a JavaScript function that utilizes AJAX to retrieve data from a PHP file. Previously, I utilized document.write(data) to display the retrieved content and it worked smoothly on its own. However, upon incorporating the script into WordPress via hea ...

Tips for preserving the drag and drop sequence of various elements (images, buttons, text, paragraphs) using PHP and MySQL

Is there a way to retain the position of drag and drop elements (such as images, buttons, text, paragraphs) in php and mysql? ...

AngularJS call to the web service

I am facing an issue where I do not receive any response upon clicking the button. <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script> <sc ...

Troubleshooting: Angular input binding issue with updating

I am currently facing a challenge with connecting a list to an input object in Angular. I was expecting the updated values to reflect in the child component every time I make changes to the list, but strangely, the initial values remain unchanged on the sc ...

Received an error while attempting an AJAX GET request to a distinct server hosting a WebAPI

This is my first time encountering an issue with an Ajax request in client-side code. I'm hoping that there's a simple mistake in my code that I'm just overlooking. Just to give some background, when I manually access the URL mentioned below ...

Exploring the Observable object within Angular

As I delve into learning Angular through various tutorials, I encountered a perplexing issue regarding my console displaying an error message: ERROR in src/app/employee/employee.component.ts:17:24 - error TS2322: Type 'IEmployee' is not assignab ...

Can someone assist me in streamlining a few parts of my JavaScript code

I have written some pretty complicated JavaScript code to dynamically create multiple input fields and dropdown boxes based on a number entered by the user in a text field. Here's a basic overview: the script checks if a number is being used, then d ...

`Getting the full URL using a route name in Angular 2 - a step-by-step guide`

Within my Angular 2 (final) project, there is a recurring need to generate full absolute URLs based on route names (such as '/products'). This requirement arises for tasks like providing permalinks to specific pages or opening a page in a new tab ...

Traverse the span of 24 hours with customizable loop duration

I am aiming to develop a customizable timer that runs from 00:00:00 to 23:59:59. The twist is that I want the speed of this loop, which can be referred to as looptime, to be changeable. For example, if looptime is set to 10000, the loop should finish in 1 ...

"Looping through elements with ng-repeat does not seem to refresh

Currently, I am working on implementing a drag and drop ranking question using Angular. The functionality is working smoothly, except for one issue in Chrome where the labels for the ranking question do not update properly. To demonstrate the problem, I h ...

When utilizing the array.push method, new elements are successfully added, however, it appears to also overwrite the last object

I'm encountering a strange issue where every time I push an object to the array, the array's length increases as expected. However, the object that I push last ends up overriding all other objects. I can't seem to figure out my mistake, so p ...

Creating a "briefing" iframe at the top of a webpage

I'm looking for a way to allow users to embed my iframe at a specific size, like 100x100, and then have it resize dynamically to fit the page size when they click on it. I want this functionality to work regardless of how the HTML embedding the iframe ...

Having trouble displaying API values in b-form-select component in Vue.js?

I am using an API to fetch users data and I want to bind these users to a b-form-select component in Bootstrap Vue. However, after making the request, I only see "null" in the b-form-select. Here is my request: getAllUsers() { axios.get(&a ...

How to implement bi-directional scroll animation in JavaScript for top and bottom movements

In my JS project, I experimented with creating animations using the bounding client feature. By scrolling down to reveal certain text or content, I was able to adjust its opacity to 1 by applying the CSS class ".active". However, once the user scrolls back ...

Using d3.xml() within a React application

Is it possible to use the d3.xml() method in a React application? I tried using the code below, but the debugger seems unable to access the function: d3.xml("http://upload.wikimedia.org/wikipedia/commons/a/a0/Circle__black_simple.svg", function(error, do ...

Ways to rouse a dormant AudioTracks feature

When I click a button, I am able to get the correct value of AudioTracks.length. However, without clicking the button, I am unable to retrieve this value. Take a look at my code below. It works at line (B) but not at (A). Can you help me understand why and ...

What is the equivalent of Node's Crypto.createHmac('sha256', buffer) in a web browser environment?

Seeking to achieve "feature parity" between Node's Crypto.createHmac( 'sha256', buffer) and CryptoJS.HmacSHA256(..., secret), how can this be accomplished? I have a piece of 3rd party code that functions as seen in the method node1. My goal ...

What could be causing my MongoDB Node.js driver's $lookup aggregation query to not produce the expected results?

In my database, I have two collections: users and roles Each user has an array of roles assigned to them: { _id : 61582a79fd033339c73ee290 roles:[615825966bc7d715021ce8fc, 615825966bc7d715021ce8fd] } The roles are defined as follows: [ { ...

Issue with Electron Remote process failing to take user-defined width and height inputs

I'm currently facing an issue with utilizing remote windows in electron. I am attempting to process user input and use that input to generate a new window with specific width and height. However, when I hit submit, nothing happens. I can't figur ...

Storing an ID field across different domains using HTML and JavaScript: Best Practices

Currently, my web app includes a conversion tracking feature that analyzes whether activity "A" by a website visitor leads to action "B." This feature works effectively when the tracking is contained within a single domain but encounters issues across mul ...