Removing models from scene

I am generating geo like this:

 for (i = 0; i < num; i++)
    {

        Placement = Placement + 1;

        Plate = new THREE.Mesh(geometry, material);

       
        Plate.position.y = typFlrHeight * platePlacement - typFlrHeight + (_height / 2);

        scene.add(Plate);
    }

So there could be up to 50 of these plates in the scene.

if I use the “scene.remove(Plate);” code it only removes one of them. So what is the name of the others? Plate1, Plate2, Plate3…I’m new to typescript and three.js so I don’t know how to capture this data like in Unity or others.

I deleted this topic because I thought I figured it out…but I seem to have another issue.

I place all the Plates in an array, then grab them all and remove them from the scene like this:

for (var i = plateArray.length - 1; i >= 0; i--)
    {
        obj = plateArray[i];
        scene.remove(obj);
    }

Then clear the array…but one of the plates is still there, although not visible…it’s still showing in the console.

for (var i = plateArray.length - 1; i > -1; i--)

i > -1

Tried it and it is still there. Before I grab them to remove them they are all there in the array, after I remove them I clear the array and check again and it’s there…/

it would be nice to be able to do a for each bam gone…

Can you share the entire code using in your page?

var plateArray=[];
for (i = 0; i < num; i++) {
        Placement = Placement + 1;
        plateArray[i] = new THREE.Mesh(geometry, material);       
        plateArray[i] .position.y = typFlrHeight * platePlacement - typFlrHeight + (_height / 2);
        scene.add(plateArray[i] );
    }
for (var i = plateArray.length - 1; i >= 0; i--) {
        obj = plateArray[i];
        scene.remove(obj);
    }
1 Like

Cannot share it. there’s too much work stuff in it.

Chaser, the remove function is in another function and saying the array isn’t defined…but it wasn’t saying it the other way.

___.html (3.1 KB)

1 Like

All I see is two buttons?

Alternative? If you are going to add and remove them all several times, make them all children of a single parent object and then add or remove the parent object to/from the scene?

try this

let group = new THREE.Group()
scene.add(group)
 for (i = 0; i < num; i++)
    {

        Placement = Placement + 1;

        Plate = new THREE.Mesh(geometry, material);

       
        Plate.position.y = typFlrHeight * platePlacement - typFlrHeight + (_height / 2);

        group.add(Plate);
    }

scene.remove(group)

@phil_crowther was thinking of that but being new to three.js, I didn’t know how to do that.

@Qiumeng12 I will try that. I actually got it to work by adding them to an array. Then grabbing them from the array and deleting them and clearing the array. But doing so I am having an issue grabbing individual models to get info from them.

But I am thinking this has nothing to do with the array and just me not knowing how to access objects correctly.

@rrrr_rrrr …I see it now.

I have been working with three.js for several years, but am just getting to understand all the things I can and cannot do with objects. Part of this is new to me and part is very old, because I also used objects as basic building blocks when writing 3D programs on an Amiga over 35 years ago. (But back then, my primary motivation was to keep points within +/- 127 units of the origin - where the hardware could handle them.)

Regarding the “group” solution, I am not sure if that allows you to continue to continue to move objects separately once they are in the group. The parent/child arrangement does. It would be implemented in basically the same way.

Instead of creating a group, you would create an object to act as the parent, e.g.:
let parent = new THREE.Object3D();
scene.add(parent)

You can create an array to store the addresses of all the children, e.g.:
var child = [0];
child[num] = 0;

Then at the beginning of the loop, you would add:
child[i] = new THREE.Object3D();

You would position and rotate each child (relative to the parent) as in the example.

You would replace the last line of the loop with:
parent.add(child[i]);

When you want to remove all the children, you could simply use:
scene.remove(parent);

One possible downside with this approach is that if you are creating a lot of children - each with their own “structure” and values that have to be computed - this could add a lot of overhead that could slow things down quite a bit. So you might want to limit this to children that have to move independently and put the rest in a group.

1 Like

@phil_crowther I did a deep dive last night and made some headway. I can still grab them individually any of the ways. I’ll play around with groups snd parenting everything to main objects. But I get it now how to do it in here.

One question……I’ve never seen this “let” way of declaring things. What is this? Edit: I see what it is now.

@Qiumeng12 just a FYI, removing the group from the scene doesn’t remove the models in the group. Just did a test and those models added to the group are still in the scene after group removal. they are not there but still in the scene.

Unless I am not disposing them properly.

The “let” command is a commonly used method of declaring variables. However, from what I am reading, it is limited in scope and the variable may not be accessible elsewhere in the program. As a matter of practice, I tend to assign my global variables at the beginning of the program and generally use the “var” command. (But I am no expert, having just learned js a few years ago.)

EDIT
I case anyone stumbles across this response, it is apparently completely wrong (except for the last sentence). According to the latest version of the three.js manual - the “var” command is now deprecated and “there is no reason to use var, EVER”. Instead, you should use const (for constants) or let (where values can change). So apparently, let is not limited in range. Next, they’ll be forcing me to us “this”!

1 Like

I will have to check that out.

I have found that objects persist if you have added them to the scene. So, lately, I have been careful with using the scene.add command, using it only for parent objects and for permanent objects like light and sound.

Another way to make an object disappear is with: object.visible = false;
Other less sophisticated approaches I have used over the years, are to hide the object within another object or out of (or beyond) viewing range.

But I expect that none of these are as effective as simply removing the object from the scene.