Is there a way to remove specific mesh elements from a scene in Unity?

When I create multiple mesh objects with the same name, I encounter difficulties in selecting and removing them all from the scene.

Despite attempting to traverse the function, I have not been successful in addressing the issue.

event.preventDefault();

scene.traverse(function(child) {
   if (child.name === "blueTiles") {
      var remove_object = scene.getObjectByName( "blueTiles", true );
      scene.remove(remove_object); 
   }
});

var surroundMaterial = new THREE.MeshBasicMaterial({ color: 0x154995, side: THREE.DoubleSide, transparent: true, opacity: 0.8 });
surroundingCubes = new THREE.Mesh( geometry, surroundMaterial );
scene.add( surroundingCubes );
surroundingCubes.name = "blueTiles";
surroundingCubes.position.set(selectedObject.position.x - 1, 0.11, selectedObject.position.z);

var surroundMaterial = new THREE.MeshBasicMaterial({ color: 0x154995, side: THREE.DoubleSide, transparent: true, opacity: 0.8 });
surroundingCubes = new THREE.Mesh( geometry, surroundMaterial );
scene.add( surroundingCubes );
surroundingCubes.name = "blueTiles";
surroundingCubes.position.set(selectedObject.position.x + 1, 0.11, selectedObject.position.z);
surroundingCubes.rotation.x = Math.PI / 2;

I am seeking a solution to efficiently delete all objects labeled as blueTiles.

UPDATE: I made the transition from names to Groups, which yielded positive results. SOLUTION PROVIDED BELOW

function onDocumentMouseDown(event) {

for (var i = group.children.length - 1; i >= 0; i--) {
    group.remove(group.children[i]);
}

var surroundingMaterial = new THREE.MeshBasicMaterial({ color: 0x154995, side: THREE.DoubleSide, transparent: true, opacity: 0.8 });
var geometry = new THREE.PlaneGeometry(1, 1, 1, 1);

if ( selectedObject.position.x - 1 >= 0) {
    surroundingCube = new THREE.Mesh( geometry, surroundingMaterial );
    surroundingCube.position.set(selectedObject.position.x - 1, 0.11, selectedObject.position.z);
    surroundingCube.rotation.x = Math.PI / 2;
    group.add(surroundingCube);

}

if ( selectedObject.position.x + 1 <= 9) {
    surroundingCube = new THREE.Mesh( geometry, surroundingMaterial );
    surroundingCube.position.set(selectedObject.position.x + 1, 0.11, selectedObject.position.z);
    surroundingCube.rotation.x = Math.PI / 2;
    group.add(surroundingCube);

}

scene.add( group );
}

Answer ā„–1

If you want to organize the meshes in your scene, you can utilize the THREE.group class.

An example of how you could use it is shown below:

var groupedMeshes = new THREE.Group();
var firstMesh = new THREE.Mesh( geometry, material );
var secondMesh = new THREE.Mesh( geometry, material );
var thirdMesh = new THREE.Mesh( geometry, material );
groupedMeshes.add( firstMesh );
groupedMeshes.add( secondMesh );
groupedMeshes.add( thirdMesh );
scene.add( groupedMeshes );

Answer ā„–2

Utilizing getObjectByName simply triggers getObjectByProperty (utilizing the name property) which solely retrieves the first object discovered.
It is essential to iterate over the children of the scene / object3d, examine their name, and eliminate them.
For an uncomplicated process, assuming all to-be-deleted objects are at the highest level.
Here's a sample code snippet....(not validated)

for ( var i = 0, l = scene.children.length; i < l; i ++ ) {
  if (scene.children[i].name === 'blueTiles') {
    scene.remove(scene.children[i]);
  }
}

If delving deeper is necessary, recursion may be beneficial.

UPDATE...
Upon reevaluation of your inquiry..and recollecting the existence of a traverse function

It seems you are already traversing the scene and can access the child elements.
By changing your function (and refraining from invoking getObjectByName), the desired outcome can be achieved.

scene.traverse(function(child) {
   if (child.name === "blueTiles") {
      scene.remove(child); 
   }
});

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

Encountering a 404 error for core.js and browser.js while loading an Angular 2 app through system.src.js

I am new to Angular2 and have followed the Angular2 quickstart and tutorial to get started. Just to provide some context, when a user clicks on a link in the top navigation bar of my webapp, it triggers a server side request. The resulting page returned t ...

Is it possible to develop in React without using webpack, relying solely on Gulp instead?

Although I appreciate some aspects of Webpack, my enthusiasm for it wanes as the configuration files grow beyond 15 lines. It becomes overly cryptic, difficult to configure, and time-consuming. Therefore, I tend to reserve its use for just a couple of task ...

