CODEWITHSUNDEEP
three.jsbackgroundorbitcontrols
cioara vopsita
cioara vopsita

Reputation: 21

Three.js Object Disappears Behind Background Image When Scrolling with OrbitControls

Three.js Community,

I'm working on a Three.js project where I have a 3D object displayed over a full-screen background image. I'm using OrbitControls to allow users to rotate and zoom into the scene. However, I've encountered an issue where the 3D object seems to disappear or get hidden behind the background image when I scroll or zoom out.

I'm using Three.js r147. The 3D object is a Mesh group.

Whenever I zoom out or scroll using the mouse wheel, the 3D object starts clipping through the background or completely disappears, as if it's going behind the background image. This issue seems to persist regardless of the camera's far plane settings.

I've tried adjusting the camera's near and far plane values to ensure they encapsulate the entire scene, but the issue persists.

Experimented with different camera positions and OrbitControls settings, but the problem remains.

How can I prevent the 3D object from disappearing or clipping through the background image when zooming out or scrolling? Are there specific OrbitControls settings or camera configurations that I need to adjust to resolve this issue? I appreciate any guidance or suggestions you could provide to help resolve this problem. Below is a simplified version of my code setup:

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 5000);
...
renderer = new THREE.WebGLRenderer(
            {
                antialias: true,
                alpha: false,
                preserveDrawingBuffer: true,

            }
        )
...
controls = new OrbitControls(this.camera, this.renderer.domElement)
...
const loader = new THREE.TextureLoader();

loader.load('path/to/your/image.jpg', function(texture) {
    scene.background = texture;
}, undefined, function(error) {
    console.error('An error happened while loading the texture.', error);
});

Upvotes: 1

Views: 259

Answers (1)

Nephelococcygia
Nephelococcygia

Reputation: 1131

It is most likely not behind the background that your object is disappearing.

On PerspectiveCamera you have near and far properties. Those properties defines a "clipping space" (viewing frustum) where you can see an object or not. The further you get from your object, the closest you get to the far clipping plane, "cutting" your object. If you wish to be able to see your object from a further distant, you need to increase the far property of the PerspectiveCamera.

Far clipping plane is green on this image, showing a Camera debug view (link). enter image description here

Upvotes: 1

Related Questions