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

Asked 18/8, 2021 at 22:36 Answered 24/6, 2024 at 11:53

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;

Mythos answered 18/8, 2021 at 22:36 Comment(0)

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>

Origen answered 1/1, 2023 at 9:2 Comment(0)

Because your div inside the Canvas element.

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

Origen answered 27/1, 2023 at 11:19 Comment(0)

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>
</>

Interstitial answered 18/3, 2023 at 16:53 Comment(0)

from here

If you try to add a standard HTML tag inside the React Three Fiber Canvas element, then you will get an error similar to Uncaught Error: R3F: Div is not part of the THREE namespace! Did you forget to extend?

The error happens because the React Three Fiber reconciler renders into a Three.js scene, and not the HTML document. So, a div, span, h1 or any other HTML tag will mean nothing to the Three.js renderer. Instead, you need to render it to the HTML document, and for that you use the React-DOM reconciler. This is a simple as putting your HTML tag outside the Canvas element.

Sherise answered 15/3, 2024 at 14:33 Comment(0)

Wrap up your html with Html coming from : import { Html } from "@react-three/drei";

Explaination: If you try to add a standard HTML tag inside the React Three Fiber Canvas element, then you will get a similar error to,

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

The error happens because the React Three Fiber reconciler renders into a Three.js scene, and not the HTML document. So, a div, span, h1 or any other HTML tag will mean nothing to the Three.js renderer.

Example ----------------------------------------------

this will work :

import { Html } from "@react-three/drei";
 ...
<Html>
  <div>Loader</div>
</Html>

this will throw error :

<div>Loader</div>

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

Deleterious answered 24/6, 2024 at 11:53 Comment(0)

Recommended topics

Hot tags