写在前面
相信很多 Web 3D 开发以及 3D 建模的小伙伴对 glTF 这种三维数据格式并不陌生。glTF作为一种标准化的轻量级3D模型格式，以其高效的数据交换和加载性能成为了 Web 3D 开发的首选。
最近我在接触 3D 开发的一些小项目，想到一些小的应用场景：
- 我们在开发一些 Web 应用时有时候可能需要插入一些 3D 模型作为点缀，就像插入图片那样随意地插入 3D 模型到自己开发的应用中。
- 我们在网上下载了一个 glTF 模型时，想要随时在线预览模型的展现效果。
为此，我开源了一个名为gltf-display 的项目，提供一个基于 Three.js 的 glTF 3D 模型预览编辑器。目前项目包含 Web 独立应用和 NPM 包两种模式。
Web 应用在线体验：glTF Display
GitHub 地址： wzdong26/gltf-display (github.com) （欢迎Star⭐）
项目借鉴了网上的一些开源项目：glTF Viewer (donmccurdy.com)、@google/model-viewer – npm (npmjs.com)。
在他们的基础上，本项目整合一些比较好用的功能：
- 支持拖拽上传本地 3D 模型（.glb/.gltf）文件预览效果（可支持文件夹上传）；
- 支持在线 glTF 文件 URL 路径输入预览效果；
- 支持场景及模型参数调节，包括：背景色/透明度、可交互、场景旋转、灯光、模型线框（wireframe）、模型动画（animations）、等；
- 支持截图（screenCapture），制作立体图像；
- 支持分享（share），作为纯 web 页面分享到任何地方，包括作为 iframe 嵌入到你的 web 应用中（只支持在线 glTF 模型分享，本地 glTF 模型暂不支持）；
- 持续更新中。。。
技术实现
gltf-display 主要依赖于 Three.js 库，项目封装了一些 API 来简化 glTF 3D 模型的加载和展示流程。主要包含两个核心组件：
- Configurator：作为声明式 API ，Configurator 极大简化了 glTF 3D 场景配置。你仅需设置
Configurator.conf对象的各项属性，即可实现场景中背景颜色、透明度、场景交互、光照条件、模型旋转速度、线框模式、包围盒可视化、模型缩放和动画控制等参数的设置。例如，通过一行简单的代码即可指定模型源 URL 及旋转速度：
import { Configurator } from 'gltf-display';
const { conf } = new Configurator();
conf.src = 'model_url.gltf'; // 设置模型URL
conf.rotate = 30; // 设置场景旋转速度
示例代码：
- Viewer：Viewer 则是更基础的命令式 API ，用于更灵活地控制 glTF 3D 场景。
// 定义Three.js的PerspectiveCamera和WebGLRenderer所需的初始参数
const cameraParams = { fov: 45, near: 0.1, far: 1000 };
const rendererParams = { antialias: true };
// 创建Viewer实例，传入必要的3D环境参数
const viewer = new Viewer({
camera: cameraParams,
renderer: rendererParams,
});
// 使用Viewer的loadGLTF方法加载在线glTF模型
viewer.loadGLTF('model_url.gltf').then((gltf) => {
// 加载成功后，可以进行额外的模型操作，如设置动画、添加交互事件等
viewer.setAnimation(gltf.animations[0]);
});
最后
更多细节欢迎在线 Web 应用体验或者 NPM 包（gltf-display – npm）安装体验！
原文链接：https://juejin.cn/post/7355078138668285991 作者：wzdong
