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

Questions
1 
import React, { Suspense, useEffect, useState } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Preload, useGLTF } from "@react-three/drei";
import CanvasLoader from '../Loader';

const Computers = () => {
  const computer = useGLTF("./desktop_pc/scene.gltf");

   return (
    <mesh>
     <hemisphereLight intensity={0.15} groundColor="black" />
     <pointLight intensity={1}/>
     <primitive
       object={computer.scene}
     />
    </mesh>
  )
}

const ComputersCanvas=()=>{
  return (
    <Canvas
      frameloop='demand'
      shadows
      camera={{ position: [20, 3, 5], fov: 25 }}
      gl={{ preserveDrawingBuffer: true }}
    >
      <Suspense fallback={<CanvasLoader />}>
        <OrbitControls
          enableZoom={false}
          maxPolarAngle={Math.PI / 2}
          minPolarAngle={Math.PI / 2}
        />
        <Computers  />
      </Suspense>

      <Preload all />
    </Canvas>
  );
};


export default ComputersCanvas;

i have not use any div inside canvas and when i do extend({OrbitControls, Preload, useGLTF}) as the documention says then also error comes as extended is not defined . i am not able to solve the error as i am new to three.js

1 Like
2

most likely it’s that. everything inside <Canvas> is three js, you can’t render a div in there. a <mesh> is just sugar for new THREE.Mesh(), if you put a <div> in it it would execute new THREE.Div() and there’s no such thing in the THREE namespace.

if you want to await threejs with a loading state just move the suspense block outside the canvas and et voila it will work. but inside canvas the fallback can only render threejs.

1 Like
3

I’m also facing the same issue, I tried to remove fallback from the suspense block but nothing happened…

1 Like
4

it’s the same, you render a div somewhere, find it, eliminate it. you either render it as a fallback or straight mounted into the canvas. everything within canvas is outside the dom, pure threejs, that includes fallbacks and error bounds.

1 Like
5

I’m also following JavaScript Mastery portfolio video, check his CanvasLoader.js file project_3D_developer_portfolio/Loader.jsx at 70a88eb539ecedb856a59d18acf4e3b8a36cb8a0 · adrianhajdin/project_3D_developer_portfolio · GitHub

Hope you will find the answer

2 Likes
6

I have the same problem, has anyone found a solution?

8

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.

Instead, you need to render it to the HTML document, and for that you use the React-DOM reconciler.

I.e.,

bad

<Canvas>
  <div>Some Text</div>
  <axesHelper />
</Canvas>

good

<Canvas>
  <axesHelper />
</Canvas>
<div>Some Text</div>

If you can’t find the HTML tag within your canvas element, then check if any components being used within your canvas are not trying to render HTML.

If you absolutely need HTML within your canvas element, then try the Drei Html component.

1 Like
9

Thanks man,it solved the issue

10

Yes that is coming from canvas loader where at the time you are getting the error you are returning a div instead you have to return the Html tag there so proceed with the video of javascript mastery and it will be fine

11

Thanks a lot!

12

Remove fallback from the suspense block because in the project we were using it without defining the canvas loader anywhere in the component. Thus it fails to load the canvas.

1 Like
13

The issue is caused because of a <div> in the canvas from one of your components. just change it to <mesh> in that component, and your issue should get solved.

14

Hi, @Dhiraj_Gilda I’m also constructing a project using YouTube, and I’m having the same problem.
@seanwasere suggested a good idea. You will see in the project we are passing

<Suspense fallback={}>
<OrbitControls
enableZoom={false}
maxPolarAngle={Math.PI / 2}
minPolarAngle={Math.PI / 2}
/>


In this code, the first line passes CanvasLoader />, containing the div> tag.You can pass any HTML tag in the fallback= parameter.

use null for if you are facing error. and you good to go!!!

1 Like
15

Thanks people!! I also solved the problem, I just needed to change the div in the Loader component to mesh

16

Wrap the content of your Loader.jsx with Html helper from @react-three/drei .
Stack solution

17

You’re on the right path, keep going. Finish up your CanvasLoader and the error will be no more.