GLTF的（GL 传输格式）是 Khronos 的一个开放项目 为 3D 资产提供一种通用的、可扩展的格式，既高效又 与现代网络技术高度互作。

组件使用 glTF（或 ）加载 3D 模型 文件。gltf-model.gltf.glb

请注意，glTF 是一个相当新的规范，并且采用率仍在增长。 在glb格式官网而转换器仍然是 积极。

注意：A-Frame 支持 glTF 2.0。对于使用旧版本 glTF 格式，使用gltf-model-legacy框架附加.

为什么要使用 glTF？

与旧的相比目标格式，仅支持 顶点、法线、纹理坐标和基本材质，glTF 提供了一个 更强大的功能集。除了上述所有功能外，glTF 还提供：

• 分层对象

• 场景信息（光源、相机）

• 骨架结构和动画

• 更强大的材质和着色器

对于没有动画的简单模型，OBJ 仍然是一种常见且可靠的模型 选择。

与 COLLADA 或 FBX 相比，支持的功能非常 类似。 然而，由于 glTF 专注于提供一种“传输格式”而不是编辑器格式，它与 Web 技术更具互作性。以此类推，.PSD （Adobe Photoshop） 格式有助于编辑 2D 图像，但图像被转换为 .JPG 以在 Web 上使用。同样，glTF 是一种在渲染相同结果的同时传输 3D 资产的更简单方法。

简而言之，期望 glTF 模型比其他模型更可靠地与 A-Frame 配合使用 格式。

例

通过指向指定 glTF 的资产来加载 glTF 模型 文件。src

<a-scene> <a-assets> <a-asset-item id="tree" src="/path/to/tree.gltf"></a-asset-item> </a-assets> <a-entity gltf-model="#tree"></a-entity> </a-scene>

值

类型	描述
选择器	选择器设置为<a-asset-item>
字符串	url()-glTF 文件的封闭路径
数据网址	数据：model/gltf-binary;base64,...

如果要将资产嵌入到HTML 页面中，则可以使用数据 URL 用于小型 glb 文件。您可以使用以下命令创建数据 URL：

echo -n "data:model/gltf-binary;base64," >/tmp/base64.txt base64 -w 0 model.glb >>/tmp/base64.txt

事件

事件名称	描述
模型加载	glTF 模型已加载到场景中。
模型错误	glTF 模型无法加载。

内联加载

或者，通过直接在 中指定路径来加载 glTF 模型。但是，场景不会等待资源加载 渲染。url()

<a-entity gltf-model="url(/path/to/tree.gltf)"></a-entity>

使用动画

如果您想使用 glTF 模型中的动画，可以使用动画混音器组件来自框架附加. 默认情况下，所有动画都在循环播放。

<a-entity gltf-model="#monster" animation-mixer></a-entity>

使用压缩

glTF 文件大小可以使用以下方法减小天龙座或梅肖普特压缩。这些都不会影响纹理，应通过其他方法压缩或调整纹理大小。此外，压缩不会特别影响帧速率——如果模型有太多三角形或绘制调用，压缩不会改变这一点，并且应该使用以下工具来简化模型混合器或gltfpack相反。

• 天龙座：压缩几何体，通常将几何体尺寸减小 90-95%。需要一些额外的时间来在设备上解压缩，但这发生在 Web Worker 中的主线程之外。

• 网状选择：压缩几何体、变形目标和动画。如果与额外的无损压缩（如 gzip）结合使用，Meshopt 可能具有与 Draco 相似的压缩比，解压缩速度要快得多。注意：某些 Web 服务器不支持 gzip with or files（请参阅：.glb.gltfGitHub 页面).

要优化现有的 glTF 模型，请使用以下工具：

• 混合器用于 Draco 压缩

• glTF-管道用于 Draco 压缩

• glTF-变换用于 Draco 或 Meshopt 压缩

• gltfpack用于 Meshopt 压缩

你还需要通过配置场景属性来加载解码器库，如下所述。

场景属性

当使用使用 Draco、KTX2 或 Meshopt 压缩的 glTF 模型时，您必须配置到必要解码器的路径：

<a-scene gltf-model="dracoDecoderPath: path/to/decoder/; basisTranscoderPath: path/to/transcoder/; meshoptDecoderPath: path/to/meshopt_decoder.js;"> <a-entity gltf-model="url(pony.glb)"></a-entity> </a-scene>

财产	描述	默认值
draco解码器路径	Draco 解码器库的路径。	‘https://www.gstatic.com/draco/versioned/decoders/1.5.7/‘
基础转码器路径	基础/KTX2转码器库的路径。	‘’
meshopt解码器路径	Meshopt 解码器的路径。	‘’

dracoDecoderPathpath 必须是一个包含三个文件的文件夹：

• draco_decoder.js— Emscripten 编译的解码器，兼容 IE11 等旧浏览器。

• draco_decoder.wasm— WebAssembly 解码器，与现代浏览器兼容。

• draco_wasm_wrapper.js— WASM 解码器的 JavaScript 包装器。

这些文件可从 three.js 存储库中获得，位于示例/jsm/libs/draco/gltf，但更新版本可能 存在于Draco 存储库. 该组件将自动选择是使用 WASM 还是 JavaScript 解码器，因此两者都应包括在内。gltf-model

basisTranscoderPathpath 必须是一个包含两个文件的文件夹：

basis_transcoder.js — JavaScript wrapper for the WebAssembly transcoder. basis_transcoder.wasm — WebAssembly transcoder.

这些文件可从 three.js 存储库中获得/examples/jsm/libs/basis. 您可以使用这样的 CDN：basisTranscoderPath:https://cdn.jsdelivr.net/npm/three@0.154.0/examples/jsm/libs/basis/;

meshoptDecoderPathpath 应该是 Meshopt 解码器的完整文件路径（包括文件名），通常名为 .Meshopt 需要 WebAssembly 支持。CDN 托管的版本化解码器可在 上获得，或者您可以从meshopt_decoder.jshttps://unpkg.com/meshoptimizer@0.19.0/meshopt_decoder.jsmeshoptimizer GitHub 存储库.