你好👋， 现在的浏览器变得比过去更强大，现在它们可以轻松渲染不同的复杂动画。您可能已经看到很多网站渲染 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

Claude Sonnet 3.5 系统提示泄漏：法医分析

数字游民请注意：您需要了解泰国新推出的 DTV 签证

从论坛到信息流：社交媒体算法如何塑造数字互动

扬帆起航：利用数据湖开发生产级 RAG 应用程序

Claude Sonnet 3.5 系统提示泄漏：法医分析

数字游民请注意：您需要了解泰国新推出的 DTV 签证

从论坛到信息流：社交媒体算法如何塑造数字互动

扬帆起航：利用数据湖开发生产级 RAG 应用程序

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps