gltf-模型/glb-模型

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

值
类型
描述
选择器
选择器设置为
字符串
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()

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

使用压缩
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 模型时，您必须配置到必要解码器的路径：

财产
描述
默认值
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 存储库.