我想在我用 React 構建的投資組合中添加一個 3D 頭像。我遵循了本教程：React 投資組合
在我的標題部分，我想按照本教程使用 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
誰能指導我如何做到這一點？
uj5u.com熱心網友回復：
react-three-fiber已棄用，您想@react-three/fiber改用，所以您會這樣做npm install @react-three/fiberor yarn install @react-three/fiber。然后您必須更新您的匯入，例如：
import { Canvas, extend, useThree, useFrame } from "@react-three/fiber";
此外，如果您想使用 OrbitControls，該@react-three/drei包將它們作為 JSX 元素內置，只需將其匯入并在其GitHub 頁面<OrbitControls />中執行更多資訊。
最后一個建議是您應該將模型包裝在<Suspense>標簽中，這是 React 18 中的新功能，因此請確保您的react和react-dom包是最新的并且是同步的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486055.html
標籤：javascript 反应 反应式 三.js 前端