在React中添加3D模型

Question

我想在我的投资组合中添加一个3D头像。我遵循了这个教程:React portfolio

在我的标题部分，我想用3D头像替换我的图像使用3 .js遵循本教程

这是模型。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;

这是我的页眉。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:UsersxxxxxDesktopProjectsreact-portfoliosrccomponentsheader'
ERROR in ./src/components/header/Model.jsx 5:0-71
Module not found: Error: Can't resolve 'react-three-fiber' in 'C:UsersxxxxxDesktopProjectsreact-portfoliosrccomponentsheader'
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页面。

最后一个建议是，你应该把你的模型包装在<Suspense>标签中，这是React 18中的新功能，所以确保你的react和react-dom包是最新的，并且是同步的。