How to remove any loaded Object like 3D Model using OBJLoader and MTLLoader and text

Questions
1

Hello,

I have uploaded 3D model using OBJLoader and MTLLoader. I also added 2D text on marker.
now I want to remove that selected objects on click of remove button.
I also get specific object with uuid and name.
now How can i remove that object from scene ?

I tried following:

const selectedObject = this.scene.getObjectByName(name);
this.scene.remove(selectedObject);

but, I got following error:

Uncaught TypeError: Cannot read property 'matrixWorld' of null
    at TransformControls.updateMatrixWorld (TransformControls.js:223)
    at Scene.updateMatrixWorld (three.module.js:8820)
    at WebGLRenderer.render (three.module.js:23792)
    at ImageAugmentationCreator.renderCanvas (imageAugmentationCreator.tsx:1344)
    at ImageAugmentationCreator.animate (imageAugmentationCreator.tsx:1320)

Thanks in advanced.

2

You probably have to detach the mesh from the controls before removing it from the scene. Try this:

const selectedObject = this.scene.getObjectByName(name);
control.detach( selectedObject );
this.scene.remove(selectedObject);
3

what kind of control ?
I have bind two controls transformControl and DragControl.
If I go for transformControl to detach this selectedObject, then it’s showing that It expecting 0 param in “this.transformControl.detach(selectedObject)” !!!

4

I mean TransformControls (which is mentioned in your error).

Sorry, the code should look like so:

const selectedObject = this.scene.getObjectByName(name);
control.detach();
this.scene.remove(selectedObject);
1 Like
5

But it showing me error:

Expected 0 arguments, but got 1.

6

You are replying to quick^^. I’ve update the code in my last post. The first snippet was not correct.

7

working fine. Now i can remove objects from scene :slight_smile:

Thank you very much @Mugen87

2 Likes
8

Hi @Mugen87,

I have notice that when we remove all content like all object.
but in transformControl, we can see all object in children of transformControl.
so what is happening over here is, if I remove all object, but there i can found transformControl arrows.
How we can remove that object from transformControl children ?

9

Sorry, I’m afraid I don’t understand what you mean. Can you please try to explain in more detail?

10

We attach object in transformConotrl.
now I remove that Object like we done before.
but after successfully remove that object, that transformControl still there I think
and show me error:

Uncaught TypeError: Cannot read property 'matrixWorld' of null
    at TransformControls.updateMatrixWorld (TransformControls.js:223)
    at Scene.updateMatrixWorld (three.module.js:8820)
    at WebGLRenderer.render (three.module.js:23792)
    at TransformControls.ImageAugmentationCreator.renderCanvas (imageAugmentationCreator.tsx:1343)
    at TransformControls.dispatchEvent (three.module.js:172)
    at TransformControls.set (TransformControls.js:203)
    at TransformControls.attach (TransformControls.js:167)
    at DragControls.<anonymous> (imageAugmentationCreator.tsx:826)
    at DragControls.dispatchEvent (three.module.js:172)
    at HTMLCanvasElement.onDocumentMouseMove (DragControls.js:108)
11

Sry, I’m not able to reproduce. Please demonstrate the issue with this live example. I’ve already included TransformControls.

12

I am not able to provide you live example.
I can give you steps:

  1. added 3d model
  2. remove 3d model as we remove using snippet
  3. after that you can find transformControl on marker, where your 3d Model placed, when you move your mouse over and there, there will be one area where your mouse pointer will change with hand.
  4. at that point you will find error in your console.

I hope this will help you to understand my issue.

13

I need this same in my application also. I tried this same. But it showing Control.detach is not a function. I am using dragcontrol.js , so how can I modify this? Please help me. I understand your issue Sujan_Patel. Because I am also in the same stage. If you know that. Please mention here

14

I got it. You need to make the geometry and material of the object as undefined.
object.material=undefined;
object.geometry=undefined;
scene.remove(object);

16

It’s working for me
Thanks @jaya_kannan :slight_smile:

1 Like