Why I only see parts of my BoxGeometry object in ThreeJS on zoom in/zoom out?

Question

When the camera move back and forth a little, my Box object kind of disappear (screenshots below)

Camera object:

camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
camera.position = new THREE.Vector3(0,-80,850);

I only zoom in/out using my mouse wheel.

The Boxes size:(48*1.5,70*1.5, 0.5)

What is causing this and how can I fix it?

Thanks !! :)

Answer 1

You're having precision issues because the range of the camera is too high.

Try with a smaller range:

camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);

Also, change camera.position = new THREE.Vector3(0,-80,850) to camera.position.set(0,-80,850). This pattern may not work in the future.