如何在 React JS 应用程序中渲染 3D 模型

你好👋，

现在的浏览器变得比过去更强大，现在它们可以轻松渲染不同的复杂动画。您可能已经看到很多网站渲染 3D 模型而没有任何性能问题。在本文中，我们将使用Three.js在 React 应用程序中渲染 iPhone 模型。

在开始本教程之前，让我向您展示一个呈现此模型的演示网站。这是演示链接： https ://apple-iphone14.netlify.app/

对于这个网站，我使用 Three.JS 和 GSAP 来添加平滑的滚动动画。如果您想学习制作这个响应式 3D 登录页面，您可以观看以下教程👇。

让我们在 React 应用程序中渲染一个很棒的 3D 模型。

设置和安装

在本教程中，我们将使用CRA （create-react-app）模板。打开您的项目文件夹并使用以下命令安装 CRA 模板。

 npx create-react-app 3d-model-in-reactjs

您可以在本教程中随意命名您的应用程序，我将其保留为“3d-mode-in-reactjs”。

这里的 npx 是安装 npm 时附带的实用程序，它可以帮助我们运行 npm 注册表上可用的任何 npm 包，而无需安装该包。

让我们安装渲染 3D 模型所需的库。使用以下命令将目录更改为“3d-mode-in-reactjs”。

 cd 3d-mode-in-reactjs

使用以下命令安装两个库@react-three/fiber和@react-three/drei 。

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

• @react-three/fiber ：它是 Threejs 的 React 渲染器。

• @react-three/drei ：它是一组有用的助手和功能齐全、现成的 @react-three/fiber 抽象的集合。

  
  

在本教程中，我们将使用 Apple iPhone 13 Pro Max 的 3D 模型。您可以从以下链接获取此模型👇。

• DatSketch 的“Apple iPhone 13 Pro Max”在知识共享署名下获得许可。在任何项目中使用此模型之前，请确保检查它的许可证。

  
  

打开给定的链接并以gltf格式下载模型。为什么选择 GLTF？根据 threejs文档， glTF 专注于运行时资产交付，它传输紧凑，加载速度快。

下载文件后，在src文件夹中创建一个名为assets的文件夹，然后将所有模型文件提取到名为3D-Model的文件夹下。

打开App.css文件并将所有代码替换为以下 css。

 .App { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; }

现在我们准备好渲染模型了。

让我们了解渲染 3D 模型的基础知识

现在，在渲染模型时，您必须牢记 3 件事。

1. 场景：在这里您可以设置所有对象、灯光和相机。

2. 摄像头：用于通过不同角度查看3D模型。

3. 渲染器：用于在名为canvas的 HTML 元素上显示/渲染场景。

   
   

如果您在纯 JavaScript 项目中直接使用threejs，那么您可能必须从基础开始设置所有这些东西，但在本教程中我们使用@react-three/fiber和@react-three/drei ，所以我们没有从头开始做所有的事情。

打开App.js文件，清理默认代码，让我们从@react-three/fiber导入canvas元素。检查以下代码片段。

 import "./App.css"; import { Canvas } from "@react-three/fiber"; function App() { return ( <div className="App"> <Canvas>{/* Here we will render out model */}</Canvas> </div> ); } export default App;

在这里， Canvas组件设置scene和camera ，并在每一帧渲染scene 。

现在将以下代码复制到<Canvas />组件中。

 <Canvas> <mesh> <boxGeometry /> <meshStandardMaterial /> </mesh> </Canvas>

让我们了解这些元素中的每一个。

• <mesh> ：网格是继承自 Object3d 的类，它表示多边形对象。在网格中，您可以使用Geometry和Material实例化多边形对象。

• <boxGeometry /> ：它是具有给定“宽度”、“高度”和“深度”的矩形长方体的几何类

• <meshStandardMaterial /> ：它是一种基于物理的标准材质。

  
  

现在，您可能会在中间看到一个看起来不像 3D 对象的黑色方块。

让我们添加控件，以便我们可以围绕这个 3D 对象移动相机角度。使用以下行从@react-three/drei导入<OrbitControls /> 。

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

现在在<Canvas>组件内和<mesh>之后渲染这个<OrbitControls /> >。刷新开发服务器页面，尝试抓取对象。现在您可能可以将此正方形视为 3D 对象。这个<OrbitControls />允许相机围绕一个目标旋转。

现在物体是全黑的，因为没有光源。所以让我们在场景中添加灯光。在<Canvas />组件中，在<mesh>之前添加以下行。

 <ambientLight />

