React.js 3D开发快速入门

如果你对 3D 图形的可能性着迷,但发现从头开始创建 3D 模型的想法是不可能的 - 不用担心!

Three.js 是一个强大的 JavaScript 库,它可以帮助我们轻松地将现有的 3D 模型集成到 React 应用程序中。因此,在本文中,我将深入探讨 Three.js 的基本知识,并指导你在项目中融入令人惊叹的 3D 模型。

NSDT工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REVIT导出3D模型插件 - 3D模型语义搜索引擎 - Three.js虚拟轴心开发包 - 3D模型在线减面 - STL模型在线切割

1、一切是如何开始的

曾几何时...

“在数字深渊的霓虹灯浸透的深处,一切都开始了。一行代码,电线中的一阵电流声,世界就被永远改变了。阴影里藏着秘密,在它们的内部,一个 他们说,这一切是如何开始的,是黑暗的、合成的未来,是由一次黑客攻击、一次突破、一次在电路中回响的下载引发了一场由 1 和 0 组成的革命。”

最近,我发现自己正在检查我的旧作品集,它迫切需要改造,因为它是在我刚刚开始编程时制作的。 我们可以忽略它的视觉细节。 👀

在设计方面,我知道我想要一些更真实的东西,而且由于我喜欢视频游戏,所以我渴望加入一些很酷的 3D 模型。

但问题是 - 我对 Three.js 的了解为零到很少,并且不想要无聊的球体或立方体。
因此,我卷起袖子,开始研究,很快我就找到了我的 3D 模型,并决定无论如何都要坚持将该 3D 模型纳入我的作品集!

该模型是 Oscar Creativo 的杰作,这是他在 Sketchfab 上的个人资料。 我强烈建议你检查一下!

由于我花了相当多的时间寻找解决方案,然后结合了一些最佳实践和优化,并且因为我知道还有更多像我一样固执的人,所以我决定让他们的生活更轻松,并分享我的经验和实现目标的步骤 相同的结果。

我的目标是通过提供简单明了的解释来简化整个过程,并使其对初学者友好。

那么让我们开始吧!

2、关于 Three.js 和先决条件

虽然 Three.js 提供了一个广泛的工具包来从头开始构建 3D 体验,但我的重点将是利用可供开发人员使用的巨大的预制 3D 模型存储库。 为什么?

因为通过这样做,我们可以立即升级我们的 React 应用程序并引入一些真正令人印象深刻的东西。

尽管如此,在做出决定之前权衡利弊还是很重要的。 虽然利用预制 3D 模型具有明显的优势,例如节省时间、高质量、广泛的选择、潜在的成本节省和更快的学习曲线,但我们也必须考虑到一些缺点,例如定制有限、可能超载、许可限制 ,以及可能需要仔细考虑和适应的无缝集成的潜在挑战。

我的建议是探索可用的免费 3D 模型,并确保检查并包含适当的许可信息。 或者,考虑选择符合你偏好的付费模式。

现在,让我们做好准备,为你的应用程序注入活力!

先决条件如下:

2.1 很棒的3D模型🤩

有什么新鲜事吗,chromehead?

选择 3D 模型后,继续下载。 将出现以下对话框:

正如您将看到的,存在不同的格式,虽然 Three.js 可以处理所有这些格式,但 GLTF 或 GLB 是首选,因为它们的效率、多功能性以及 Three.js 社区和更广泛的 Web 开发生态系统中的广泛支持。

