1、簡介

1.1 Three.js

Three.js 是一個功能強大的 3D 圖形庫，用于在網頁上創建和顯示交互式 3D 圖形。它基于 WebGL，提供了簡單易用的 API，幫助開發者快速構建復雜的 3D 場景。

npm install three

1.2 React Three Fiber

React Three Fiber 是一個 React 的綁定庫，用于在 React 應用中創建和管理 3D 場景。它基于 Three.js，提供了聲明式的 API，使 3D 開發更加直觀和高效。

npm install three @react-three/fiber

2、測試

2.1 初始化環境

創建應用:

npx create-react-app@latest my-app

運行一下react初始環境:

cd my-app
npm start

安裝依賴:

npm install three @react-three/fiber

npm install @react-three/drei

修改index.css:

body {margin: 0;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}code {font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',monospace;
}
* {box-sizing: border-box;
}html,
body,
#root {width: 100%;height: 100%;margin: 0;padding: 0;
}body {background: #f0f0f0;
}

2.2 app.js修改（顯示內置立方體）

修改App.js代碼：

import {useState,useRef} from "react"
import {Canvas, useFrame} from "@react-three/fiber"function App() {return (<Canvas><ambientLight intensity={0.1} /><directionalLight color="red" position={[0, 0, 3]} /><mesh><boxGeometry /><meshStandardMaterial /></mesh>
</Canvas>);
}export default App;

運行如下：

2.3 app.js修改（顯示內置球體）

修改App.js代碼：

import {useState,useRef} from "react"
import { Canvas, useFrame} from "@react-three/fiber"function App() {return (<Canvas><ambientLight intensity={0.1} /><directionalLight color="red" position={[0, 0, 5]} /><mesh visible userData={{ hello: 'world' }} position={[1, 0, 3]} rotation={[Math.PI / 2, 0, 0]}><sphereGeometry args={[1, 16, 16]} /><meshStandardMaterial color="hotpink" transparent /></mesh></Canvas>);
}export default App;

運行如下：

2.4 app.js修改（顯示自定義立方體）

修改App.js代碼：

import React, { Suspense } from 'react'
import { BoxGeometry, MeshStandardMaterial } from 'three'
import { Canvas } from '@react-three/fiber'
import { ContactShadows, OrbitControls } from '@react-three/drei'const ball = new BoxGeometry()
const mtl1 = new MeshStandardMaterial({ color: '#f00' })export default function Demo () {return (<Canvas style={{ height: 800 }} camera={{ fov: 75, near: 0.1, far: 1000, position: [2, 1, 2] }}><Suspense fallback={null}><ambientLight intensity={0.1} /><directionalLight color={'#fff'} intensity={1} position={[-3, 5, 5]} /><mesh geometry={ball} material={mtl1} /><OrbitControls makeDefault /><ContactShadows rotation-x={Math.PI / 2} position={[0, -1.4, 0]} opacity={0.75} width={10} height={10} blur={2.6} far={2} /><color attach='background' args={['#aaa']} /></Suspense></Canvas>)
}

運行如下：

2.5 app.js修改（顯示多個模型）

修改App.js代碼：

import { useRef, useState, useEffect } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'function Box(props) {// This reference gives us direct access to the THREE.Mesh objectconst ref = useRef()// Hold state for hovered and clicked eventsconst [hovered, hover] = useState(false)const [clicked, click] = useState(false)// Subscribe this component to the render-loop, rotate the mesh every frameuseFrame((state, delta) => (ref.current.rotation.x += delta))// Return the view, these are regular Threejs elements expressed in JSXreturn (<mesh{...props}ref={ref}scale={clicked ? 1.5 : 1}onClick={(event) => click(!clicked)}onPointerOver={(event) => (event.stopPropagation(), hover(true))}onPointerOut={(event) => hover(false)}><boxGeometry args={[1, 1, 1]} /><meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} /></mesh>)
}export default function App() {return (<Canvascamera={{ position: [0, 0, 2] }} // 初始相機位置><ambientLight intensity={Math.PI / 2} /><spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} /><pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} /><Box position={[-1.2, 0, 0]} /><Box position={[1.2, 0, 0]} /><Box position={[3.2, 0, 0]} /><OrbitControls /></Canvas>)
}

2.6 app.js修改（加載obj模型）

修改App.js代碼：

import React, { Suspense, useRef } from 'react'
import { AxesHelper } from 'three'
import { Canvas, useLoader } from '@react-three/fiber'
import { Environment, OrbitControls, Stats } from '@react-three/drei'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'function MyMesh () {const src = '/obj/cow.obj'const object = useLoader(OBJLoader, src)console.log(object)return (<primitive object={object} />)
}export default function Demo () {const statRef = useRef(null)return (<div ref={statRef}><Stats showPanel={0} parent={statRef} style={{ top: 'auto', bottom: 0 }} /><Canvas style={{ height: 800 }} camera={{ fov: 75, near: 0.1, far: 1000, position: [2, 1, 2] }}><Suspense fallback={null}><directionalLight color={'#fff'} intensity={1} position={[-3, 5, 5]} /><primitive object={new AxesHelper(100)} /><MyMesh /><OrbitControls makeDefault /><color attach='background' args={['#aaa']} /><Environmentbackground={false} preset={null} scene={undefined}path={'/skybox/'}files={['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']}/></Suspense></Canvas></div>)
}

運行如下：

2.7 app.js修改（物理效果）

npm install @react-three/cannon

import { useEffect, useState } from 'react'
import { Canvas } from '@react-three/fiber'
import { Physics, usePlane, useBox } from '@react-three/cannon'function Plane(props) {const [ref] = usePlane(() => ({ rotation: [-Math.PI / 2, 0, 0], ...props }))return (<mesh receiveShadow ref={ref}><planeGeometry args={[1000, 1000]} /><meshStandardMaterial color="#f0f0f0" /></mesh>)
}function Cube(props) {const [ref] = useBox(() => ({ mass: 1, ...props }))return (<mesh castShadow ref={ref}><boxGeometry /><meshStandardMaterial color="orange" /></mesh>)
}export default function App() {const [ready, set] = useState(false)useEffect(() => {const timeout = setTimeout(() => set(true), 1000)return () => clearTimeout(timeout)}, [])return (<Canvas dpr={[1, 2]} shadows camera={{ position: [-5, 5, 5], fov: 50 }}><ambientLight intensity={Math.PI / 2} /><spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} /><pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} /><spotLight angle={0.25} penumbra={0.5} position={[10, 10, 5]} castShadow /><Physics><Plane /><Cube position={[0, 5, 0]} /><Cube position={[0.45, 7, -0.25]} /><Cube position={[-0.45, 9, 0.25]} />{ready && <Cube position={[-0.45, 10, 0.25]} />}</Physics></Canvas>)
}

結語

如果您覺得該方法或代碼有一點點用處，可以給作者點個贊，或打賞杯咖啡；╮(￣▽￣)╭
如果您感覺方法或代碼不咋地//(ㄒoㄒ)//，就在評論處留言，作者繼續改進；o_O???
如果您需要相關功能的代碼定制化開發，可以留言私信作者；(????)
感謝各位童鞋們的支持！( ′ ▽′ )ﾉ ( ′ ▽′)っ！！！