英文:
react-three-fiber OrbitControls camera settings don't take effect
问题
我正在尝试使用react-three-fiber和drei的OrbitControls来渲染一个巨大的模型。模型非常巨大，超出了摄像机的far平面，因此被剪裁掉了。但是，无论我如何设置摄像机的far平面，OrbitsControls都会忽略它并使用默认值。我该如何解决这个问题？
<Canvas>
<ambientLight />
<pointLight position={[0, 0, 10]} />
<OrbitControls
ref={controlsRef}
camera={theCamera.current} // 尝试使用/不使用这一行（使用这一行只会创建一个空画布）
makeDefault // 尝试使用/不使用这一行
/>
<PerspectiveCamera
projectionMatrix={[75, 2, 1, 10000]}
ref={theCamera}
far={100000} // 尝试设置成这样
makeDefault // 尝试使用/不使用这一行
/>
{...巨大的模型...}
</Canvas>
英文:
I'm trying to render a huge model using react-three-fiber and drei's OrbitControls. The model is so huge that gets bigger that the far camera plane and gets clipped. But however I set the camera's far plane, the OrbitsControls ignores it and uses the default value. How can I fix this?
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
<Canvas>
<ambientLight />
<pointLight position={[0, 0, 10]} />
<OrbitControls
ref={controlsRef}
camera={theCamera.current} // tried with/without this line (using this line just creates an empty canvas)
makeDefault // tried with/without this line
/>
<PerspectiveCamera
projectionMatrix={[75, 2, 1, 10000]}
ref={theCamera}
far={100000} // even tried to set it like this
makeDefault // tried with/without this line
/>
{...TheHugeModel...}
</Canvas>
<!-- end snippet -->
答案1
得分: 1
以下是翻译好的内容：
要正确修改（默认）相机，请尝试在 Canvas 中传递 camera 属性：
<Canvas camera={{
near: 0.01,
far: 10000,
}}>
<ambientLight />
<pointLight position={[0, 0, 10]} />
<OrbitControls makeDefault />
{/* ...巨大的模型... */}
</Canvas>
你也可以使用 useThree 钩子访问 camera 对象 - https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
const { camera } = useThree();
useEffect(() => {
camera.far = 50000;
camera.updateProjectionMatrix();
}, [])
英文:
To properly modify the (default) camera, try passing the camera prop in the Canvas:
<Canvas camera={{
near: 0.01,
far: 10000,
}}>
<ambientLight />
<pointLight position={[0, 0, 10]} />
<OrbitControls makeDefault />
{...TheHugeModel...}
</Canvas>
You can also access the camera object with the useThree hook - https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
const { camera } = useThree();
useEffect(() => {
camera.far = 50000;
camera.updateProjectionMatrix();
}, [])
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论