[英]Add 3D model in React
I want to add a 3D avatar in my portfolio built with React.我想在我用 React 构建的投资组合中添加一个 3D 头像。 I followed this tutorial: React portfolio
我遵循了本教程: React 投资组合
In my header section, I want to replace my image with 3D avatar using three.js following this tutorial在我的标题部分,我想按照本教程使用 three.js 将我的图像替换为 3D 头像
Here is the Model.jsx file这是 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;
Here is my Header.jsx file这是我的 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
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?谁能指导我如何做到这一点?
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
. react-three-fiber
已弃用,您想改用@react-three/fiber
,因此您可以执行npm install @react-three/fiber
或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.此外,如果你想使用 OrbitControls,
@react-three/drei
包将它们作为 JSX 元素内置,只需导入它并执行<OrbitControls />
,更多信息在他们的GitHub 页面中。
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.最后一个建议是您应该将模型包装在
<Suspense>
标记中,这是 React 18 中的新功能,因此请确保您的react
和react-dom
包是最新的并且是同步的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.