three-gltf-viewer项目实现固定模型加载的方法

three-gltf-viewer是一个基于Three.js的glTF模型查看器，它允许用户在浏览器中预览3D模型。在实际开发中，我们经常需要跳过文件选择步骤，直接加载指定的模型文件。本文将详细介绍如何实现这一功能。

通过URL参数指定模型

three-gltf-viewer支持通过URL的hash参数来指定要加载的模型文件。具体实现方式是在URL末尾添加#model=参数，后面跟上模型文件的路径。

例如，如果我们想加载位于model/model_1.zip的模型文件，可以构造如下URL：

https://example.com/viewer/#model=model/model_1.zip

当页面加载时，查看器会自动解析这个参数并加载指定的模型文件，完全跳过文件选择界面。

实现原理

这种实现方式利用了浏览器的URL hash特性：

1. 页面加载时，JavaScript代码会解析window.location.hash
2. 提取出model参数的值
3. 使用Three.js的加载器加载指定路径的模型文件
4. 如果加载失败，会回退到默认的文件选择界面

高级用法

除了基本的模型路径指定外，还可以结合其他参数实现更复杂的功能：

1. 相对路径与绝对路径：可以使用相对路径(如models/chair.glb)或绝对URL(如https://example.com/models/chair.glb)
2. 压缩包支持：支持直接加载.zip格式的压缩包，查看器会自动解压并加载其中的glTF/GLB文件
3. 多参数组合：可以与其他参数如background、camera等组合使用，实现完整的场景配置

实际应用场景

这种固定模型加载方式特别适用于以下场景：

1. 嵌入式查看器：将查看器嵌入到产品页面中，自动展示特定产品模型
2. 教学演示：创建直接展示特定教学模型的链接
3. 质量检查：自动化测试流程中自动加载待检查的模型
4. 内部工具：企业内部使用的模型审查工具，直接加载指定目录下的模型

注意事项

1. 跨域问题：如果模型文件位于不同域名下，需要确保服务器配置了正确的CORS头
2. 路径解析：相对路径是相对于查看器HTML文件的位置，而非当前URL
3. 错误处理：建议在页面中添加错误处理逻辑，当自动加载失败时提供友好的提示

通过这种URL参数的方式，three-gltf-viewer可以轻松集成到各种工作流程中，实现自动化模型展示，大大提高工作效率。