Level of detail on center

Questions
1

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
LOD11676×742 19.6 KB

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

LOD2
LOD21892×642 23.9 KB

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
LOD31920×657 19.6 KB

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

2

Nothing for now?

3

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.

4

Thank you !