以下是几种格式的简短解释:

  • FBX (Filmbox):电影和娱乐行业使用的流行专有 3D 模型格式,以其多功能性以及对动画和复杂场景的支持而闻名。 Three.js可以通过FBXLoader处理FBX模型。 它可以加载几何图形、动画和材质,适合导入电影和娱乐行业常用的复杂 3D 模型。
  • USDZ(通用场景描述):针对在 iOS 设备上共享 3D 模型和 AR 体验而优化的文件格式,与 Apple 的 ARKit 良好集成。 USDZ 主要用于 iOS 设备上的 AR 应用程序。 虽然 Three.js 可以处理这些模型,但可能需要额外的步骤或转换才能将它们有效地集成到基于 Three.js 的项目中。
  • GLTF(GL 传输格式):开放标准文件格式,可有效表示 3D 模型和场景,同时针对 Web 进行优化,使其成为基于 Web 的 3D 体验的广泛使用的格式。 由于其效率和对 Web 的适用性,GLTF 是 Three.js 的首选格式。 Three.js 有一个内置的 GLTFLoader,可以无缝加载 GLTF 模型,包括几何图形、材质、动画等。
    GLB(GL Binary):基于 GLTF 的二进制文件格式,将 3D 场景、纹理和动画打包到单个文件中,提高效率和可移植性。 GLB 是 GLTF 的二进制版本,Three.js 可以使用相同的 GLTFLoader 来处理它。 GLB 文件是独立的,封装了 3D 模型及其关联数据,使其高效且易于使用。

由于上述原因,在本文中我将使用 GLTF 格式。 这些文件将以 zip 存档的形式下载,之后你需要将其解压缩。

3.2 React和three.js技术栈

我们需要安装以下库:

npm install three @react-three/drei @react-three/fiber    yarn add three @react-three/drei @react-three/fiber
  • Three.js:一个强大的 JavaScript 库,用于创建和使用 3D 图形和模型。
  • @react-two/drei:有用的钩子、组件和实用程序的集合,用于增强 Three.js 和 React 集成。
  • @react-two/fibre:Three.js 的 React 渲染器,允许将 Three.js 无缝集成到 React 应用程序中。

4、关于文件夹结构和文件⚙️

public -> 3DfolderName 

解压后的 3D 模型文件夹位于包含纹理文件夹以及 scene.bin、scene.gltf 和许可证的公共文件夹中。 请注意,每种格式都有不同的文件和结构。

src -> components (containing Loader.jsx) -> canvas folder -> CyberGirl.jsx + index.js

包含代码 CyberGirl.jsx 的主要组件放置在 canvas 文件夹中,并导出到 index.js 中,以便将来可扩展。 Loader.jsx 用作后备组件,用于显示 3D 模型的加载百分比。

5、代码及解释

CyberGirl.jsx:

useGLTF 钩子用于从指定路径加载 3D 模型。 它获取并准备 3D 模型以在 Three.js 环境中进行渲染。

useRef()创建一个名为 modelRef 的 React 引用。 React 中的 Refs 用于直接访问 DOM 或 React 元素并与之交互。 它用于引用组件内的 3D 模型并应用转换或与其交互。

细节层次 (LOD) 是 Three.js 库中的一项功能,用于优化 3D 模型的渲染。 首先创建 LOD 类的实例来管理模型的不同版本。 在这种情况下,将创建原始 3D 模型的四个克隆实例,每个实例代表不同的细节级别。 此 LOD 通过在距离相机较远时显示简化模型来提高渲染性能,从而减少计算负载。

LOD 系统的运行独立于变焦或相机控制设置。 它旨在根据相机与模型之间的距离自动在不同版本的 3D 模型之间切换,无论是否启用缩放。

LOD 主要用于在不需要远距离渲染高细节模型且计算成本较高的场景下优化 3D 模型的渲染。 当相机靠近或远离模型时,LOD 系统会自动切换到适当的细节级别。

<primitive/> 是 Three.js 元素,用于渲染 3D 模型。 它使用 gltf.scene 作为模型/对象来显示并设置模型在 3D 空间中的比例、位置和旋转。 位置和旋转都使用具有三个值 [ X, Y, Z ]的数组,表示沿 X、Y 和 Z 轴的坐标。 使用参考 (modelRef) 可以与渲染的 3D 模型进行潜在的编程交互。

