1. 什么是3D模型
你可能记得我们在几何图形研讨会的最后添加了一个基于gltf-模型组件的鸭子模型。这个模型是一系列由三角形(一种网格)组成的几何图形对象集合,结合了纹理和内部动画。这个模型是Blender,Maya或Tinkercad等3D建模程序的输出。
VR中的所有一切都包含几何图形。这种几何图形定义了形状。它们可能看起来像是抽象的形状,比如说球体或圆柱体,但其背后是由三角形组成,因为只有这样计算机才知道如何进行绘制。使用a-sphere这样的A-Frame组件来将抽象形状转换为三角形。然而,有些形状过于复杂,无法用简单的数学进行描述。所以,我们必须使用3D建模工具来绘制这些形状。
3D建模工具非常强大,但它们需要大量的经验,而且它们输出的文件通常不能直接用于Web。相反,我们必须将从原生格式转换为适合Web的模式:GLTF。
2. 什么是GLTF?
GLTF代表Graphics Language Transmission Format(图形语言传输格式)。这种跨平台格式已成为Web上的3D对象标准。它由OpenGL和Vulkan背后的3D图形标准组织Khronos所定义,这使得GLTF基本上成为3D模型的JPG格式:Web导出的通用标准。
A-Frame和ThreeJS原生支持GLTF。尽管一些3D Web框架支持特定于平台的模型格式,如FBX和OBJ,但几乎每个框架都支持GLTF。如果有人要为你提供3D模型,你可以请求他们提供GLTF格式的版本。
3. 使用GLTF文件
要在A-Frame项目中使用GLTF,只需将其作为场景中的asset引用,然后通过gltf-model组件将其附加到实体即可。
重新混合这个故障项目示例。其中存在一个包含鸭子模型的实体。
当模型出现在场景后,你就可以使用a-animation组件执行简单的动画。尝试通过添加以下代码来令鸭子旋转:
这将随时间修改旋转属性。要令动画更短或更快,请更改持续时间属性。
a-animation只能处理非常简单的动画