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

User · Answer

You can use this  function removeEntity object        var scene   document querySelectorAll  scene                                    clear the objects from the scene     for  var i   0  i  lt  scene length  i                                           loop through to get all object in the scene     var scene  document getElementById  scene                                          scene removeChild scene childNodes 0                                             remove all specified objects

User · Answer

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

User · Answer

I had The same problem like you have  I try this code and it works just fine  When you create your object put this object is ob   true  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           add this code         object is ob   true           scene add object                   function addEntity object        loadOBJFile object name       And then then you delete your object try this code   function removeEntity object       var obj  i              for   i   scene children length - 1  i  gt   0   i --                     obj   scene children  i                    if   obj is ob                        scene remove obj                                        Try that and tell me if that works  it seems that three js doesn t recognize the object after added to the scene  But with this trick it works

User · Answer

clearScene  function         var objsToRemove     rest scene children  1         each objsToRemove  function  object               scene remove object                this uses undescore js to iterrate over all children  except the first  in a scene  it s part of code I use to clear a scene   just make sure you render the scene at least once after deleting  because otherwise the canvas does not change  There is no need for a  special  obj flag or anything like this   Also you don t delete the object by name  just by the object itself  so calling  scene remove object      instead of scene remove object name   can be enough  PS    each is a function of underscore js

User · Answer

THIS WORKS GREAT - I tested it  so  please SET NAME for every object   give the name to the object upon creation       mesh name    nameMeshObject     and use this if you have to delete an object       delete3DOBJ  nameMeshObject           function delete3DOBJ objName           var selectedObject   scene getObjectByName objName           scene remove  selectedObject            animate            open a new scene   add object   delete an object and create new

User · Answer

I started to save this as a function  and call it as needed for whatever reactions require it   function Remove        while scene children length  gt  0        scene remove scene children 0           Now  you can call the Remove    function where appropriate

User · Answer

When you use   scene remove object   The object is removed from the scene  but the collision with it is still enabled    To remove also the collsion with the object  you can use that  for an array     objectsArray splice i  1    Example    for  var i   0  i  lt  objectsArray length  i            each object       var object   objectsArray i          remove all objects from the scene       scene remove object          remove all objects from the array       objectsArray splice i  1

User · Answer

If your element is not directly on you scene go back to Parent to remove it    function removeEntity object            var selectedObject   scene getObjectByName object name           selectedObject parent remove  selectedObject

[javascript] ThreeJS: Remove object from scene

Examples related to javascript

Examples related to three.js