[Question] Check position for each THREE.Mesh() in THREE.Group()

Questions
1

I’m trying to make a game using THREE.js and it’s pretty much finished, all I need now is to add detection for colisions, which I was able to add when I made the 2D canvas version, but I’m having trouble checking the position of each Mesh in a Group.

Googling around I found

myGroup3D.children.forEach( 
    function(pChild){ 
         
    } 
);

as a way to go through the group’s children, but when I emplemented it like

this.kill = function () {
            invaderGroup3D.children.forEach(function (invader) {
                if(invader.position.x <= -250){
                    invaderGroup3D.remove(invader);
                }

            });
        }

checking if the position of x of every mesh inside the group goes behind the groundPlane which is has a length of 500, so -250 to 250
if it goes under the -250, it should be removed and then add points (I’ll do the point system last, as well as more rules, but testing this easy one as proof of concept)
but when each one of the Mesh reaches the remove “line”, it just doesn’t get removed.

Am I doing it wrong?

2

Hi!
Maybe makes sense, instead of removing a mesh, simply make it invisible and then re-use it.
And when you know position of the group and position of a mesh in the group you can find mesh’s position by adding that position to group’s position. Or use group.localToWorld(), passing a clone or a copy of mesh’s position into it.

3

Hey, thanks for answering, I’m not sure I follow, the game has a function that adds invaders to the invader group “randomly”:

this.criarInvasores = function () {//cria os invasores
            invaderGroup3D = new THREE.Group();

            for ( var i=0; i<24; i++){//o ciclo repete 23 vezes pq e um array o i é o indice do invasor. unico sitio onde se pode mudar a quantidade de invasores

                var max = 50;//
                var min = -5;
                var x=150+(i)*100;// primeiros 30 sao a margem e os ultimos é o incremento ou seja o espacamento e 30(15+15)
                var y=(90)-(i%2)*Math.floor(Math.random() * (max - min + 1) ) + min;// randomizar a altura dos invasores

                var invaderGeometry = new THREE.BoxGeometry(15,15,15);
                var invaderMaterial = new THREE.MeshLambertMaterial({color: 0x444AAA});
                var invaderMesh = new THREE.Mesh(invaderGeometry, invaderMaterial);
                invaderMesh.position.x = x;
                invaderMesh.position.y = y;
                invaderMesh.position.z = 0;

                invaderGroup3D.add(invaderMesh);
            }

            scene.add(invaderGroup3D);

and then said group is moving in the x axis negatively.

invaderGroup3D.position.x-=game.speedInvasores;

So i’m trying to check when each of the invaders goes past the end of the plane ( x <= -250) and it then removes it and adds points to the score, but even trying to just add 100 points to the score and just console.log(score) it doens’t change even if all of the invaders go past the -250 line…

So I’m not following how comparing the invader’s position in the group to the one whose opacity was changed to invisible would happen in a case like mine.
Could you clarify a little better how I would implement it in this case?