在 React 中添加 3D 模型

Question

我想在我用 React 构建的作品集中添加一个 3D 头像。我遵循了本教程：React portfolio

在我的 header 部分，我想在 this tutorial

之后使用 three.js 将我的图像替换为 3D 头像

这是 Model.jsx 文件

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;

这是我的 Header.jsx 文件

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

我收到此错误消息：

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

谁能指导我如何操作？

Answer 1

react-three-fiber 已弃用，您想改用 @react-three/fiber，因此您可以使用 npm install @react-three/fiber 或 yarn install @react-three/fiber。然后你必须像这样更新你的导入：

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

此外，如果你想使用 OrbitControls，@react-three/drei 包将它们作为 JSX 元素内置，只需导入它并执行 <OrbitControls />，更多信息在它们的 GitHub page.

最后一个建议是您应该将模型包装在 <Suspense> 标签中，这是 React 18 中的新功能，因此请确保您的 react 和 react-dom 包是最新的和 in-sync.

在 React 中添加 3D 模型

Add 3D model in React

javascript

frontend

three.js

reactjs

react-native