果你对 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

们最近为荷兰设计师家具制造商 KILO 发布了基于网络的 3D 配置器的第一个生产版本。我们使用了 Salsita 3D 配置器，这是一个内部 SDK，使新的 3D 配置器的实施变得轻而易举。虽然它给我们带来了巨大帮助，但我们仍然面临一些有趣的挑战。

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

1、参数化模型

最大的挑战是实现完整的参数化建模（parametric modeling）。 KILO 的制造工艺使他们能够提供定制尺寸的家具。然而，到目前为止，他们的在线客户仅限于标准尺寸的产品。为了解决这个问题，我们在配置器中添加了尺寸滑块。用户可以选择家具的准确高度、宽度和深度，并将更改立即应用于产品的 3D 可视化。

具有可定制尺寸的 KILO 家具配置器

为了实现这一目标，我们需要使用所谓的参数化 3D 模型。与普通的 3D 模型不同，它们的形状不是固定的，而是取决于各种输入参数：尺寸、架子数量、门安装的一侧等。

参数化模型通常使用复杂的建模语言（例如 Grasshopper）来指定。不幸的是，他们缺乏一个基于 JavaScript 的解释器，可以在输入参数发生变化时快速生成模型。我们还考虑了 OpenJSCAD 和其他一些替代方案，但事实证明它们都过于复杂，要么是我们需要将它们集成到配置器中，要么是它们用于设计新模型的语言。

最后，我们决定直接依赖 Three.js，这是一个著名的 WebGL 3D 引擎，我们的配置器 SDK 已经大量使用它。我们将模型分成单独的部分，绘制每个部分的 2D 形状，然后使用 Three.js 将其拉伸为 3D。最后一步是组装各个部件以形成实际的家具。我们使用 React-Three-Fiber 作为管理 Three.js 场景的反应式方式，使最后两个步骤变得非常简单。基本上我们只需要提供零件的 2D 形状、位置和旋转，并且每次它们发生变化时模型都会更新。

这种方法意味着我们需要一种描述二维形状的方法。 KILO的家具造型简单干净，以直线为主，带有少量圆角。有了这组非常有限的构建块，就形成了一种简单的基于 JavaScript 的“领域特定语言”(DSL)，通过它我们可以对任何 KILO 部件进行建模。简而言之，DSL 允许你指定形状的角点，可以选择通过提供半径来使它们变圆。再加上圆形家具的通用弧形元素，足以覆盖 KILO 的所有产品。

模型的动态性（即尊重输入参数）留给 JavaScript 本身。无需在 DSL 中指定固定坐标，只需使用高度和宽度等变量以及 JavaScript 计算即可。所有 JavaScript 开发人员都知道的各种技术都可以轻松地应用于 DSL 代码，使其更加模块化、可读和可重用。单个产品的所有模型生成逻辑都封装在单个工厂函数中。

以下代码片段显示了一个基于高度变量动态构造的圆角矩形：

const height=1
const width=height + 0.5

const shape: ShapeElement[]=[
  { corner: [0, 0] },
  {
    corner: [width, 0],
    radius: Math.min(width / height) / 4
  },
  { corner: [width, height] },
  { corner: [0, height] }
]

我们使用一组相当简单的例程将上述工厂函数生成的定义“绘制”到目标空间中，无论是用于 3D 挤出的 2D 形状、SVG 图像还是后来的 AutoCAD DXF 文件。 DSL 还可以简单且高精度地计算面积和周长，这对于向客户显示正确的价格非常重要。

通过我们的绘图例程传递片段时得到的结果

刚才提到的所有内容都是用 TypeScript 编写的，可以在服务器和浏览器上的 Node.js 中运行。这样，当用户调整尺寸滑块时，可以轻松地近乎实时地动态更新 3D 模型，并允许在服务器上进行价格计算等处理。在进一步的版本中，DSL 还将为我们的生产仪表板提供订单分组、零件自动嵌套以及完全嵌套板的 DXF 导出等功能。

一张胶合板上的部分布局可供数控机床切割

2、站点集成

另一个挑战是使用 WooCommerce 商业功能集成到现有的 WordPress 网站。尽管我们考虑过使用 iframe，但最终我们决定使用自定义 WordPress 插件进行无缝集成。该插件将配置器的 React 应用程序直接注入主站点。

为了减少配置器和 WordPress 站点之间的耦合，我们将配置器前端和 API 托管在单独的服务器上。每当用户登陆产品页面时，我们的 WordPress 插件就会从我们的服务器中提取前端包。