Canvas 组件设置阴影和基于需求的帧循环,以及针对不同显示器的 1 和 2 的设备像素比。

  • shadows 是启用或禁用 3D 场景中阴影渲染的属性。 它表示场景将支持阴影渲染,这意味着 3D 对象可以投射和接收来自光源的阴影,从而为场景增添真实感。
  • frameloop 是一个属性,决定如何在 3D 场景中管理动画循环。 在本例中,它设置为“需求”。 这意味着动画循环仅在明确请求时才会运行,通常是在需要设置动画时。 这可以更有效,因为它不会连续运行动画循环,从而可以节省计算资源。 帧循环的其他选项始终是 rAF (requestAnimationFrame)、调整大小和自定义函数。
  • dpr(设备像素比)是控制设备像素比的属性。 它被设置为数组 [1, 2],这意味着它为不同的显示器提供不同的像素比。 设备像素比用于确保图形在不同屏幕密度的设备(例如标准和高密度显示器)上清晰显示。 值 1 表示标准像素密度,值 2 表示高密度(视网膜)显示,需要以更高分辨率进行渲染才能清晰。

Suspense 将 CanvasLoader 组件渲染为后备,并在加载 3D 模型时显示加载进度指示器。

ambientLight 是一种光源,它均匀地照亮场景中的所有对象,无论其位置或方向如何。 它通常用于为整个场景提供基本级别的光线,模拟全局照明。 环境光不会投射阴影或具有特定方向,相反,它只是照亮一切。 有关道具的更多信息请查阅这里。

pointLight 是一种更具方向性的光源,从 3D 空间中的特定点向各个方向发射光。 它模拟点光源,如灯泡。 它可以投射阴影并具有各种属性,例如位置、颜色和强度。 位置指定灯光的位置,而颜色和强度分别控制灯光的颜色和亮度。 点光源对于创建局部的、真实的光照效果非常有用。 有关道具的更多信息,请检查此。

OrbitControls 组件允许在 3D 场景中进行交互式摄像机控制。 它使用户能够平移、缩放和绕 3D 对象旋转。

  • enableZoom 是指使用鼠标或触摸板进行放大和缩小的可能性。
  • enablePan 指的是在场景内横向移动摄像机的可能性。 要使用此功能,请删除将 3D 模型固定在某个位置的 maxPolarAngle 和 minPolarAngle。
  • autoRotate 通常使相机围绕某个兴趣点缓慢旋转。 将其设置为 false 会停止此行为。
  • maxPolarAngle 和 minPolarAngle 属性设置相机可以向上或向下倾斜的最大和最小角度(以弧度为单位)。 在这种情况下,其设置方式使得相机不能直视向上或向下。

要查找用于配置 OrbitControls 组件的可用属性的完整列表,请参阅此资源。

Preload 组件用于在渲染 3D 场景之前预加载资源。 具体来说,它用于异步预加载纹理、模型或其他资源,确保它们在场景开始渲染之前完全加载并可用。 它应该放置在 Suspense 组件中,以便在预加载资源时提供后备 UI。

Loader.jsx

CanvasLoader 组件的目标是在 3D 模型加载之前显示加载元素。 它从 @react-two/drei 库导入两个元素:Html 和 useProgress,以跟踪 3D 资源的加载进度。

加载进度以百分比形式显示在嵌套在居中的 Html 元素内的 p 中。 由于进度常量保存有几个小数位的浮点数,因此使用 toFixed(2) 将确保它在最终输出中显示为精确两位小数。

index.js

该文件充当 CyberGirl 组件的中心导出点,使得从应用程序的其他部分导入更加方便。 这种做法使导入语句保持干净和有组织,并且可以轻松扩展以包含其他 3D 组件。

Hero.jsx - 使用 3D 模型的地方

最后,从canvas文件夹中的index.js文件导入 CyberGirl组件。

虽然还有更多选项可供探索和自定义,但此示例是使用 Three.js 集成令人印象深刻的预制 3D 模型的简单方法。 源代码可以在我的 GitHub 上找到。

6、结束语

Three.js 和 React 的结合开启了一个充满创意可能性的世界,使我们能够将迷人的 3D 模型无缝集成到我们的 Web 应用程序中。 凭借大量可用的预制 3D 模型以及 react-three/fiber 和 react-three/drei 等库提供的简化 React 集成,为我们的应用程序注入活力是如此酷且轻松!


原文链接:React.js 3D应用开发入门 - BimAnt

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/1960.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ExcelVBA把当前工作表导出为PDF文档

