React-Three Fiber显示： "Uncaught Div is not part of the THREE namespace! Did you forget to extend?"

我一直试图添加一个滚动区域到我的应用程序，我正在建设，但我只是不断得到这个错误:

未捕获的Div不是THREE命名空间的一部分!你忘记延长了吗?

我对three.js非常陌生，因为我使用React，所以它更复杂。

下面是App组件的代码(错误似乎来自:

import './App.css';
import Header from "./Header";
import WebFont from "webfontloader";
import { useEffect, useRef } from "react";
import { Canvas } from "@react-three/fiber";
import Intro from "./Intro";
import { Stars } from "@react-three/drei";
import About from "./About";
import state from "./state";
function App() {
useEffect(() => {
WebFont.load({
google: {
families: ["Cookie", "Lora", "Playfair Display", "Inknut Antiqua", "Cormorant", "Share Tech Mono"]
}
});
}, []);
const domContent = useRef();
const scrollArea = useRef();
const onScroll = (e) => (state.top.current = e.target.scrollTop);
useEffect(() => void onScroll({ target: scrollArea.current }), []);
return (
<div className="App">
<Header />
<Canvas camera={{ position: [0, 0, 120], fov: 70 }}>
<Stars radius={300} depth={60} factor={7} fade={true} />
<pointLight color="white" position={[5, 2, 5]} intensity={1.3} />
<Intro domContent={domContent} />
<About domContent={domContent} />
</Canvas>
<div className="scrollArea" ref={scrollArea} onScroll={onScroll}>
<div style={{ position: "sticky", top: 0 }} ref={domContent}></div>
<div style={{ height: `${state.pages * 100}vh` }}></div>
</div>
</div>
);
}
export default App;

当您在画布内使用HTML时，只需将您的HTML与@react-three/drei的Htmlhelper包装。

import { Html } from "@react-three/drei"
...
...
...
<Html>
<div className={'title'}>
<span className={'slogan'}>Slogan</span>
</div>
</Html>

因为你的div在Canvas元素里面。

return (
<div>
Something should be here
<div>
<Canvas>
...
...
...
<Canvas>
)

我得到了同样的错误，并解决了这个问题，只是通过包装我的画布内的反应片段。

下面是takeReact Fiber Three Doc推荐

声明性使用第三方对象

扩展函数扩展React Three Fiber的JSX元素目录。组件添加这种方法可以在使用camel的场景图中引用与其他原语类似的大小写

<>
<Canvas camera={{ position: [0, 0, 120], fov: 70 }}>
{ TODO }
</Canvas>
</>

相关内容

最新更新

热门标签：