反应三纤维显示：“Uncaught Div 不是 THREE 命名空间的一部分！您忘记扩展了吗？”

Question

反应三纤维显示：“Uncaught Div 不是 THREE 命名空间的一部分！您忘记扩展了吗？”

Jeo*_*uke 12 3d three.js reactjs react-three-fiber

我一直在尝试向我正在构建的应用程序添加滚动区域，但我不断收到此错误：

Uncaught Div 不属于 THREE 命名空间！您忘记延长了吗？

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

这是应用程序组件的代码（错误似乎源自：

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;

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 4

当您在画布内使用 HTML 时，只需使用Html来自的帮助程序包装您的 HTML @react-three/drei。

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	4 年，9 月前
查看次数：	7038 次
最近记录：	3 年，2 月前