react-three fiber shows: "Uncaught Div is not part of the THREE namespace! Did you forget to extend?"

Question

i have been trying to add a scroll area to my the app i was building but i just keep getting this error:

Uncaught Div is not part of the THREE namespace! Did you forget to extend?

I'm very new to three.js and it is even more compicated because i use React.

Here is the code for the App Component(where the error seems to originate from:

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;

score 4 · Answer 1 · answered Jan 01 '23 at 09:02

When you are using HTML inside the canvas, just wrap your HTML with Html helper from @react-three/drei.

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

score 0 · Answer 2 · answered Jan 27 '23 at 11:19

0

Because your div inside the Canvas element.

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

answered Jan 27 '23 at 11:19

BB.

169
1
12

Qwerty · Answer 3 · 2023-03-18T17:57:46.173

I got this same error and resolved the issue just by wrapping my canvas inside a react fragment.

Below is a take This React Fiber Three Doc recommended

Using 3rd-party objects declaratively

The extend function extends React Three Fiber's catalogue of JSX elements. Components added this way can then be referenced in the scene-graph using camel casing similar to other primitives.

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

react-three fiber shows: "Uncaught Div is not part of the THREE namespace! Did you forget to extend?"

3 Answers3