paint-brush
如何在 React JS 应用程序中渲染 3D 模型经过@codebucks
27,783 讀數
27,783 讀數

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

经过 CodeBucks7m2022/09/15
Read on Terminal Reader
Read this story w/o Javascript

太長; 讀書

在本文中,我们将使用 Three.js 在 React 应用程序中渲染 iPhone 模型。我们将使用 react-three/fiber 和 react-three/drei。我们将使用 CRA(create-react-app)模板。我们将使用 Apple iPhone 13 Pro Max 的 3D 模型。以下教程将向您展示如何在 React React 中渲染模型。

People Mentioned

Mention Thumbnail

Companies Mentioned

Mention Thumbnail
Mention Thumbnail

Coin Mentioned

Mention Thumbnail
featured image - 如何在 React JS 应用程序中渲染 3D 模型
CodeBucks HackerNoon profile picture
0-item

你好👋,


现在的浏览器变得比过去更强大,现在它们可以轻松渲染不同的复杂动画。您可能已经看到很多网站渲染 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 模型。您可以从以下链接获取此模型👇。


打开给定的链接并以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组件设置scenecamera ,并在每一帧渲染scene

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


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


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

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

  • <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.gltfscene.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文件加载节点和材质。因此,将texturesscene.binscene.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 中的一个漂亮的投资组合模板 =>这里)


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


也在这里发布。