The tag <primitive> is unrecognized in this browser

Question

import React, { Suspense } from 'react'
import { useGLTF } from '@react-three/drei'

const MagicRoom = () => {
  // Importing model
  const Model = () => {
    const gltf = useGLTF('./libs/the_magic_room/scene.gltf', true)
    return <primitive object={gltf.scene} dispose={null} scale={1} />
  }
  return (
    <Suspense fallback={null}>
      <Model />
    </Suspense>
  )
}

export default MagicRoom

I'm trying to use primitive to import gltf model in react-fibre, but it gives the above error

Answer 1

primitive placeholder can be found in @react-three/fiber, importing this module will resolve the error. So the final code looks like:

import React, { Suspense } from 'react'
import { Canvas } from '@react-three/fiber'
import { useGLTF } from '@react-three/drei'

const MagicRoom = () => {
  // Importing model
  const Model = () => {
    const gltf = useGLTF('./libs/the_magic_room/scene.gltf', true)
    return <primitive object={gltf.scene} dispose={null} scale={1} />
  }
  return (
    <Canvas>
      <Suspense fallback={null}>
        <Model />
      </Suspense>
    </Canvas>
  )
}

export default MagicRoom

Answer 2

i have the same issue umm u should use wrap primitive inside canvas element even in the model component. it worked for me. ...

import React from "react";
import * as THREE from "three";
import { Suspense, useEffect, useState } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Preload, useGLTF } from "@react-three/drei";

import CanvasLoader from "../Loader";
// import { hemisphereLight } from "three";
const Computers = () => {
  const computer = useGLTF("./desktop_pc/scene.gltf");

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

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}
        />
        <mesh>
          <Computers />
        </mesh>
      </Suspense>
      <Preload all />
    </Canvas>
  );
};

export default Computers;