ThreeJS: Remove object from scene

Question

I'm using ThreeJS to develop a web application that displays a list of entities, each with corresponding "View" and "Hide" button; e.g. entityName View Hide. When user clicks View button, following function is called and entity drawn on screen successfully.

function loadOBJFile(objFile){                 /* material of OBJ model */                                               var OBJMaterial = new THREE.MeshPhongMaterial({color: 0x8888ff});     var loader = new THREE.OBJLoader();     loader.load(objFile, function (object){         object.traverse (function (child){             if (child instanceof THREE.Mesh) {                 child.material = OBJMaterial;             }         });         object.position.y = 0.1;         scene.add(object);     });      }  function addEntity(object) {     loadOBJFile(object.name); } 

And on clicking Hide button, following function is called:

function removeEntity(object){     scene.remove(object.name); } 

The problem is, entity is not removed from screen once loaded when Hide button is clicked. What can I do to make Hide button to work?

I did small experiment. I added scene.remove(object.name); right after scene.add(object); within addEntity function and as result, when "View" button clicked, no entity drawn (as expected) meaning that scene.remove(object.name); worked just fine within addEntity. But still I'm unable to figure out how to use it in removeEntity(object).

Also, I checked contents of scene.children and it shows: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Complete code: http://devplace.in/~harman/model_display1.php.html

Please ask, if more detail is needed. I tested with rev-59-dev and rev-60 of ThreeJS.

Thanks. :)

Answer 1

I think seeing your usage for addEntity and removeEntity code would be helpful, but my first thought is are you actually setting the object.name? Try in your loader just before scene.add(object); something like this:

object.name = "test_name"; scene.add(object); 

What might be happening is the default "name" for an Object3D is "", so when you then call your removeEntity function it fails due to the scene objects name being ""

Also, I notice you pass in object.name to your loader? Is this where your storing the URL to the resource? If so, I would recommend using the Object3D's built in .userData method to store that information and keep the name field for scene identification purposes.

Edit: Response to newly added Code

First thing to note is it's not a great idea to have "/" in your object name, it seems to work fine but you never know if some algorithm will decide to escape that string and break your project.

Second item is now that I've seen your code, its actually straight forward whats going on. Your delete function is trying to delete by name, you need an Object3D to delete. Try this:

function removeEntity(object) {     var selectedObject = scene.getObjectByName(object.name);     scene.remove( selectedObject );     animate(); } 

Here you see I lookup your Object3D in the Three.js Scene by passing in your object tag's name attribute. Hope that helps