React.js 3D开发快速入门

news2024/9/24 9:26:04

如果你对 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.coloradmin.cn/o/1616155.html

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

相关文章

DHCP服务器配置故障转移后显示红色箭头、与伙伴服务器失去联系的解决方案

一、遇到的故障现象&#xff1a; &#xff08;主DHCP服务器与备用DHCP服务器连通性正常&#xff0c;在故障转移选项卡上却显示与伙伴失去联系、伙伴关闭&#xff0c;且ipv4协议旁边显示一个红色的小箭头&#xff09;&#xff0c;正常情况下是绿色 &#xff08;一&#xff09;…

Jenkins CI/CD 持续集成专题二 Jenkins 相关问题汇总

一 问题一 pod [!] Unknown command: package 1.1 如果没有安装过cocoapods-packager&#xff0c;安装cocoapods-packager&#xff0c;sudo gem install cocoapods-packager 1.2 如果已经安装cocoapods-packager&#xff0c;还是出现上面的错误&#xff0c;有可能是pod的安…

通过创新的MoE架构插件缓解大型语言模型的世界知识遗忘问题

在人工智能领域&#xff0c;大型语言模型&#xff08;LLM&#xff09;的微调是提升模型在特定任务上性能的关键步骤。然而&#xff0c;一个挑战在于&#xff0c;当引入大量微调数据时&#xff0c;模型可能会遗忘其在预训练阶段学到的世界知识&#xff0c;这被称为“世界知识遗忘…

Valentina Studio Pro for Mac:强大的数据库管理工具

Valentina Studio Pro for Mac是一款功能全面、操作高效的数据库管理工具&#xff0c;专为Mac用户设计&#xff0c;旨在帮助用户轻松管理各种类型的数据库。 Valentina Studio Pro for Mac v13.10激活版下载 该软件拥有直观的用户界面&#xff0c;使得数据库管理变得简单直观。…

JS - 以工厂模式和原型模式方式建造对象、JS的垃级回收机制、数组的使用

创建对象的方式 使用工厂方法来建造对象 在JS中我们可以通过以下方式进行创建对象&#xff1a; var obj {name:"孙悟空",age:18,gender:"男",sayName:function(){alert(this.name);}};var obj2 {name:"猪八戒",age:28,gender:"男",…

学习ArkTS -- 状态管理

装饰器 State 在声明式UI中&#xff0c;是以状态驱动试图更新&#xff1a; 状态&#xff08;State&#xff09;&#xff1a;指驱动视图更新的数据&#xff08;被装饰器标记的变量&#xff09; 视图&#xff08;View&#xff09;&#xff1a;基于UI描述渲染得到用户界面 说明…

Next.js+React+Node系统实战,搞定SSR服务器渲染

Next.jsReactNode系统实战&#xff0c;搞定SSR服务器渲染 Next.js React Node.js 实战&#xff1a;实现服务器端渲染&#xff08;SSR&#xff09; 项目概述 在这个项目中&#xff0c;我们将探讨如何使用 Next.js、React 和 Node.js 来构建一个服务器渲染的 web 应用程序。通…

无人驾驶 自动驾驶汽车 环境感知 精准定位 决策与规划 控制与执行 高精地图与车联网V2X 深度神经网络学习 深度强化学习 Apollo

无人驾驶 百度apollo课程 1-5 百度apollo课程 6-8 七月在线 无人驾驶系列知识入门到提高 当今,自动驾驶技术已经成为整个汽车产业的最新发展方向。应用自动驾驶技术可以全面提升汽车驾驶的安全性、舒适性,满足更高层次的市场需求等。自动驾驶技术得益于人工智能技术的应用…

unity读写本地excel_2024.4.22

using System.Collections; using System.Collections.Generic; using UnityEngine; using OfficeOpenXml; using System.IO; using Excel; using System.Data; using System; /// <summary> /// https://blog.csdn.net/Xz616/article/details/128893023 /// Unity3D操作…

【入门篇】本章包括创建云项目、数据库的使用、云存储管理、云函数的基本使用、实战举例(小程序之云函数开发入门到使用发布上线实操)

