在@react-three/fiber场景中添加自定义组件

Question

所以我的问题是，我想添加我的自定义组件到我的场景。但是这些自定义组件将在不同的文件中定义。所以当我定义我的自定义组件时所有三纤维组件都显示为

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，所以我可能错过了一些东西。

Answer 1

所以我意识到。ts和。tsx之间的区别在于。tsx包含JSX组件和函数以及其他逻辑，而。ts文件只能包含包含组件的函数和逻辑。这就是.tsx文件可以包含这些组件的原因。虽然这些组件由于某些原因仍然不接受props，但我可以将props作为键值对传递。