failure of svg spinning

I'm currently working with an SVG file and attempting to incorporate a spinning animation similar to loaders and spinners. However, I am facing an issue where the rotating radius is too large and I am struggling to control it effectively. CSS: .image ...

Encountering a difficulty in sending data to the server through ajax with Cordova

I am currently working on a Phonegap Cordova project and I'm trying to send data to the server using AJAX but I'm encountering an error. Here is an example of my code: $(document).ready(function() { $('#frm').submit(function() ...

The functionality of the delete button in Datatables is only operational on the initial page, failing to

My datatable is giving me trouble. The delete button in the action column only works on the first page, but not on the other pages. Here is the code for my delete button: <table id="example" class="table table-striped table-bordered" cellspacing="0" wi ...

The requested API endpoint for retrieving the name could not be found on the Express

Struggling to configure the restful API for my express app. Below is my app.js code: var express = require('express'), app = express(), bodyParser = require('body-parser'), methodOverride = require('method-override'); rout ...

Surprising outcome encountered while trying to insert an item into a list

I'm a bit puzzled by the current situation where: let groupdetails = { groupName: "", }; const groupsArray = []; groupdetails.groupName = 'A' groupsArray.push(groupdetails) groupdetails.groupName = 'B' groupsAr ...

Click the button to reset all selected options

<form method="post" action="asdasd" class="custom" id="search"> <select name="sel1" id="sel1"> <option value="all">all</option> <option value="val1">val1</option> <option value="val2" selected="selected"> ...

Content in TinyMCE styled with the default CSS of the application

Hello fellow developers; I'm struggling to find a suitable solution to apply the same styles from our main CSS file to the text entered in the TinyMCE editor. Just to clarify, I don't want to alter the overall theme or appearance of TinyMCE itse ...

The functionality of enabling and disabling dynamic behavior in AngularJs is not functioning as anticipated

As a newcomer to AngularJS, I may have some basic questions. I am currently working on implementing dynamic behavior for a button click event, but it's not functioning as expected. Could this be due to an issue with scope? Below is my HTML code: < ...

After pressing the button to access the sidebar, all I see is a plain white screen

I've been diligently working on a school project, but I'm encountering some issues with the Sidebar button in the top left corner. Whenever I click on the button, it opens up to display a blank white page. Can anyone provide me with some assistan ...

Can the parameters in a .slice() be customized within a v-for loop?

I am currently working with Laravel 8 and using blade syntax. The following code snippet is from a Vue component I created: <li class="w-3/12 md:w-auto pt-0 md:px-4 md:pt-2 md:pb-0 list-none relative" v-if="comic.item_type === 'b&ap ...

The video is not displaying on the webpage when connected locally, but it appears when the source is a URL

Recently, while practicing some basic tasks on a cloud IDE called Goorm, I encountered an issue with displaying a video on a simple webpage. The EJS file and the video were located in the same folder, but when I set the src attribute of the video tag to "m ...

Leveraging ajax data to enhance visual representation in graphs

Having trouble fetching data from a database to display it in a graph.js graph. I've attempted setting a timeout for the async callback from Ajax, but nothing seems to be working. Any suggestions on how to make this work would be greatly appreciated! ...

Display and conceal box using AngularJS checkboxes

I am currently facing some challenges in managing checkboxes and containers. The main objective is to have a list of checkboxes that are pre-selected. Each checkbox corresponds to a specific container, and when the checkbox is checked or unchecked, it shou ...

Moving a Ball Back and Forth Using Three.js

Iā€™m looking to create a continuous motion for a Ball in Three.js, where it moves to the right, returns to its starting position, and then repeats the sequence. var geometry = new THREE.SphereGeometry( 5, 32, 32); var material = new THREE.MeshPhongMateri ...

Tips on updating an HTML page following the receipt of a CURL request by a PHP script

I am currently developing a unique login system with customized requirements. The HTML form will submit data to a PHP script using AJAX, which will then forward the information to another PHP script for processing through CURL. After some time has passed ...

Issue with Jquery Conflict in WordPress

Apologies if my inquiry is not up to standard. I am currently utilizing a Google library in my project. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> The issue arises when this conflicts with the jQuery u ...

Determine the number of working days prior to a specified date in a business setting

How can I calculate X business days before a given date in JavaScript when I have an array of holidays to consider? I am currently thinking about using a while loop to iterate through the dates and checking if it is a business day by comparing it with the ...

What is the connection between {{result}} and $scope.result within AngularJS?

I comprehend the concept of binding a model to an element. An example would be... <pre ng-model="result">. This connection is established through the $scope.result variable. However, how are these two related? {{result}} $scope.result = data; ...