Currently, I am working with a ThreeJS Group object in my scene. Adding and manipulating objects within the group works perfectly. However, whenever I attempt to remove an object from the group, it ends up getting entirely deleted from the scene.
var targetedGroup = this.scene.getObjectByName(id);
for (var i = targetedGroup.children.length - 1; i >= 0; --i)
targetedGroup.remove(targetedGroup.children[i]);
In the ongoing discussion in the question's comments, it has been pointed out that there is minimal disparity between a Group and a Scene. Both classes inherit the add method from Object3D (Object3D.add)
Here is an illustration of how the process of adding/parenting works:
const scene = new THREE.Scene()
const group = new THREE.Group()
const mesh = new THREE.Mesh(/*...*/)
// scene.children == []
// scene.parent = null
// group.children == []
// group.parent = null
// mesh.parent == null
scene.add(mesh)
// scene.children == [ mesh ]
// scene.parent = null
// group.children == []
// group.parent = null
// mesh.parent == scene
group.add(mesh)
// scene.children == []
// scene.parent = null
// group.children == [ mesh ]
// group.parent = null
// mesh.parent == group
scene.add(group)
// scene.children == [ group ]
// scene.parent = null
// group.children == [ mesh ]
// group.parent = scene
// mesh.parent == group
The relevant section of the Object3d.add function is as follows:
if ( object.parent !== null ) {
object.parent.remove( object );
}
This ensures that each object is only parented to one other object.
If your goal is to have meshes directly within your scene, but still want to organize them using Group objects for organizational purposes, you can manually add them to the group's children array. Just remember that if you remove a mesh from the scene later on, it will not be garbage-collected until it is removed from the group as well. Personally, I prefer using an array or a map for better management.
Currently, my website pulls the 12 most recent posts from a specific category and displays them as links with the post thumbnail image as the link image. To see an example in action, visit What I am aiming to achieve is to enhance the functionality of my ...
After successfully creating a Google map using data from a JSON array with multiple latitude and longitude coordinates for different locations, I am now looking to display a custom popup (a div with dynamic information) over each marker when hovered. How ...
The JavaScript file named test.js is functioning properly when included in my HTML. function sendData() { var formData = new FormData( document.querySelector("form") ); var xmlHttp = new XMLHttpRequest(); xmlHttp.open("post", "test.php",true); ...
I am currently in the process of developing an Apache Cordova application for Android. My goal is to have the ability to customize the headers for the AJAX requests that are being sent out, which includes fields such as Host, Origin, and Referer. Due to ...
CreatedByModal is a unique chakra modal that incorporates tooltips. However, I am facing an issue where the tooltip appears at the top of the screen instead of directly above the icon when hovering over the icons. You can see in the image provided that the ...
Currently facing a challenge in implementing the modal closure functionality within the Vue.js template. Take a look at the code snippet: var modalInstance = new Vue({ el: "#modalInstance", data: { displayModal: false } }); Vue.compo ...
Hey everyone, I’ve been working on compiling and sending some forms to a PHP file but I've been noticing that the process is quite slow. Even when I use var_dump in PHP to only display the POST values, it still takes a considerable amount of time co ...
I am working with an interface that switches between displaying different div elements. Each div element has their children arranged differently, and when the switch happens, I need to access a specific child node of the newly displayed div. However, I fin ...
Currently, I am in the process of initiating a Python script designed to parse a CSV file that has been uploaded by the user through the UI. On the client side, how can I effectively trigger the Python script (I have explored using AJAX HTTP requests)? Add ...
I am facing a challenge with two <div> elements that share the same structure, but differ in their id and name. My goal is to transfer the values from one div to the other while preserving attributes and copying only the value attributes. This was m ...
I'm currently facing an issue with my simple API GET request. The array I need is always inside a promise and I can't figure out how to extract it or access the values stored within it. function getLocation(name) { let output = fetch(`http:// ...
Check out the code in jsFiddler here After reviewing the code, it's clear that when the add button is clicked, a new item is pushed to the $scope.p. Each item in the ng-repeat loop has an event-binding and everything functions correctly. However, onc ...
I am working with the following code: function exportTableToExcel(tableID, filename = ''){ var downloadLink; var dataType = 'application/vnd.ms-excel'; var tableSelect = document.getElementById(tableID); var tableHT ...
I've got the course structure all sorted out, but I'm struggling to understand how to retrieve a lesson object by its ID and also update a lesson object with new property values. If anyone could provide some guidance on the right approach, it wo ...
There seems to be an issue with the script not running or returning any answers. The console is blank. I am attempting to retrieve an answer from the Yandex Translate site (https://tech.yandex.com/translate/doc/dg/reference/translate-docpage/) Code: http: ...
convert.onclick = function() { for (var i = 0; i < before.value.length; i++) { after.value += "'" + before.value.charAt(i) + "', "; } } <textarea id="before" type="text" name="input" style="width:100%;">* ...
I'm currently working on a project where I have one UL with an unknown number of LIs. My goal is to split these LIs into two separate ULs using JavaScript (specifically jQuery). While I've been able to divide the LIs evenly by their number, I wou ...
Is there a way to implement a delete confirmation dialog? When 'yes' is clicked, the message should be deleted, and when 'no' is clicked, the delete operation should be canceled. At present, this is how it looks in my view: <a href ...
Experiencing an issue while implementing the Twitter Typehead feature with an object array. For a demonstration, please check out the JSBin provided at http://jsbin.com/buyudaq/edit?html,js,console,output Below is the serialized object array containing p ...
Provided a set of elements (number unknown) where some elements should remain hidden: <div id="root"> <div> 1</div> <div class="hide"> 2</div> <div class="hide"> 3</div> <div class="hide"&g ...