我们先问问Kimi Excel导出为PDF的方法有多种&#xff0c;以下是一些常见的方法&#xff1a; 1 使用Excel软件的内置功能&#xff1a; 打开Excel文件&#xff0c;点击“文件”菜单。选择“另存为”&#xff0c;在“保存类型”中选择“PDF”。设置保存路径和文件名&#xff0c;点…

【机器学习】重塑汽车设计与制造:实例与代码探索

机器学习重塑汽车设计与制造 一、机器学习在汽车设计中的应用二、机器学习在智能制造与生产中的应用 在数字化浪潮的推动下&#xff0c;机器学习技术正逐步成为汽车行业的创新引擎。从概念设计到智能制造&#xff0c;机器学习正以其独特的优势助力汽车产业的革新与发展。本文将…

数据挖掘实验(Apriori,fpgrowth)

Apriori&#xff1a;这里做了个小优化&#xff0c;比如abcde和adcef自连接出的新项集abcdef&#xff0c;可以用abcde的位置和f的位置取交集&#xff0c;这样第n项集的计算可以用n-1项集的信息和数字本身的位置信息计算出来&#xff0c;只需要保存第n-1项集的位置信息就可以提速…

day06 51单片机-点阵led

1 点阵LED 1.1 需求描述 本案例介绍如何使用点阵LED显示一排由左上到右下的斜线。 1.2 硬件设计 1.2.1 硬件原理图 点阵内部的原理图: 点阵LED的原理也非常简单,就是LED点灯。例如,我们想要让13列(阳极端)9行(阴极端)的LED点亮,需要13为高电平,9为低电平。注意对于…

苍穹外卖day8(2)用户下单、微信支付

文章目录 前言一、用户下单1. 业务流程2. 接口设计3. 数据库设计3.1 订单表orders3.2 订单明细表 order_detail 4. 代码实现 二、订单支付 前言 用户下单 因为订单信息中包含了其他业务中的数据&#xff0c;在逻辑处理中涉及了多个其他业务&#xff0c;比如要判断地址簿、购物…

基于SSM+Vue的护工预约服务小程序和后台管理系统

1、系统演示视频&#xff08;演示视频&#xff09; 2、需要请联系

虚拟化+Docker基本管理

一、虚拟化简介 1、云端 华为云、谷歌云、腾讯云、阿里云、亚马逊、百度云、移动云、天翼云、西部数码云等 1.国内云 华为云、阿里云、腾讯云、天翼云(私有云) 2.国外云 谷歌云、亚马逊 2、云计算的服务模式是分层的 IaaS&#xff1a;Infrastructure&#xff08;基础设…

计算机网络【CN】Ch3 数据链路层

目录 数据链路层的功能 【※】VLAN 三种划分VLAN的方法&#xff1a; 【※】MAC帧格式 【※】三种可靠传输机制 ​编辑 【※】介质访问控制 信道划分介质访问控制 随机介质访问控制 CSMA CSMA/CD【有线】 CSMA/CA【无线】 信道利用率技巧 循环冗余校验CRC 以太网[802.3] 以太网…

项目实战 | 责任链模式 (下)

案例二&#xff1a;工作流&#xff0c;费用报销审核流程 同事小贾最近刚出差回来&#xff0c;她迫不及待的就提交了费用报销的流程。根据金额不同&#xff0c;分为以下几种审核流程。报销金额低于1000元&#xff0c;三级部门管理者审批即可&#xff0c;1000到5000元除了三级部…

智己汽车数据驱动中心PMO高级经理张晶女士受邀为第十三届中国PMO大会演讲嘉宾

全国PMO专业人士年度盛会 智己汽车科技有限公司数据驱动中心PMO高级经理张晶女士受邀为PMO评论主办的2024第十三届中国PMO大会演讲嘉宾&#xff0c;演讲议题为“规模化敏捷落地实践”。大会将于5月25-26日在北京举办&#xff0c;敬请关注&#xff01; 议题简要&#xff1a; 2…

【Java学习笔记】9.5 Java中的Lambda表达式

