英文:
R3F - PerspectiveCamera seems broken or objets are further away than they should
问题
我有一个关于R3F的小问题，经过调查和寻找解决方案后，我一无所获，所以我会在这里尝试一下。
问题出在PerspectiveCamera上，我不知道为什么，不知道是与声明相关还是与R3F本身相关，但无论我如何改变网格或相机的位置，都无法将网格靠近相机：
我正在按照不同的教程来查找为什么会发生这种情况，但我还没有找到答案，这是场景应该是这样的（基于我找到的最新教程）：
这是代码，两个场景使用完全相同的代码：
import { Canvas } from '@react-three/fiber'
import { PerspectiveCamera } from '@react-three/drei';
import * as THREE from 'three';
function App() {
return (
<Canvas>
<PerspectiveCamera makeDefault position={[0,1,5]} />
<mesh position={[0,0.5,0]}>
<sphereGeometry args={[0.5, 32, 32]} />
<meshStandardMaterial color='#dddddd' />
</mesh>
<mesh rotation={[-Math.PI/2,0,0]}>
<planeGeometry args={[7,7]} />
<meshStandardMaterial color='#1ea3d8' />
</mesh>
<ambientLight args={['#ffffff', 1]} />
</Canvas>
)
}
export default App;
我是否漏掉了什么？希望问题不是由于我现在没有看到的愚蠢的事情引起的。感谢你的帮助。
英文:
I have a small problem with R3F and after investigating and searching for a solution I end up with nothing, so I'll try here.
The problem is with the PerspectiveCamera, I don't know why, if is something related with the declaration or with R3F itself but no matter how I change positions of the meshes or the camera, there is no way to bring closer the meshes to the camera:
I'm following different tutorials two see why is happening this but I didn't find an answer yet, this is how the scene should be (based in the last tutorial I've found):
This is the code, is exactly the same code for both scenes:
import { Canvas } from '@react-three/fiber'
import { PerspectiveCamera } from '@react-three/drei';
import * as THREE from 'three'
function App() {
return (
<Canvas>
<PerspectiveCamera makeDefault position={[0,1,5]} />
<mesh position={[0,0.5,0]}>
<sphereGeometry args={[0.5, 32, 32]} />
<meshStandardMaterial color='#dddddd' />
</mesh>
<mesh rotation={[-Math.PI/2,0,0]}>
<planeGeometry args={[7,7]} />
<meshStandardMaterial color='#1ea3d8' />
</mesh>
<ambientLight args={['#ffffff', 1]} />
</Canvas>
)
}
export default App;
Is there something that I'm missing? I hope the problem is not caused by a stupid thing that I'm not seeing right now.. Thanks for your help
答案1
得分: 1
是的... 我忘了渲染器大小：
return (
<div style={{width: window.innerWidth, height: window.innerHeight }}>
<Canvas>
<PerspectiveCamera makeDefault position={[0,1,5]} />
<mesh position={[0,0.5,0]}>
<sphereGeometry args={[0.5, 32, 32]} />
<meshStandardMaterial color='#dddddd' />
</mesh>
<mesh rotation={[-Math.PI/2,0,0]}>
<planeGeometry args={[7,7]} />
<meshStandardMaterial color='#1ea3d8' />
</mesh>
<ambientLight args={['#ffffff', 1]} />
</Canvas>
</div>
)
英文:
YES... I forgot the renderer size:
return (
<div style={{width: window.innerWidth, height: window.innerHeight }}>
<Canvas>
<PerspectiveCamera makeDefault position={[0,1,5]} />
<mesh position={[0,0.5,0]}>
<sphereGeometry args={[0.5, 32, 32]} />
<meshStandardMaterial color='#dddddd' />
</mesh>
<mesh rotation={[-Math.PI/2,0,0]}>
<planeGeometry args={[7,7]} />
<meshStandardMaterial color='#1ea3d8' />
</mesh>
<ambientLight args={['#ffffff', 1]} />
</Canvas>
</div>
)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论