Additive LOD rendering?

Questions
1

I want to do LOD rendering except rather than showing different meshes I want to show more / less meshes. EG:

Far from camera

  • mesh1 is shown.

Close to camera

  • mesh1 is shown.
  • mesh2 is shown.

Very close to camera

  • mesh1 is shown.
  • mesh2 is shown.
  • mesh3 is shown.

Would this need to be a fully custom approach or is there a component for this?

I’m using React Fiber and Drei. There is a Detailed component but I can’t see how to make it work the way I need.

2

Something like this?

const Mesh1LOD = new THREE.LOD( );
const Mesh2LOD = new THREE.LOD( );
const Mesh3LOD = new THREE.LOD( );

// replace mesh with an empty object at certain distance from camera
Mesh1LOD.addLevel( Mesh1, 0 );
Mesh1LOD.addLevel( new THREE.Object3D( ), CameraVeryFar );

Mesh2LOD.addLevel( Mesh2, 0 );
Mesh2LOD.addLevel( new THREE.Object3D( ), CameraNear );

Mesh3LOD.addLevel( Mesh3, 0 );
Mesh3LOD.addLevel( new THREE.Object3D( ), CameraVeryNear ):
1 Like