3D 珠宝定制器与 AR 体验

高端珠宝买家需要的不仅仅是平面图像。他们想看到黄金如何反射光线，或者钻石的切工在现实生活中是什么样子。

我和我的团队为一位珠宝客户构建了一个生产级别的电子商务平台。我们创建了一个 3D 定制器和增强现实 (AR) 试戴功能。我们构建此功能是为了让它能在移动浏览器中运行，而不会导致设备崩溃。

以下是我们管理技术流程的方式。

资产管线

珠宝最初是沉重的 CAD 文件。这些文件通常超过 50MB，并拥有数百万个多边形。我们无法在网页上直接使用它们。我们构建了一个自定义的优化管线：

  • 重构网格 (Remeshing)：我们使用 Blender 在保持形状整洁的同时减少多边形数量。
  • 烘焙细节 (Baking Details)：我们将复杂的几何体转换为 2D 法线贴图 (Normal Maps)。这使得光影看起来非常细腻，而无需增加沉重的资源文件。
  • PBR 纹理贴图：我们设置了特定的粗糙度 (roughness) 和金属度 (metalness) 贴图，以确保表面看起来真实。
  • 压缩：我们将资产导出为 GLTF/GLB 格式。我们使用 Google Draco 压缩技术将文件从 50MB 缩小到 2MB 以下。

渲染引擎

我们使用 Three.js 直接连接用户的 GPU。为了让金属呈现出奢侈品级的质感，我们将高动态范围图像 (HDRI) 映射为环境贴图。这使得金属在用户旋转戒指时能够显示实时反射。

我们通过代码处理材质变化。当用户选择一种金属时，我们会遍历 GLTF 场景并立即更新颜色、粗糙度和金属度值。

增强现实 (AR)

我们为移动端用户实现了一套双引擎工作流：

  • Android：我们使用了 Scene Viewer 集成。
  • iOS：我们使用了 Web 标准以确保跨平台支持。

经验总结

现代前端工程的核心在于构建高效的管线。你必须将沉重的文件转换为轻量级的资产。你必须确保高保真体验能在标准的移动浏览器上运行。

你是否在项目中构建过交互式 3D 元素或使用过 WebXR？在评论区告诉我你的优化方法吧。

Source: https://dev.to/tharul/engineering-a-3d-customizer-ar-experience-for-a-jewelry-ecommerce-web-app-2fn4