Model: auto-rotate test


A model's DOMMatrixReadOnly entityTransform can be set to display a certain side, or to automatically animate the content.

HTML

<model alt="A model of a teapot">
    <source src="./teapot.usdz" type="model/vnd.usdz+zip" />
    <source src="./teapot.glb"  type="model/gltf-binary" />
</model>

JavaScript:

let initialTransform;
const model = document.querySelector('model');
await model.ready;
initialTransform = model.entityTransform.translate(0,0,-0.05);
requestAnimationFrame(update);

function update() {
    try {
        const angleY = performance.now()/10;
        model.entityTransform = initialTransform.rotate(0, angleY,0);
    } catch(error) {
        console.warn("failed to set transform", error);
    }
    requestAnimationFrame(update);
}

An image of a model of a teapot