Hiding multiple objects with the same name?

Questions
1

Hi so i’m trying to hide multiple tree meshes if they are a certain distance away but i can’t seem to do it? any idea’s:

 scene.traverse(function(child) {
 
  for (let i = 0; i < child.length; i++) {
 

  if (child.name.includes('Tree')) {
       var distance = pl.position.distanceTo( child[i].position );
   if (distance >= 20)
   {
       child[i].visible = false;
       console.log('far', child[i]);
   }
   else {
       child[i].visible = true;
       console.log('close', child[i]);
   }
   
  }

  }
});
2

https://threejs.org/docs/index.html?q=lod#api/en/objects/LOD

you can get an impression of how it looks here Re-using geometry and level of detail - CodeSandbox the trick is to give it an empty mesh if you want it to disappear at a certain distance.

3

When using traverse(), you automatically process all objects in the scene’s hierarchy. There is no need to additionally process the children of an object.

Besides, you don’t want to work with the local position of a 3D object. You should extract the position in world space and then make your distance test. You can use Object3D.getWorldPosition() for this.

4

BTW: The official THREE.LOD example with plain three.js looks like so: three.js webgl - level of detail