在这里， ambientLight全局均匀地照亮场景中的所有对象。现在您可以看到网状材料的灰白色。我们还可以通过 props 改变环境光的强度，如下代码所示。

 <ambientLight intensity={1.25} />

您还可以使用<meshStandardMaterial />中的color 。签出以下行。

 <meshStandardMaterial color="green"/>

现在 3D 对象的颜色为绿色。有很多不同的灯光和元素可供您用来创建整个模型。为此，您可以参考threejs的文档。这就是基础知识，不要让我们渲染我们的 iPhone。

将模型转换为 JSX 组件

打开模型文件，你会看到不同的文件，如纹理、 scene.gltf 、 scene.bin等。我们将scene.gltf转换为 JSX 组件，以便我们可以轻松地在 React 应用程序中渲染它。

现在要将任何 GLTF 文件转换为 JSX 组件，我们将使用一个名为gltfjsx的简单命令行工具。根据文档， gltfjsx是一个小型命令行工具，可将 GLTF 资产转换为声明性和可重用的 react-three-fiber JSX 组件。

现在打开终端/cmd 并转到存储所有模型文件的目录，在我的情况下，它位于assets文件夹中的3D-Model文件夹中。所以我将使用以下命令来更改目录。

 cd src/assets/3D-Model

现在使用以下命令。

 npx gltfjsx scene.gltf

此命令将花费几秒钟并返回作为 JSX 组件的Scene.js文件。

注意：如果你使用的是最新的 NodeJS 版本，这个 gltfjsx 命令可能会给你一个错误。我目前使用的是 17.2.0，这个命令运行良好。如果您遇到任何错误，请降级您的 NodeJs 版本并再次尝试此代码。您可以使用nvm之类的工具来使用不同版本的 NodeJ。

重要的！

在我们从Scene.js文件渲染模型之前，我们必须将模型文件复制到公共目录，因为如果您查看Scene.js文件，它使用useGLTF钩子从/scene.gltf文件加载节点和材质。因此，将textures 、 scene.bin和scene.gltf复制到项目的公共文件夹中。

渲染 3D 模型

打开App.js文件并删除<mesh> 。让我们从Scene.js文件中导入Model 。

 import Model from "./assets/3D-Model/Scene";

现在在<Canvas />组件中渲染<Model /> ，在<OrbitControls />之前。

 <Canvas> <ambientLight intensity={1.25} /> <Model /> <OrbitControls /> </Canvas>

刷新输出页面。现在您应该可以在屏幕上看到 iphone 渲染，您可以放大和缩小以及移动模型。让我们增加模型的视图。您可以从画布元素直接访问相机。将相机添加到画布内，如下代码片段。

<Canvas camera={{fov: 18}}>

这里fov代表“视野”。设置fov后刷新页面以查看输出。现在我们将fov设置为 18。您可以尝试不同的数字并查看输出。

目前还没有对模型进行反思。要在模型上添加反射，您必须在该模型周围设置图像，以便这些图像可以在该模型的表面上反射。我们不添加这些图像，而是使用@react-three/drei库中的<Environment />组件。

让我们导入<Environment /> ，

 import { Environment, OrbitControls } from "@react-three/drei";

现在在模型之后，让我们添加环境。

 <Environment preset="sunset" />

此处预设设置模型周围的不同类型的环境。现在我们已将其设置为“日落”。您可以从此处查看可用的不同预设。

添加此环境后，您应该会在我们的 iPhone 上看到美丽的倒影。让我们在 React 的Suspense组件中渲染模型，以便它可以异步加载。

 <Suspense fallback={null}> <Model /> </Suspense>

这是最终的代码。

https://gist.github.com/codebucks27/6defde4db7e290d95d7ff1ae39078a06

最后的想法

本教程到此结束。您可以使用https://docs.pmnd.rs/阅读@react-three/fiber和@react-three/drei的文档并尝试不同的元素。如果您想使用 3D 模型创建完整的网站并为其颜色设置动画，那么您可以按照本课开始时提供的视频教程进行操作。

如果您喜欢本教程，那么您应该查看我在 YouTube 频道CodeBucks上的精彩教程。你可以从这里查看。

您可能还喜欢这些网站模板：

• ReactJS 中一个漂亮的投资组合模板 =>这里

• ReactJS 中的 NFT 集合登陆页面 => [这里](- ReactJS 中的一个漂亮的投资组合模板 =>这里)

  
  

感谢您阅读本教程。祝你有美好的一天！