# Level of detail on center

**URL:** <https://discourse.threejs.org/t/level-of-detail-on-center/26634>\
**Category:** Questions\
**Tags:** lod\
**Created:** [May 26, 2021, 1:01pm UTC](https://discourse.threejs.org/t/level-of-detail-on-center/26634 "2021-05-26T13:01:10Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![vas4oo](https://avatars.discourse-cdn.com/v4/letter/v/a88e57/32.png) [@vas4oo](https://discourse.threejs.org/u/vas4oo)\
**Post date:** [May 26, 2021, 1:01pm UTC](https://discourse.threejs.org/t/level-of-detail-on-center/26634/1 "2021-05-26T13:01:11Z")

</div>

Hello, I have a question concerning Level of detail in Three JS. I have created a demo project for this purpose. I have a long cylinder in my scene

```
        const lod = new THREE.LOD();

        const geometry = new THREE.CylinderGeometry( 50, 50, 2000, 32 );
        const material = new THREE.MeshStandardMaterial( {color: 0xffff00, flatShading: true} );
        const cylinder = new THREE.Mesh( geometry, material );
        lod.addLevel(cylinder, 800);

        const geometry1 = new THREE.CylinderGeometry( 50, 50, 2000, 32 );
        const material1 = new THREE.MeshStandardMaterial( {color: 0xffffff, flatShading: true} );
        const cylinder1 = new THREE.Mesh( geometry1, material1 );
        lod.addLevel(cylinder1, 400)

        this.scene.add(lod);

```

 ![LOD1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/f/4f5bd5a518001eb02fb99f874b9513f47a71bb33.png)

Looks like this. And the LOD is working. As you can see in the second image.

 ![LOD2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/8/983dd709e206d8c362b3b00eba02602ca3714329.png)

But the problem is that it measure the distance between the center (the LOD position is 0,0,0) and the camera. If I zoom to the end of the cylinder the the LOD is not going to work.

 ![LOD3](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/8/18aae63ed9e8d27c90399d5e8cff26040f212a87.png)

Is there a way to deal with this, and to trigger the level change of LOD when I’m zooming to end of geometry (and still be able to work normal when I’m zooming to the center).

---

<div class="post-metadata">

**Author:** ![vas4oo](https://avatars.discourse-cdn.com/v4/letter/v/a88e57/32.png) [@vas4oo](https://discourse.threejs.org/u/vas4oo)\
**Post date:** [May 26, 2021, 3:14pm UTC](https://discourse.threejs.org/t/level-of-detail-on-center/26634/2 "2021-05-26T15:14:28Z")

</div>

Nothing for now?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 26, 2021, 3:30pm UTC](https://discourse.threejs.org/t/level-of-detail-on-center/26634/3 "2021-05-26T15:30:32Z")

</div>

I can say for sure that you can’t use the default implementation of `THREE.LOD` for this use case.

You can try to create your own custom version of `THREE.LOD` and pass in a reference to your focus point (e.g. when using `OrbitControls` it is the `target` property) as a constructor parameter. You can then use this point in your custom code. You have to change at least `update()` and `raycast()` to make things work.

---

<div class="post-metadata">

**Author:** ![vas4oo](https://avatars.discourse-cdn.com/v4/letter/v/a88e57/32.png) [@vas4oo](https://discourse.threejs.org/u/vas4oo)\
**Post date:** [May 26, 2021, 4:45pm UTC](https://discourse.threejs.org/t/level-of-detail-on-center/26634/4 "2021-05-26T16:45:52Z")

</div>

Thank you !