Level of detail on center

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)


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

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.

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

Nothing for now?

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.

Thank you !