云函数 云函数相当于服务器接口的概念,它并属于小程序端代码。它是以函数的形式运行后端代码来响应事件以及调用其他服务。运行环境是Node.js。 一、基创建云函数项目 打开微信开发者工具: 打开微信开发者工具,并登录你的微信开发者账号。 创建项目: 如果还没有创建项目,你…

给字符串添加加粗标签(AC自动机+Python)

可以暴力解决&#xff0c;但是为了锻炼一下ac自动机的编程&#xff0c;我们使用ac自动机。 ac自动机主要维护两个列表&#xff0c;一个列表ch&#xff0c;ch[f][idx]表示从父节点f向idx这个方向走&#xff0c;走到的节点。另一个列表nex&#xff0c;nex[i]表示节点i回跳边的节…

机器学习 -- 分类问题

场景 探讨了一个回归任务——预测住房价格&#xff0c;用到了线性回归、决策树以及随机森林等各种算法。本次中我们将把注意力转向分类系统。我们曾经对MNIST进行了分类任务&#xff0c;这次我们重新回到这里&#xff0c;细致的再来一次。 开始 获取数据 Scikit-Learn提供了…

BFS解决FloodFill算法:(Leetcode:200. 岛屿数量)

题目链接&#xff1a;200. 岛屿数量 - 力扣&#xff08;LeetCode&#xff09; 本题由于没有给出开始搜索的位置&#xff0c;所以每一个位置都要进行一次广度优先搜索 另外为了不修改原数组数据&#xff0c;需要设置一个bool类型的二维数组vis来判断某个位置是否被搜索过 cl…

负载均衡的原理及算法

一、定义 负载均衡&#xff08;Load Balancing&#xff09;是一种计算机网络和服务器管理技术&#xff0c;旨在分配网络流量、请求或工作负载到多个服务器或资源&#xff0c;以确保这些服务器能够高效、均匀地处理负载&#xff0c;并且能够提供更高的性能、可用性和可扩展性。…

【链表】Leetcode 两两交换链表中的结点

题目讲解 24. 两两交换链表中的节点 算法讲解 只需要模拟这个过程就行了&#xff0c;但是需要注意空指针的问题&#xff0c;特别是nnext指针 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), ne…

“AI 程序员入职系列”第二弹:如何利用通义灵码光速改写项目编程语言?

通义灵码入职阿里云云原生团队后&#xff0c;已经展示过 Ta 生成单元测试和自动生成代码的强大实力。今天&#xff0c;阿里云后端工程师云徊将从项目开发的实际需求出发&#xff0c;演示通义灵码在开发工作中可提供的帮助。 通义灵码在 Git 开发项目中起到了哪些作用&#xff…

IntelliJ IDEA - Lombok supports: OpenJDK javac, ECJ

问题描述 java: You arent using a compiler supported by lombok, so lombok will not work and has been disabled.Your processor is: com.sun.proxy.$Proxy26Lombok supports: OpenJDK javac, ECJ 解决方案 在 IDEA 设置中 File -> Settings 中找到配置如下&#xff1…

医学影像增强:空间域方法与频域方法等

医学影像图像增强是一项关键技术,旨在改善图像质量,以便更好地进行疾病诊断和评估。增强方法通常分为两大类:空间域方法和频域方法。 一、 空间域方法 空间域方法涉及直接对医学影像的像素值进行操作,以提高图像的视觉质量。以下是一些常用的空间域方法: 对比度调整:通过…

【Web】2022DASCTF MAY 出题人挑战赛 题解(全)

目录 Power Cookie 魔法浏览器 getme hackme fxxkgo ezcms Power Cookie 点击login in by guest后响应头给set了一个admin0的cookie 魔法浏览器 看到魔法UA 直接在console输出即可 改UA&#xff0c;拿到flag getme 右键查看源码 抓包看到响应头&#xff0c;Apache版本…

文旅IP孵化打造抖音宣传推广运营策划方案

【干货资料持续更新&#xff0c;以防走丢】 文旅IP孵化打造抖音宣传推广运营策划方案 部分资料预览 资料部分是网络整理&#xff0c;仅供学习参考。 PPT可编辑&#xff08;完整资料包含以下内容&#xff09; 目录 文旅IP抖音运营方案 1. 项目背景与目标 - 背景&#xff1a…