Loaders for various 3D model types. All are trivial wrappers around one of the many THREE.js loader classes.
- gltf-model-legacy: Loader for glTF 1.0 format, removed from A-Frame core with v0.7.0 release. For glTF 2.0, use the
gltf-modelcomponent that ships with A-Frame.
- json-model: Loader for THREE.js .JSON format, generally containing a single mesh.
- object-model: Loader for THREE.js .JSON format, generally containing multiple meshes or an entire scene.
- ply-model: Loader for PLY format. Works well with occlusion and shadow baked models exported from MagicaVoxel.
- fbx-model: Loader for FBX format.
Unsure whether to use
object-model? Check the console for errors. See also: Clara.io | THREE.js Export.
<!-- three.js JSON --> <a-entity json-model="src: url(my-model.json);"></a-entity>
THREE.js models often need to be scaled down. Example:
<a-entity scale="0.5 0.5 0.5" object-model="src: url(my-model.json);"> </a-entity>
glTF and three.js models also support animation, through the
animation-mixer component. All animations will play by default, or you can specify
an animation and its duration:
|clip||*||Name of the animation clip(s) to play. Accepts wildcards.|
|duration||AUTO||Duration of the animation, in seconds.|
|crossFadeDuration||0||Duration of cross-fades between clips, in seconds.|
|repetitions||Infinity||Number of times to play the clip, in addition to the first play. Repetitions are ignored for
|timeScale||1||Scaling factor for playback speed. A value of 0 causes the animation to pause. Negative values cause the animation to play backwards.|
A list of available animations can usually be found by inspecting the model file or its documentation. All animations will play by default. To play only a specific set of animations, use wildcards:
animation-mixer component emits events at certain points in the animation cycle.
||Emitted when a single loop of the animation clip has finished.|
||Emitted when all loops of an animation clip have finished.|