你好👋， 现在的浏览器变得比过去更强大，现在它们可以轻松渲染不同的复杂动画。您可能已经看到很多网站渲染 3D 模型而没有任何性能问题。在本文中，我们将使用 在 React 应用程序中渲染 iPhone 模型。 Three.js 在开始本教程之前，让我向您展示一个呈现此模型的演示网站。这是演示链接：   ://apple-iphone14.netlify.app/ https 对于这个网站，我使用 Three.JS 和 GSAP 来添加平滑的滚动动画。如果您想学习制作这个响应式 3D 登录页面，您可以观看以下教程👇。   https://youtu.be/cT160dOzpGY 让我们在 React 应用程序中渲染一个很棒的 3D 模型。 设置和安装 在本教程中，我们将使用  （create-react-app）模板。打开您的项目文件夹并使用以下命令安装 CRA 模板。 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    ：它是 Threejs 的 React 渲染器。 @react-three/fiber    ：它是一组有用的助手和功能齐全、现成的 @react-three/fiber 抽象的集合。 @react-three/drei 在本教程中，我们将使用 Apple iPhone 13 Pro Max 的 3D 模型。您可以从以下链接获取此模型👇。  DatSketch 的 在 下获得许可。在任何项目中使用此模型之前，请确保检查它的许可证。 “Apple iPhone 13 Pro Max” 知识共享署名 打开给定的链接并以 格式下载模型。为什么选择 GLTF？根据 threejs ，  gltf 文档 glTF 专注于运行时资产交付，它传输紧凑，加载速度快。 下载文件后，在 文件夹中创建一个名为 的文件夹，然后将所有模型文件提取到名为 的文件夹下。 src assets 3D-Model 打开 文件并将所有代码替换为以下 css。 App.css   .App { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } 现在我们准备好渲染模型了。 让我们了解渲染 3D 模型的基础知识 现在，在渲染模型时，您必须牢记 3 件事。 场景：在这里您可以设置所有对象、灯光和相机。 摄像头：用于通过不同角度查看3D模型。 渲染器：用于在名为 的 HTML 元素上显示/渲染场景。 canvas 如果您在纯 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> 让我们了解这些元素中的每一个。    ： 是继承自 Object3d 的类，它表示多边形对象。在网格中，您可以使用 和 实例化多边形对象。 <mesh> 网格 Geometry Material    ：它是具有给定“宽度”、“高度”和“深度”的矩形长方体的几何类 <boxGeometry />  ：它是一种基于物理的标准材质。 <meshStandardMaterial /> 现在，您可能会在中间看到一个看起来不像 3D 对象的黑色方块。 让我们添加控件，以便我们可以围绕这个 3D 对象移动相机角度。使用以下行从 导入  。 @react-three/drei <OrbitControls />   import { OrbitControls } from "@react-three/drei"; 现在在 组件内和 之后渲染这个  >。刷新开发服务器页面，尝试抓取对象。现在您可能可以将此正方形视为 3D 对象。这个 允许相机围绕一个目标旋转。 <Canvas> <mesh> <OrbitControls /> <OrbitControls /> 现在物体是全黑的，因为没有光源。所以让我们在场景中添加灯光。在 组件中，在 之前添加以下行。 <Canvas /> <mesh>   <ambientLight /> 在这里，  全局均匀地照亮场景中的所有对象。现在您可以看到网状材料的灰白色。我们还可以通过 props 改变环境光的强度，如下代码所示。 ambientLight   <ambientLight intensity={1.25} /> 您还可以使用 中的  。签出以下行。 <meshStandardMaterial /> color   <meshStandardMaterial color="green"/> 现在 3D 对象的颜色为绿色。有很多不同的灯光和元素可供您用来创建整个模型。为此，您可以参考 的文档。这就是基础知识，不要让我们渲染我们的 iPhone。 threejs 将模型转换为 JSX 组件 打开模型文件，你会看到不同的文件，如 、   、  等。我们将 转换为 JSX 组件，以便我们可以轻松地在 React 应用程序中渲染它。 纹理 scene.gltf scene.bin scene.gltf 现在要将任何 GLTF 文件转换为 JSX 组件，我们将使用一个名为 的简单命令行工具。根据文档，  是一个小型命令行工具，可将 GLTF 资产转换为声明性和可重用的 react-three-fiber JSX 组件。 gltfjsx gltfjsx 现在打开终端/cmd 并转到存储所有模型文件的目录，在我的情况下，它位于 文件夹中的 文件夹中。所以我将使用以下命令来更改目录。 assets 3D-Model   cd src/assets/3D-Model 现在使用以下命令。   npx gltfjsx scene.gltf 此命令将花费几秒钟并返回作为 JSX 组件的 文件。 Scene.js 注意：如果你使用的是最新的 NodeJS 版本，这个 gltfjsx 命令可能会给你一个错误。我目前使用的是 17.2.0，这个命令运行良好。如果您遇到任何错误，请降级您的 NodeJs 版本并再次尝试此代码。您可以使用 之类的工具来使用不同版本的 NodeJ。 nvm 重要的！ 在我们从 文件渲染模型之前，我们必须将模型文件复制到 目录，因为如果您查看 文件，它使用 钩子从 文件加载节点和材质。因此，将  、  和 复制到项目的 文件夹中。 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}}> 这里 代表“视野”。设置 后刷新页面以查看输出。现在我们将 设置为 18。您可以尝试不同的数字并查看输出。 fov fov fov 目前还没有对模型进行反思。要在模型上添加反射，您必须在该模型周围设置图像，以便这些图像可以在该模型的表面上反射。我们不添加这些图像，而是使用 库中的 。 @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 最后的想法 本教程到此结束。您可以使用 阅读 和 的文档并尝试不同的元素。如果您想使用 3D 模型创建完整的网站并为其颜色设置动画，那么您可以按照本课开始时提供的视频教程进行操作。 https://docs.pmnd.rs/ @react-three/fiber @react-three/drei 如果您喜欢本教程，那么您应该查看我在 YouTube 频道 上的精彩教程。你可以从 。 CodeBucks 这里查看 您可能还喜欢这些网站模板：  ReactJS 中一个漂亮的投资组合模板 => 这里 ReactJS 中的 NFT 集合登陆页面 => [这里](- ReactJS 中的一个漂亮的投资组合模板 => ) 这里 感谢您阅读本教程。祝你有美好的一天！ 也在 发布。 这里

The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch

Polygon

Apple

Target

YouTube

Helping you to learn code! 
here you'll find tutorials around web development. Keep Coding...😜

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

成功云迁移的完整指南：策略和最佳实践

如何将您的工作流程提高 10 倍：17 个必备应用程序

使用这 18 种开发工具来提高你的工作效率 🚀🔥

Telegram：加密岛通往大陆的桥梁

成功云迁移的完整指南：策略和最佳实践

如何将您的工作流程提高 10 倍：17 个必备应用程序

使用这 18 种开发工具来提高你的工作效率 🚀🔥

Telegram：加密岛通往大陆的桥梁

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps