使用 OrbitControls 滚动时，Three.js 对象消失在背景图像后面

Question

Three.js 社区，

我正在开发一个 Three.js 项目，其中有一个 3D 对象显示在全屏背景图像上。我使用 OrbitControls 来允许用户旋转和缩放场景。但是，我遇到了一个问题：当我滚动或缩小时，3D 对象似乎消失或隐藏在背景图像后面。

我正在使用 Three.js r147。 3D 对象是一个网格组。

每当我缩小或使用鼠标滚轮滚动时，3D 对象就会开始剪切背景或完全消失，就好像它位于背景图像后面一样。无论相机的远平面设置如何，此问题似乎仍然存在。

我尝试调整相机的近平面和远平面值以确保它们封装整个场景，但问题仍然存在。

尝试了不同的相机位置和 OrbitControls 设置，但问题仍然存在。

如何防止 3D 对象在缩小或滚动时消失或剪裁背景图像？ 我是否需要调整特定的 OrbitControls 设置或相机配置才能解决此问题？ 感谢您提供的任何指导或建议来帮助解决此问题。以下是我的代码设置的简化版本：

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);
});

Answer 1

您的物体很可能不在背景后面消失。

在

PerspectiveCamera

上，您具有

near

和

far

属性。 这些属性定义了一个“剪切空间”（视锥体），您可以在其中看到或看不到对象。您距离对象越远，您就越接近

far

剪切平面，“剪切”您的对象。如果您希望能够从更远的距离看到您的物体，您需要增加

far

的

PerspectiveCamera

属性。

远剪裁平面在此图像上为绿色，显示

Camera

调试视图（链接）。