所以我的问题是,我想添加我的自定义组件到我的场景。但是这些自定义组件将在不同的文件中定义。所以当我定义我的自定义组件时所有三纤维组件都显示为
Cannot find name 'planeGeometry'. Did you mean 'PlaneGeometry'?
我的应用是用Typescript写的。我在Javascript的沙箱中尝试了它,它工作得很好。也许我没有正确设置@react-three/fiber,因为即使向组件添加道具也会产生错误。
假设我想在我的场景中添加一个平面网格,平面网格在地面中定义。
Scene.ts:
import {Ground} from './Ground' const Scene =()=>{ return ( <Canvas> <Ground /> </Canvas> ); };
Ground.ts
import {useTexture} from '@react-three/drei'; export const Ground = () => { const groundUrl = "<url_here>"; const texture = useTexture(groundUrl); return ( <mesh> <planeGeometry args={[120, 120]} /> <meshStandardMaterial map={texture} /> </mesh> ); };
这里的组件mesh, planeGeometry, meshStandardMaterial都给出了没有找到组件的错误。我还漏了什么步骤吗。我不是很熟悉Typescript,所以我可能错过了一些东西。
所以我意识到。ts和。tsx之间的区别在于。tsx包含JSX组件和函数以及其他逻辑,而。ts文件只能包含包含组件的函数和逻辑。这就是.tsx文件可以包含这些组件的原因。虽然这些组件由于某些原因仍然不接受props,但我可以将props作为键值对传递。