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 id="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:

<script type="module">
    let initialTransform;
    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);
    }
</script>