GLB models and animations

Configure a model

<webar-model src="./model.glb" size="0.3" scale="1"
  position="0 0 0" rotation="0 180 0" animation="Walk"></webar-model>

Provide a self-contained GLB. size fits its largest dimension and the wrapper positions its base and center. scale multiplies that result, with a single factor or XYZ factors. Rotation uses XYZ degrees in HTML. Position is local to the tracked group. Set size relative to your marker or placement backend and inspect it on the target device.

Load and animate with JavaScript

const model = new WebARFacil.ThreeARModel();
await model.load('./model.glb', { fitSize: 0.3, autoplay: false });
model.playAnimation('Walk', { loop: 'repeat', speed: 1 });

Use fitSize:false to preserve model units. The renderer should update animation every frame even if no fresh tracking pose arrived. Stop clips when required and dispose the model and scene when leaving a page or route.

Compression and rendering cost

The standalone includes Draco and Meshopt. For custom builds, configure Draco decoder paths if external assets are used. Compression primarily reduces transfer size. Inspect triangles, texture sizes, materials, draw calls and animation complexity when a scene is slow. Compare the same experience with a lightweight GLB to isolate render cost. Camera and performance

Change src to replace content and await the element's updateComplete. Use the animation example to inspect clips and the interaction guide for playback controls.