PlayCanvas glTF 视图器使用教程

PlayCanvas glTF 视图器使用教程

model-viewer 3D Model Viewer supporting glTF and 3D Gaussian Splats 项目地址: https://gitcode.com/gh_mirrors/mod/model-viewer

1. 项目介绍

PlayCanvas glTF 视图器是一个快速且完全兼容 glTF 2.0 规范的 3D 模型查看器。它允许用户加载和查看 glTF 和 GLB 格式的 3D 场景，并支持拖放操作，可以直接将模型和背景图导入查看器中。

2. 项目快速启动

在开始之前，确保你已经安装了 Node.js (版本 18.0 或更高)。

安装步骤

# 克隆项目
git clone https://github.com/playcanvas/model-viewer.git

# 进入项目目录
cd model-viewer

# 安装依赖
npm install

# 构建项目
npm run build

构建完成后，查看器会被输出到 dist 文件夹。

运行步骤

# 运行本地服务器
npm run serve

# 在浏览器中打开
http://localhost:3000

3. 应用案例和最佳实践

加载模型

• 直接将 glTF 或 GLB 文件拖入 3D 视图中。
• 若要加载未压缩的 glTF 场景，可以拖动其父文件夹到 3D 视图中。

设置背景

• 拖放单个图片文件（PNG, JPG, HDR 格式）作为等距圆柱投影背景。
• 拖放六张图片作为一个立方体贴图，图片命名应包含 posx, negx, posy, negy, posz, negz 等标识。

URL 参数

你可以使用 URL 查询参数来覆盖查看器的某些默认行为：

• load: 指定 glTF 场景的 URL。
• cameraPosition: 覆盖初始相机位置。

例如：http://localhost:3000?load=http://example.com/model.glb&cameraPosition=0,0,20

4. 典型生态项目

PlayCanvas glTF 视图器可以与其他开源项目配合使用，例如：

• 使用 WebVR 或 WebXR 将查看器集成到虚拟现实体验中。
• 结合 Three.js 或 Babylon.js 等其他 3D 引擎扩展功能。
• 集成到电子学习平台，作为教学工具。

以上就是 PlayCanvas glTF 视图器的基本使用教程。通过此文档，你可以快速上手并开始使用这个强大的 3D 模型查看器。

model-viewer 3D Model Viewer supporting glTF and 3D Gaussian Splats 项目地址: https://gitcode.com/gh_mirrors/mod/model-viewer