Add 3D model in React

Question

I want to add a 3D avatar in my portfolio built with React. I followed this tutorial: React portfolio

In my header section, I want to replace my image with 3D avatar using three.js following this tutorial

Here is the Model.jsx file

import React, { useRef } from "react";
import { Canvas, extend, useThree, useFrame } from "react-three-fiber";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

extend({ OrbitControls });
function Model() {
  const Controls = () => {
    const controls = useRef();

    const { camera, gl } = useThree();

    useFrame(() => {
      controls.current.update();
    });

    return (
      <orbitControls
        ref={controls}
        autoRotate
        args={[camera, gl.domElement]}
      ></orbitControls>
    );
  };

  return (
    <div>
      <Canvas>
        <mesh>
          <Controls />

          <boxBufferGeometry
            attach="geometry"
            args={[1, 1, 1]}
          ></boxBufferGeometry>

          <meshBasicMaterial
            wireframe
            attach="material"
            color="white"
          ></meshBasicMaterial>
        </mesh>
      </Canvas>
    </div>
  );
}

export default Model;

Here is my Header.jsx file

import React from 'react'
import './header.css'
import CTA from './CTA'
// import Me from '../../assets/me.jpg'
import HeaderSocials from './HeaderSocials'
import Model from './Model'


const Header = () => {
  return (
    <header id='header'>
      <div className="container header_container">
        <h5>
          Hello I'm
        </h5>
        <h1>John Smith</h1>
        <h5 className="text-light"> Full-stack Developer</h5>
        <CTA />
        <HeaderSocials />
          {/* <div className="me">
          <img src={Me} alt="" />
        </div> */}
        <Model />
        <a href="#contact" className="scroll_down">Scroll Down</a>
     </div>
    </header>
  )
}

export default Header

I'm getting this error message:

Failed to compile.

Module not found: Error: Can't resolve 'react-three-fiber' in 'C:\Users\xxxxx\Desktop\Projects\react-portfolio\src\components\header'
ERROR in ./src/components/header/Model.jsx 5:0-71
Module not found: Error: Can't resolve 'react-three-fiber' in 'C:\Users\xxxxx\Desktop\Projects\react-portfolio\src\components\header'

webpack compiled with 1 error

Can anyone guide me on how to do it?

Answer 1

react-three-fiber is deprecated, you want to use @react-three/fiber instead and so you'd do npm install @react-three/fiber or yarn install @react-three/fiber . Then you'd have to update your imports like:

import { Canvas, extend, useThree, useFrame } from "@react-three/fiber";

Furthermore, if you want to use OrbitControls, the @react-three/drei package has them built in as a JSX element, simply import it and do <OrbitControls /> , more information in their GitHub page.

One last advice is that you should wrap your Model inside a <Suspense> tag, this is new in React 18 so make sure your react and react-dom packages are up to date and in-sync.