# Additive LOD rendering?

**URL:** <https://discourse.threejs.org/t/additive-lod-rendering/81300>\
**Category:** Questions\
**Tags:** performance\
**Created:** [April 16, 2025, 3:41pm UTC](https://discourse.threejs.org/t/additive-lod-rendering/81300 "2025-04-16T15:41:56Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jim\_Rend](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jim_rend/32/56245_2.png) [@Jim\_Rend](https://discourse.threejs.org/u/Jim_Rend)\
**Post date:** [April 16, 2025, 3:41pm UTC](https://discourse.threejs.org/t/additive-lod-rendering/81300/1 "2025-04-16T15:41:56Z")

</div>

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.

> **[Detailed - Drei](https://drei.docs.pmnd.rs/performances/detailed#detailed)**

---

<div class="post-metadata">

**Author:** ![Vardan\_Betikyan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vardan_betikyan/32/34487_2.png) [@Vardan\_Betikyan](https://discourse.threejs.org/u/Vardan_Betikyan)\
**Post date:** [April 16, 2025, 4:02pm UTC](https://discourse.threejs.org/t/additive-lod-rendering/81300/2 "2025-04-16T16:02:58Z")

</div>

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 ):

```