如何在 React 應用程序中渲染 3D 對象

3D 渲染的引入改變了用戶與互聯網技術的交互方式。首先，網絡應用程序變得更加身臨其境，通過網絡瀏覽器提供引人入勝的互動體驗。

這項技術已經被遊戲和增強/虛擬現實領域熱切採用。它提供了一種逼真且身臨其境的方式來與虛擬元素進行交互。

了解如何在 React 應用程序中渲染 3D 對象。

3D 建模和編程基礎知識

在開始使用 3D 渲染之前，您需要了解以下幾點：

• 3D 對象包含單獨的點或頂點，它們在三個維度上定義其結構。連接這些點會創建構成屏幕上對象形狀的面。
• 現代瀏覽器具有使用 WebGL 等技術呈現 3D 的內置功能。他們通過利用機器中圖形處理單元的強大功能來快速渲染 3D 模型和場景。
• 您的瀏覽器呈現的任何 3D 對像都包含三個主要組件。這些就是場景、相機和渲染器，它們都起著至關重要的作用。該場景提供了用於設置所有 3D 元素（包括燈光和相機）的基礎平台。攝像頭允許您從不同角度查看 3D 對象。最後，渲染器在 canvas HTML 元素之上裝載並顯示場景。

使用 Three.js 和 React 三纖維進行 3D 渲染

Three.js是一個 JavaScript 庫，可用於在 Web 瀏覽器中渲染 3D 對象。使用其內置組件，您可以輕鬆地在瀏覽器中創建和渲染 3D 對像以及 React 應用程序的其他功能。

react-three-fiber 包在 Three.js 之上運行。它簡化了使用 Three.js 組件在瀏覽器中創建和渲染 3D 對象的過程。有趣的是，它還提供自定義 React 鉤子，在 React 中創建 3D 對象時可以派上用場。

在 React 應用程序中渲染 3D 對象

按照以下步驟在瀏覽器上渲染一個簡單的 3D 形狀以及 Blender 創建的 3D 模型。如果您不熟悉 Blender，請了解如何作為初學者開始使用。

創建一個 React 應用程序，啟動您的終端以運行以下命令，並安裝所需的依賴項：

npm install three @react-three/fiber @react-three/drei

安裝 Three.js、react-three-fiber 和 react-three-drei 包。react-three-drei 庫與 react-three-fiber 一起工作以創建 3D 場景和對象。

渲染 3D 形狀

您可以使用很少的代碼在瀏覽器中呈現一個簡單的 3D 框形狀。打開src/app.js文件，刪除所有樣板 React 代碼，並添加以下內容：

import React from "react";
import {Canvas} from "@react-three/fiber";
import {OrbitControls} from "@react-three/drei";


function Box() {
  return (
    <mesh>
      <boxBufferGeometry attach ="geometry" />
      <meshLambertMaterial attach="material" color="hotpink" />
    </mesh>
  )
}

export default function App() {
  return (
    <div className="App">
      <div className="App-header">
        <Canvas>
          <OrbitControls />
          <ambientLight intensity ={0.5} />
          <spotLight position={[10, 15,10]} angle={0.3} />
          <Box />
        </Canvas>
      </div>
    </div>
  );
}

此代碼執行以下操作：

• Box組件使用 react-three-fiber 中的 mesh、boxBufferGeometry 和 meshLambertMaterial 組件來渲染 3D 盒子。這三個組件協同工作以創建盒子的形狀。
• boxBufferGeometry 組件創建盒子，此代碼將 meshLambertMaterial 組件的顏色屬性設置為粉紅色。
• 然後它會渲染 Canvas 元素，該元素包含帶有環境光、聚光燈和 Orbit Controls 組件屬性集的盒子組件。
• 環境光組件屬性為畫布添加柔光。spotLight 組件從特定位置以 0.3 的角度添加聚焦光。最後，OrbitControls 組件可讓您控制 3D 對象周圍的相機。

在 index.js 文件中導入並呈現 app.js 組件，然後啟動開發服務器以在瀏覽器中的 http://localhost:3000 中查看結果。

渲染 Blender 創建的 3D 模型

Blender 是一個開源工具，供不同領域的創意人員用來創建 3D 模型、視覺效果和交互式 3D 應用程序。您可以使用 Blender 為您的 Web 應用程序創建 3D 模型。

在本教程中，您將通過Sketchfab上可用的 SRT 性能渲染 BMW 3D 模型。

首先，從 Sketchfab 下載 GLTF（GL 傳輸格式）的模型。這種格式使得在瀏覽器上渲染 3D 模型變得容易。下載完成後，打開模型的文件夾並將模型的文件移動到 React 應用程序內的公共目錄。

現在，轉到您的 app.js 文件並使用以下代碼填充它。

• 導入以下組件： import {useGLTF, Stage, PresentationControls} from "@react-three/drei";
• 創建模型組件並添加以下代碼： function Model(props){
  const {scene} = useGLTF("/bmw.glb");
  return <primitive object={scene} {...props} />
}


  export default function App() {
  return (
    <div className="App">
      <div className="App-header">
        <Canvas
          dpr={[1,2]}
          shadows camera={{fav: 45}}
          style={{"position": "absolute"}}
        >
          <PresentationControls
            speed={1.5}
            global zoom={0.5}
            polar={[-0.1, Math.PI / 4]}
          >
            <Stage environment={null}>
              <Model scale={0.01} />
            </Stage>
          </PresentationControls>
        </Canvas>
      </div>
    </div>
  );
}


• React-three-drei 庫中的 useGLTF 鉤子定義了一個場景變量，並為其分配位於路徑“/bmw.glb”的模型文件的值。然後該組件返回一個為 3D 模型佈置場景的原始對象。
• Canvas 元素渲染構成模型的主要組件，具有指定的屬性，例如設備像素比 (DPR)、陰影、相機角度和样式。
• 然後指定 PresentationControls 組件的屬性，例如速度和全局縮放。這些屬性定義了您將如何控制屏幕上的模型。
• 最後，配置將模型安裝在瀏覽器屏幕上的 Stage 組件。

啟動開發服務器以更新應用程序上的更改。您應該會看到在瀏覽器上呈現的模型。

在 Web 應用程序中渲染 3D 模型

在您的 Web 應用程序中渲染 3D 模型可以提供多種好處，例如通過提供更逼真的交互式 3D 感覺來改善用戶體驗。因此，用戶可以更好地與產品互動。

然而，渲染 3D 元素可能有其缺點，例如對應用程序的性能產生負面影響。3D 模型需要更多資源來呈現，這可能會導致您的應用加載速度變慢。