幸运的是，配置器 SDK 设计得很好，在我们集成配置器时并没有妨碍我们。所有样式的范围都正确地限定为目标组件（我们使用emotion库），因此我们只需要在 WordPress 插件中定义一个根元素，然后在该元素中引导整个配置器应用程序。

我们使用 Create React App 来生成生产版本。该代码由 Webpack 捆绑到带有随机版本哈希后缀的文件中。这是在部署新版本时使浏览器重新获取应用程序文件的最可靠方法。不幸的是，这意味着插件无法在不提前知道哈希值的情况下将正确的文件链接到 WordPress 中。

我们通过在每次部署到我们的服务器时将插件的更新版本推送到 WordPress 网站来解决这个问题。作为一个有益的副作用，我们可以将插件更新与应用程序的其余部分一起部署，而无需任何额外的工作。所有这一切都是由我们的 CI/CD 管道精心安排的。

除了向现有站点添加配置器之外，我们还解决了一些用户体验问题并总体改进了用户界面。主页就是一个很好的例子，顶部的时尚照片轮播占据了中心舞台。重点关注 KILO 令人惊叹的设计师家具的高分辨率图片是激发客户兴趣的有效方式。

但凡事都有其限度。由于原始轮播占据了浏览器窗口的整个高度，因此用户可以向下滚动以查看轮播下方的内容并不明显。然而，最重要的内容隐藏在用户浏览器底部边缘的正下方：包含整个产品组合中的产品图像的图块。我们稍微降低了传送带的高度，以便产品图块的顶部始终可见。这个简单的提示足以让用户向下滚动。

KILO 使用定制的 WordPress/WooCommerce 主题来真正创建独特的外观和感觉，并遵循公司的高设计标准。为了使我们对网站的影响易于追踪和可逆，我们根据现有主题创建了自己的子主题。这使我们能够覆盖网站的某些方面，同时保持其余部分完好无损。子主题只是 WordPress 站点内的一个目录，它是作为我们的 CI/CD 部署的一部分推送的，如上所述。

3、外观和性能

一开始客户对使用3D模型表示了一些疑虑。客户表示，3D 模型通常看起来不够真实，并且具有卡通外观，给客户留下了负面印象。他们说他们更喜欢简化的外观。然而，看到 KILO 家具简单的形状，我们有信心能够让它看起来不错。客户对我们所做的早期预览深信不疑，因此我们最终追求“现实模型”的想法。

我们收到了 KILO 使用的层压胶合板的实物样品，拍摄了几张边缘照片，并将其转化为逼真的纹理。令人惊讶的是，拍摄照片的最佳工具是中端智能手机，因为它的景深是固定的（几乎是无限的）。我们还仔细观察了表面层，发现了合适的“橙皮”凹凸贴图。该贴图将平坦的人造表面变成了具有逼真纹理的更加“有形”的材质。

另一个大大提高 3D 模型真实感的因素是照明。事实证明，找到一种可以投射真实阴影同时准确显示材质颜色的照明设置几乎是不可能的。一个方向上的微小改进往往会对另一个方向产生灾难性的影响。

最后，我们决定定义场景的照明以创建适当的阴影、反射和其他效果。然后，我们通过稍微改变其实际值来补偿不完美的颜色。例如，黑色不再是纯RAL黑色（RGB#000000）；我们必须让它变得更轻，这样它才不会看起来像一个耗光的黑洞。其他颜色需要降低饱和度，以使它们看起来不那么卡通化。

即使 KILO 零件的几何形状很简单，当我们转向越来越真实的阴影时，我们也开始面临性能问题。巧合的是，GPU 检测功能刚刚被引入到我们已经使用的支持库中。得益于此，我们能够在高端 GPU 上显示真实的阴影，并在低端设备上回退到所谓的“接触阴影”（其计算成本要低得多）。接触阴影只是物体下方的一个模糊点，如果场景中有数百个来自各个方向的灯光，就会出现这种情况。对于真实阴影与接触阴影的优点存在不同的看法。我个人更喜欢接触阴影，因为它们让我专注于物体本身而不是阴影。

4、结束语

KILO 项目证明我们的 3D Configurator SDK 可以轻松扩展用于初始设计期间未预期的用例。不需要对 SDK 进行任何重大重写（甚至不需要参数化模型），我们要做的更改主要涉及改进总体架构以使其更加灵活。得益于我们的 SDK，我们能够在短短六周内准备好 MVP。

我们还证明，我们可以成功地将配置器集成到在 WordPress 和 WooCommerce 等传统整体平台上运行的电子商务解决方案中，尽管该过程并不像我们将其与 Shopify 或等现代平台集成时那样顺利。更好的是像 commercetools 这样的 MACH 兼容解决方案。

原文链接：参数化3D产品配置器 - BimAnt