Lambda表达式是从Java8版本开始增加的语法。Lambda表达式有利于实现函数式编程&#xff0c;简化开发。 9.5.1 Lambda表达式入门 Lambda表达式由三部分组成&#xff1a;参数列表、箭头(->),及一个表达式或语句块。其完整的语法格式如下&#xff1a; (Type 1 param1 , Type…

hcip实验 — 路由策略实验

目录 实验拓扑 实验要求 实验思路 实验步骤 1.配置接口及环回ip 2.配置ospf协议及rip协议 3.在R2上进行路由引入 4.在R2上进行路由过滤 5.在R4上进行路由过滤&#xff08;地址前缀列表&#xff09; 6.在R2 RIP进程上配置静默接口使RIP报文无法进入OSPF区域 实验拓扑 …

HCF-Net:用于红外小目标检测的分层上下文融合网络

摘要 红外小目标检测是一项重要的计算机视觉任务&#xff0c;涉及在红外图像中识别和定位微小物体&#xff0c;这些物体通常仅包含几个像素。然而&#xff0c;由于物体尺寸极小以及红外图像中通常复杂的背景&#xff0c;这项任务面临困难。在本文中&#xff0c;我们提出了一种…

贪吃蛇代码实现

一.基本信息 实现目标&#xff1a;使用C语言在Windows环境的控制台中实现贪吃蛇游戏 游戏运行&#xff1a; 地图绘制基本玩法提示信息游戏的开始与结束 基本玩法&#xff1a; 通过上下左右键控制蛇的移动蛇可以加速减速吃掉食物可以得分并增加蛇的长度可以自动暂停 游戏结…

代码随想录算法训练营第三十四天|1005.K次取反后最大化的数组和、134. 加油站、135. 分发糖果

1005.K次取反后最大化的数组和 思路&#xff1a; 贪心的思路&#xff0c;局部最优&#xff1a;让绝对值大的负数变为正数&#xff0c;当前数值达到最大&#xff0c;整体最优&#xff1a;整个数组和达到最大。 局部最优可以推出全局最优。 那么如果将负数都转变为正数了&…

SAP DMS后台配置(4)

当DMS和CS文档服务器关联的时候,除了需要BASIS进行相关的配置以外,我们DMS也要进行相关的系统配置 路径:SPRO—跨应用组件—文档管理—常规数据—存储系统设置—维护还原系统 路径:SPRO—跨应用组件—文档管理—常规数据—存储系统设置—维护还原类别 当DMS和CS文档服…

HarmonyOS开发实例:【图片编辑应用】

介绍 本篇Codelab通过动态设置元素样式的方式&#xff0c;实现几种常见的图片操作&#xff0c;包括裁剪、旋转、缩放和镜像。效果如图所示&#xff1a; 相关概念 [image组件]&#xff1a;图片组件&#xff0c;用来渲染展示图片。[div组件]&#xff1a;基础容器组件&#xff0…

VMware虚拟机安装CentOS详细教程

前言 最近小白发现&#xff0c;有很多小伙伴在学习过程中都需要配置CentOS的系统&#xff0c;因此决定更新一篇在VMware虚拟机上安装CentOS的教程。 小白最近也去看了一下各种云的服务商出租的服务器&#xff0c;其中可选的系统中也有包括CentOS&#xff0c;所以在VMware配置…

用python做傅里叶变换和系统辨识

一、原始信号 1、理想数据 &#xff08;1&#xff09;系统参数 参数类型数值J0.5 k g ∗ m 2 kg*m^2 kg∗m2K0.2b5 &#xff08;2&#xff09;激励曲线 import matplotlib.pyplot as plt import numpy as np# 生成数据 x np.linspace(0, 10, 1000) # 生成0到10之间的100…

Midjourney与waifu2x双剑合璧:完美打造超高清动漫图像

在追求完美的动漫图像时&#xff0c;质量和分辨率是两个关键因素。Midjourney&#xff08;一个神秘而强大的AI图像生成工具&#xff09;与waifu2x&#xff08;一个专门用于放大动漫风格图像的AI工具&#xff09;的结合使得创造超高清的动漫图像变得触手可及。本文将引导您如何使…