@needle-tools/engine 3.28.6-beta → 3.28.7-beta.1

package/src/engine-components/export/usdz/extensions/behavior/BehaviourComponents.ts

@@ -1,964 +1,964 @@
-import { Behaviour, GameObject } from "../../../../Component.js";
-import { Animator } from "../../../../Animator.js";
-import { Renderer } from "../../../../Renderer.js";
-import { serializable } from "../../../../../engine/engine_serialization_decorator.js";
-import type { IPointerClickHandler, PointerEventData } from "../../../../ui/PointerEvents.js";
-import { AnimationExtension, RegisteredAnimationInfo, type UsdzAnimation } from "../Animation.js";
-import { getWorldPosition, getWorldQuaternion, getWorldScale, setWorldPosition, setWorldQuaternion, setWorldScale } from "../../../../../engine/engine_three_utils.js";
-
-import { Object3D, Material, Vector3, Quaternion, Mesh, Group } from "three";
-import { USDDocument, USDObject, USDZExporterContext } from "../../ThreeUSDZExporter.js";
-
-import type { BehaviorExtension, UsdzBehaviour } from "./Behaviour.js";
-import { ActionBuilder, ActionModel, AuralMode, BehaviorModel, type IBehaviorElement, MotionType, PlayAction, Space, TriggerBuilder, GroupActionModel, MultiplePerformOperation } from "./BehavioursBuilder.js";
-import { AudioSource } from "../../../../AudioSource.js";
-import { NEEDLE_progressive } from "../../../../../engine/extensions/NEEDLE_progressive.js";
-import { isDevEnvironment, showBalloonWarning } from "../../../../../engine/debug/index.js";
-import { Raycaster, ObjectRaycaster } from "../../../../ui/Raycaster.js";
-import type { State } from "../../../../../engine/extensions/NEEDLE_animator_controller_model.js";
-
-function ensureRaycaster(obj: GameObject) {
-    if (!obj) return;
-    if (!obj.getComponentInParent(Raycaster)) {
-        if (isDevEnvironment()) console.warn("Create Raycaster on " + obj.name + " because no raycaster was found in the hierarchy")
-        obj.addNewComponent(ObjectRaycaster);
-    }
-}
-
-export class ChangeTransformOnClick extends Behaviour implements IPointerClickHandler, UsdzBehaviour {
-
-    @serializable(Object3D)
-    object?: Object3D;
-
-    @serializable(Object3D)
-    target?: Object3D;
-
-    @serializable()
-    duration: number = 1;
-
-    @serializable()
-    relativeMotion: boolean = false;
-
-    private coroutine: Generator | null = null;
-
-    private targetPos = new Vector3();
-    private targetRot = new Quaternion();
-    private targetScale = new Vector3();
-
-    start(): void {
-        ensureRaycaster(this.gameObject);
-    }
-
-    onPointerClick(args: PointerEventData) {
-        args.use();
-        if (this.coroutine) this.stopCoroutine(this.coroutine);
-        if (!this.relativeMotion)
-            this.coroutine = this.startCoroutine(this.moveToTarget());
-        else
-            this.coroutine = this.startCoroutine(this.moveRelative());
-    }
-
-    private *moveToTarget() {
-
-        if (!this.target || !this.object) return;
-
-        const thisPos = getWorldPosition(this.object).clone();
-        const targetPos = getWorldPosition(this.target).clone();
-
-        const thisRot = getWorldQuaternion(this.object).clone();
-        const targetRot = getWorldQuaternion(this.target).clone();
-
-        const thisScale = getWorldScale(this.object).clone();
-        const targetScale = getWorldScale(this.target).clone();
-
-        const dist = thisPos.distanceTo(targetPos);
-        const rotDist = thisRot.angleTo(targetRot);
-        const scaleDist = thisScale.distanceTo(targetScale);
-
-        if (dist < 0.01 && rotDist < 0.01 && scaleDist < 0.01) {
-            setWorldPosition(this.object, targetPos);
-            setWorldQuaternion(this.object, targetRot);
-            setWorldScale(this.object, targetScale);
-            this.coroutine = null;
-            return;
-        }
-
-        let t01 = 0;
-        let eased = 0;
-        while (t01 < 1) {
-
-            t01 += this.context.time.deltaTime / this.duration;
-            if (t01 > 1) t01 = 1;
-
-            // apply ease-in-out
-            // https://easings.net/
-            eased = t01 < 0.5 ? 4 * t01 * t01 * t01 : 1 - Math.pow(-2 * t01 + 2, 3) / 2;
-
-            this.targetPos.lerpVectors(thisPos, targetPos, eased);
-            this.targetRot.slerpQuaternions(thisRot, targetRot, eased);
-            this.targetScale.lerpVectors(thisScale, targetScale, eased);
-
-            setWorldPosition(this.object, this.targetPos);
-            setWorldQuaternion(this.object, this.targetRot);
-            setWorldScale(this.object, this.targetScale);
-
-            yield;
-        }
-
-        this.coroutine = null;
-    }
-
-    private *moveRelative() {
-
-        if (!this.target || !this.object) return;
-
-        const thisPos = this.object.position.clone();
-        const thisRot = this.object.quaternion.clone();
-        const thisScale = this.object.scale.clone();
-
-        const posOffset = this.target.position.clone();
-        const rotOffset = this.target.quaternion.clone();
-        const scaleOffset = this.target.scale.clone();
-
-        // convert into right space
-        posOffset.applyQuaternion(this.object.quaternion);
-
-        this.targetPos.copy(this.object.position).add(posOffset);
-        this.targetRot.copy(this.object.quaternion).multiply(rotOffset);
-        this.targetScale.copy(this.object.scale).multiply(scaleOffset);
-
-        let t01 = 0;
-        let eased = 0;
-        while (t01 < 1) {
-
-            t01 += this.context.time.deltaTime / this.duration;
-            if (t01 > 1) t01 = 1;
-
-            // apply ease-in-out
-            // https://easings.net/
-            eased = t01 < 0.5 ? 4 * t01 * t01 * t01 : 1 - Math.pow(-2 * t01 + 2, 3) / 2;
-
-            this.object.position.lerpVectors(thisPos, this.targetPos, eased);
-            this.object.quaternion.slerpQuaternions(thisRot, this.targetRot, eased);
-            this.object.scale.lerpVectors(thisScale, this.targetScale, eased);
-
-            yield;
-        }
-
-        this.coroutine = null;
-    }
-
-    beforeCreateDocument(ext) {
-        if (this.target && this.object && this.gameObject) {
-            const moveForward = new BehaviorModel("Move to " + this.target?.name,
-                TriggerBuilder.tapTrigger(this.gameObject),
-                ActionBuilder.transformAction(this.object, this.target, this.duration, this.relativeMotion ? Space.Relative : Space.Absolute),
-            );
-            ext.addBehavior(moveForward);
-        }
-    }
-}
-
-export class ChangeMaterialOnClick extends Behaviour implements IPointerClickHandler, UsdzBehaviour {
-
-    @serializable(Material)
-    materialToSwitch?: Material;
-
-    @serializable(Material)
-    variantMaterial?: Material;
-
-    @serializable()
-    fadeDuration: number = 0;
-
-    private _objectsWithThisMaterial: Mesh[] = [];
-
-    awake() {
-        if (this.variantMaterial && this.materialToSwitch) {
-            const renderer = GameObject.findObjectsOfType(Renderer);
-            for (const rend of renderer) {
-                for (let i = 0; i < rend.sharedMaterials.length; i++) {
-                    const mat = rend.sharedMaterials[i];
-                    if (mat === this.materialToSwitch) {
-                        if (rend.gameObject instanceof Mesh) {
-                            this._objectsWithThisMaterial.push(rend.gameObject);
-                        }
-                        else if (rend.gameObject instanceof Group) {
-                            for (const child of rend.gameObject.children) {
-                                if (child instanceof Mesh && child.material === mat) {
-                                    this._objectsWithThisMaterial.push(child);
-                                }
-                            }
-                        }
-                        break;
-                    }
-                }
-            }
-        }
-    }
-
-    start(): void {
-        ensureRaycaster(this.gameObject);
-    }
-
-    onPointerClick(args: PointerEventData) {
-        args.use();
-        if (!this.variantMaterial) return;
-        for (let i = 0; i < this._objectsWithThisMaterial.length; i++) {
-            const obj = this._objectsWithThisMaterial[i];
-            obj.material = this.variantMaterial;
-        }
-    }
-
-    private selfModel!: USDObject;
-    private targetModels!: USDObject[];
-
-    private static _materialTriggersPerId: { [key: string]: ChangeMaterialOnClick[] } = {}
-
-
-    async beforeCreateDocument(_ext: BehaviorExtension, _context) {
-        this.targetModels = [];
-        ChangeMaterialOnClick._materialTriggersPerId = {}
-        ChangeMaterialOnClick.variantSwitchIndex = 0;
-
-        // Ensure that the progressive textures have been loaded for all variants and materials
-        if (this.materialToSwitch) {
-            await NEEDLE_progressive.assignTextureLOD(this.context, this.sourceId, this.materialToSwitch, 0);
-        }
-        if (this.variantMaterial) {
-            await NEEDLE_progressive.assignTextureLOD(this.context, this.sourceId, this.variantMaterial, 0);
-        }
-    }
-
-
-    createBehaviours(_ext: BehaviorExtension, model: USDObject, _context) {
-
-        const shouldExport = this._objectsWithThisMaterial.find(o => o.uuid === model.uuid);
-        if (shouldExport) {
-            this.targetModels.push(model);
-        }
-        if (this.gameObject.uuid === model.uuid) {
-            this.selfModel = model;
-            if (this.materialToSwitch) {
-                if (!ChangeMaterialOnClick._materialTriggersPerId[this.materialToSwitch.uuid])
-                    ChangeMaterialOnClick._materialTriggersPerId[this.materialToSwitch.uuid] = [];
-                ChangeMaterialOnClick._materialTriggersPerId[this.materialToSwitch.uuid].push(this);
-            }
-        }
-    }
-
-    afterCreateDocument(ext: BehaviorExtension, _context) {
-
-        if (!this.materialToSwitch) return;
-        const handlers = ChangeMaterialOnClick._materialTriggersPerId[this.materialToSwitch.uuid];
-        if (handlers) {
-            const variants: { [key: string]: Array<USDObject> } = {}
-            for (const handler of handlers) {
-                const createdVariants = handler.createVariants();
-                if (createdVariants && createdVariants.length > 0)
-                    variants[handler.selfModel.uuid] = createdVariants;
-            }
-            for (const handler of handlers) {
-                const otherVariants: Array<USDObject> = [];
-                for (const key in variants) {
-                    if (key !== handler.selfModel.uuid) {
-                        otherVariants.push(...variants[key]);
-                    }
-                }
-                handler.createAndAttachBehaviors(ext, variants[handler.selfModel.uuid], otherVariants);
-            }
-        }
-        delete ChangeMaterialOnClick._materialTriggersPerId[this.materialToSwitch.uuid];
-    }
-
-    private createAndAttachBehaviors(ext: BehaviorExtension, myVariants: Array<USDObject>, otherVariants: Array<USDObject>) {
-        const start: ActionModel[] = [];
-        const select: ActionModel[] = [];
-
-        const fadeDuration = Math.max(0, this.fadeDuration);
-
-        select.push(ActionBuilder.fadeAction([...this.targetModels, ...otherVariants], fadeDuration, false));
-        start.push(ActionBuilder.fadeAction(myVariants, fadeDuration, false));
-        select.push(ActionBuilder.fadeAction(myVariants, fadeDuration, true));
-
-        ext.addBehavior(new BehaviorModel("Select_" + this.selfModel.name,
-            TriggerBuilder.tapTrigger(this.selfModel),
-            ActionBuilder.parallel(...select))
-        );
-        ext.addBehavior(new BehaviorModel("StartHidden_" + this.selfModel.name,
-            TriggerBuilder.sceneStartTrigger(),
-            ActionBuilder.parallel(...start))
-        );
-    }
-
-    static variantSwitchIndex: number = 0;
-    private createVariants() {
-        if (!this.variantMaterial) return null;
-
-        const variantModels: USDObject[] = [];
-        for (const target of this.targetModels) {
-            const variant = target.clone();
-            variant.name += " variant_" + this.variantMaterial.name + "_" + ChangeMaterialOnClick.variantSwitchIndex++;
-            variant.name = variant.name.replace(/\s/g, "_");
-            variant.material = this.variantMaterial;
-            variant.geometry = target.geometry;
-            variant.matrix = target.matrix;
-
-            if (!target.parent || !target.parent.isEmpty()) {
-                USDObject.createEmptyParent(target);
-            }
-            if (target.parent) target.parent.add(variant);
-            variantModels.push(variant);
-        }
-        return variantModels;
-    }
-}
-
-export class SetActiveOnClick extends Behaviour implements IPointerClickHandler, UsdzBehaviour {
-
-    @serializable(Object3D)
-    target?: Object3D;
-
-    @serializable()
-    toggleOnClick: boolean = false;
-
-    @serializable()
-    targetState: boolean = true;
-
-    @serializable()
-    hideSelf: boolean = true;
-
-    start(): void {
-        ensureRaycaster(this.gameObject);
-    }
-
-    onPointerClick(args: PointerEventData) {
-        args.use();
-
-        if (!this.toggleOnClick && this.hideSelf)
-            this.gameObject.visible = false;
-        
-        if (this.target)
-            this.target.visible = this.toggleOnClick ? !this.target.visible : this.targetState;
-    }
-
-    private selfModel!: USDObject;
-    private selfModelClone!: USDObject;
-    private targetModel?: USDObject;
-    private toggleModel?: USDObject;
-
-    createBehaviours(_, model, _context) {
-        if (model.uuid === this.gameObject.uuid) {
-            this.selfModel = model;
-            this.selfModelClone = model.clone();
-        }
-    }
-
-    private stateBeforeCreatingDocument: boolean = false;
-    private targetStateBeforeCreatingDocument: boolean = false;
-    private static clonedToggleIndex = 0;
-    private static wasVisible = Symbol("usdz_SetActiveOnClick_wasVisible");
-    private static toggleClone = Symbol("clone for toggling");
-    private static reverseToggleClone = Symbol("clone for reverse toggling");
-
-    beforeCreateDocument() {
-        if (!this.target) return;
-        
-        // need to cache on the object itself, because otherwise different actions would override each other's visibility state
-        // TODO would probably be better to have this somewhere on the exporter, not on this component
-        if (this.gameObject[SetActiveOnClick.wasVisible] === undefined)
-            this.gameObject[SetActiveOnClick.wasVisible] = this.gameObject.activeSelf;
-        if (this.target[SetActiveOnClick.wasVisible] === undefined)
-            this.target[SetActiveOnClick.wasVisible] = (this.target as GameObject).activeSelf;
-
-        this.stateBeforeCreatingDocument = this.gameObject[SetActiveOnClick.wasVisible];
-        this.targetStateBeforeCreatingDocument = this.target[SetActiveOnClick.wasVisible];
-
-        // Objects need to be on so they are exported, as we're skipping invisible objects
-        this.gameObject.visible = true;
-        this.target.visible = true;
-    }
-
-    afterCreateDocument(ext, context) {
-        if (!this.target) return;
-
-        // Parameters:
-        // - hideSelf: the trigger is hidden after clicking. Can basically only be used once.
-        // - toggleOnClick: the target is toggled on/off when the trigger is clicked.
-        // - targetState: the target is set to this state when the trigger is clicked.
-
-        // Combinations:
-        // - when toggleOnClick is on, hideSelf is ignored
-        //   - we need to make a copy of our object
-        //   - when the trigger is clicked
-        //     - hide the original trigger
-        //     - show the copied trigger
-        //     - set the target to targetState
-        //   - when the copied trigger is clicked
-        //     - hide the copied trigger
-        //     - show the original trigger again
-        //     - set the target to !targetState
-        // - when toggleOnClick is off, hideSelf is used
-        //   - no copy is needed 
-        //   - when the trigger is clicked
-        //     - hide the trigger
-        //     - set the target to the targetState
-
-        this.targetModel = context.document.findById(this.target.uuid);
-        const originalModel = this.selfModel;
-
-        if (this.selfModel && this.targetModel) {
-            let selfModel = this.selfModel;
-            let targetState = this.targetState;
-
-            // if we toggle, we need to create a copy of our object
-            if (this.toggleOnClick) {
-                // When toggling we want to respect the current state of the target,
-                // so effectively this.targetState and this.hideSelf are ignored.
-                targetState = !this.targetStateBeforeCreatingDocument;
-
-
-                // Potentially it's easier/better to just "clone" and put the object as a sibling next
-                // to the rest of the hierarchy. This way we would lose nested clicks (clicking on a child would not trigger events)
-                // but we're not potentially duplicating tons of objects.
-                // It's much easier to reason about nested actions when we're not duplicating tons of hierarchy...
-                // We can probably only do a shallow clone when the tapped object has geometry of its own, otherwise
-                // we end up with nothing to tap on.
-                
-                // Option A: we deep clone ourselves. This makes hierarchical cases and nested behaviours really complex.
-                // We do this currently when the object doesn't have any geometry.
-                if (!this.selfModelClone.geometry) {
-                    if (!this.selfModel.parent || this.selfModel.parent.isEmpty())
-                        USDDocument.createEmptyParent(this.selfModel);
-                    this.toggleModel = this.selfModel.deepClone();
-                    this.toggleModel.name += "_toggle";
-                    this.selfModel.parent!.add(this.toggleModel);
-                }
-                else {
-                    // Option B: we shallow clone ourselves and put the clone next to us. This means childs are not clickable anymore.
-                    // We create clones exactly once for this gameObject, so that all SetActiveOnClick on the same object use the same trigger.
-                    if (!this.gameObject[SetActiveOnClick.toggleClone]) {
-                        const clone = this.selfModelClone.clone();
-                        clone.matrix.identity();
-                        clone.name += "_toggle" + (SetActiveOnClick.clonedToggleIndex++);
-                        originalModel.add(clone);
-                        this.gameObject[SetActiveOnClick.toggleClone] = clone;
-                        
-                        console.warn("USDZExport: Toggle " + this.gameObject.name + " doesn't have geometry. It will be deep cloned and nested behaviours will likely not work.");
-                    }
-                    const clonedSelfModel = this.gameObject[SetActiveOnClick.toggleClone];
-                    
-                    if (!this.gameObject[SetActiveOnClick.reverseToggleClone]) {
-                        const clone = this.selfModelClone.clone();
-                        clone.matrix.identity();
-                        clone.name += "_toggleReverse" + (SetActiveOnClick.clonedToggleIndex++);
-                        originalModel.add(clone);
-                        this.gameObject[SetActiveOnClick.reverseToggleClone] = clone;
-                    }
-                    this.toggleModel = this.gameObject[SetActiveOnClick.reverseToggleClone];
-
-                    if (!this.toggleModel!.geometry || !clonedSelfModel.geometry) {
-                        console.error("triggers without childs and without geometry won't work!", this, originalModel.geometry)
-                    }
-
-                    // We're targeting the clone in the actions below, not the original object
-                    selfModel = clonedSelfModel;
-
-                    // Remove the geometry, we've duplicated it into the toggle/reverseToggle already
-                    originalModel.geometry = null;
-                    originalModel.material = null;
-
-                    // Known issues: clone() does not clone skinned mesh geometry, lights, cameras;
-                    // we still have them on the original object and the clones won't have it.
-                }
-            }
-
-            // this.toggleOnClick is false, so we don't have a toggleModel – no need for clones,
-            // just set the target object to targetState and optionally hide ourselves
-            if (!this.toggleModel) {
-                const sequence: ActionModel[] = [];
-                if (this.hideSelf)
-                    sequence.push(ActionBuilder.fadeAction(selfModel, 0, false));
-                sequence.push(ActionBuilder.fadeAction(this.targetModel, 0, targetState));
-
-                ext.addBehavior(new BehaviorModel("Toggle_" + selfModel.name + "_toggleTo" + (targetState ? "On" : "Off"),
-                    TriggerBuilder.tapTrigger(selfModel),
-                    ActionBuilder.parallel(...sequence)
-                ));
-            }
-            // We have a toggleModel, so we need to set up two sequences:
-            // - one that hides the original object, shows the toggle and sets the target to targetState
-            // - one that hides the toggle, shows the original object and sets the target to !targetState
-            else if (this.toggleOnClick) {
-                const toggleSequence: ActionModel[] = [];
-                toggleSequence.push(ActionBuilder.fadeAction(selfModel, 0, false));
-                toggleSequence.push(ActionBuilder.fadeAction(this.toggleModel, 0, true));
-                toggleSequence.push(ActionBuilder.fadeAction(this.targetModel, 0, targetState));
-
-                ext.addBehavior(new BehaviorModel("Toggle_" + selfModel.name + "_toggleTo" + (targetState ? "On" : "Off"),
-                    TriggerBuilder.tapTrigger(selfModel),
-                    ActionBuilder.parallel(...toggleSequence)
-                ));
-                
-                const reverseSequence: ActionModel[] = [];
-                reverseSequence.push(ActionBuilder.fadeAction(this.toggleModel, 0, false));
-                reverseSequence.push(ActionBuilder.fadeAction(selfModel, 0, true));
-                reverseSequence.push(ActionBuilder.fadeAction(this.targetModel, 0, !targetState));
-
-                ext.addBehavior(new BehaviorModel("Toggle_" + selfModel.name + "_toggleTo" + (!targetState ? "On" : "Off"),
-                    TriggerBuilder.tapTrigger(this.toggleModel),
-                    ActionBuilder.parallel(...reverseSequence)
-                ));
-            }
-
-            // Ensure initial states are set correctly so that we get the same result as was currently active in the runtime
-            const objectsToHide = new Array<USDObject>();
-            if (!this.targetStateBeforeCreatingDocument)
-                objectsToHide.push(this.targetModel);
-            if (!this.stateBeforeCreatingDocument)
-                objectsToHide.push(originalModel);
-            if (this.toggleModel)
-                objectsToHide.push(this.toggleModel);
-
-            ext.addBehavior(new BehaviorModel("HideOnStart_" + this.gameObject.name,
-                TriggerBuilder.sceneStartTrigger(),
-                ActionBuilder.fadeAction(objectsToHide, 0, false)
-            ));
-        }
-    }
-
-    afterSerialize(_ext: BehaviorExtension, _context: USDZExporterContext): void {
-        // cleanup visibility cache
-        if (this.gameObject[SetActiveOnClick.wasVisible] !== undefined) {
-            this.gameObject.visible = this.gameObject[SetActiveOnClick.wasVisible];
-            delete this.gameObject[SetActiveOnClick.wasVisible];
-        }
-        if (this.target && this.target[SetActiveOnClick.wasVisible] !== undefined) {
-            this.target.visible = this.target[SetActiveOnClick.wasVisible];
-            delete this.target[SetActiveOnClick.wasVisible];
-        }
-
-        // cleanup trigger clones
-        delete this.gameObject[SetActiveOnClick.toggleClone];
-        delete this.gameObject[SetActiveOnClick.reverseToggleClone];
-    }
-}
-
-export class HideOnStart extends Behaviour implements UsdzBehaviour {
-
-    start() {
-        this.gameObject.visible = false;
-    }
-
-    createBehaviours(ext, model, _context) {
-        if (model.uuid === this.gameObject.uuid)
-            ext.addBehavior(new BehaviorModel("HideOnStart_" + this.gameObject.name,
-                TriggerBuilder.sceneStartTrigger(),
-                ActionBuilder.fadeAction(model, 0, false)
-            ));
-    }
-
-    beforeCreateDocument() {
-        this.gameObject.visible = true;
-    }
-
-    afterCreateDocument() {
-        this.gameObject.visible = false;
-    }
-}
-
-export class EmphasizeOnClick extends Behaviour implements UsdzBehaviour {
-
-    @serializable()
-    target?: Object3D;
-
-    @serializable()
-    duration: number = 0.5;
-
-    @serializable()
-    motionType: MotionType = MotionType.bounce;
-
-    beforeCreateDocument() { }
-
-    createBehaviours(ext, model, _context) {
-        if (!this.target) return;
-
-        if (model.uuid === this.gameObject.uuid) {
-            const emphasize = new BehaviorModel("emphasize " + this.name,
-                TriggerBuilder.tapTrigger(this.gameObject),
-                ActionBuilder.emphasize(this.target, this.duration, this.motionType, undefined, "basic"),
-            );
-            ext.addBehavior(emphasize);
-        }
-    }
-
-    afterCreateDocument(_ext, _context) { }
-}
-
-export class PlayAudioOnClick extends Behaviour implements IPointerClickHandler, UsdzBehaviour {
-
-    @serializable(AudioSource)
-    target?: AudioSource;
-
-    @serializable(URL)
-    clip: string = "";
-
-    @serializable()
-    toggleOnClick: boolean = false;
-
-    start(): void {
-        ensureRaycaster(this.gameObject);
-    }
-
-    ensureAudioSource() {
-        if (!this.target) {
-            const newAudioSource = this.gameObject.addNewComponent(AudioSource);
-            if (newAudioSource) {
-                this.target = newAudioSource;
-                newAudioSource.spatialBlend = 1;
-                newAudioSource.volume = 1;
-                newAudioSource.loop = false;
-            }
-        }
-    }
-
-    onPointerClick(args: PointerEventData) {
-        args.use();
-
-        if (!this.target?.clip && !this.clip) return;
-
-        this.ensureAudioSource();
-
-        if (this.target) {
-
-            if (this.target.isPlaying && this.toggleOnClick) {
-                this.target.stop();
-            }
-            else {
-                if (!this.toggleOnClick && this.target.isPlaying) {
-                    this.target.stop();
-                }
-                if (this.clip) this.target.play(this.clip);
-                else this.target.play();
-            }
-        }
-    }
-
-    createBehaviours(ext, model, _context) {
-        if (!this.target && !this.clip) return;
-        if (model.uuid === this.gameObject.uuid) {
-
-            const clipUrl = this.clip ? this.clip : this.target ? this.target.clip : undefined;
-            if (!clipUrl) return;
-            if (typeof clipUrl !== "string") return;
-
-            const playbackTarget = this.target ? this.target.gameObject : this.gameObject;
-            const clipName = clipUrl.split("/").pop();
-            const volume = this.target ? this.target.volume : 1;
-            const auralMode = this.target && this.target.spatialBlend == 0 ? AuralMode.NonSpatial : AuralMode.Spatial;
-            
-            // regular tap trigger
-            {
-                let playAction: IBehaviorElement = ActionBuilder.playAudioAction(playbackTarget, "audio/" + clipName, PlayAction.Play, volume, auralMode);
-                // does not seem to work in iOS / QuickLook...
-                if (this.toggleOnClick) (playAction as ActionModel).multiplePerformOperation = MultiplePerformOperation.Stop;
-                if (this.target && this.target.loop)
-                    playAction = ActionBuilder.sequence(playAction).makeLooping();
-                const playClipOnTap = new BehaviorModel("playAudio " + this.name,
-                    TriggerBuilder.tapTrigger(this.gameObject),
-                    playAction,
-                );
-                ext.addBehavior(playClipOnTap);
-            }
-
-            // automatically play audio on start too if the referenced AudioSource has playOnAwake enabled
-            if (this.target && this.target.playOnAwake && this.target.enabled) {
-                let playAction: IBehaviorElement = ActionBuilder.playAudioAction(playbackTarget, "audio/" + clipName, PlayAction.Play, volume, auralMode);
-                if (this.target.loop)
-                    playAction = ActionBuilder.sequence(playAction).makeLooping();
-                const playClipOnStart = new BehaviorModel("playAudioOnStart " + this.name,
-                    TriggerBuilder.sceneStartTrigger(),
-                    playAction,
-                );
-                ext.addBehavior(playClipOnStart);
-            }
-        }
-    }
-
-    async afterSerialize(_ext, context) {
-        if (!this.target && !this.clip) return;
-        const clipUrl = this.clip ? this.clip : this.target ? this.target.clip : undefined;
-        if (!clipUrl) return;
-        if (typeof clipUrl !== "string") return;
-        const clipName = clipUrl.split("/").pop();
-
-        const audio = await fetch(clipUrl);
-        const audioBlob = await audio.blob();
-        const arrayBuffer = await audioBlob.arrayBuffer();
-
-        const audioData: Uint8Array = new Uint8Array(arrayBuffer)
-
-        context.files["audio/" + clipName] = audioData;
-    }
-}
-
-export class PlayAnimationOnClick extends Behaviour implements IPointerClickHandler, UsdzBehaviour, UsdzAnimation {
-
-    @serializable(Animator)
-    animator?: Animator;
-
-    @serializable()
-    stateName?: string;
-
-    // Not editable from the outside yet, but from code
-    // we want to expose this once we have a nice drawer for "Triggers" (e.g. shows proximity distance)
-    // and once we rename the component to "PlayAnimation" or "PlayAnimationOnTrigger"
-    trigger: "tap" | "start" = "tap"; // "proximity"
-
-    private get target() { return this.animator?.gameObject }
-
-    start(): void {
-        ensureRaycaster(this.gameObject);
-    }
-
-    onPointerClick(args: PointerEventData) {
-        args.use();
-        if (!this.target) return;
-        if (this.stateName) {
-            // TODO this is currently quite annoying to use,
-            // as for the web we use the Animator component and its states directly,
-            // while in QuickLook we use explicit animations / states.
-            this.animator?.play(this.stateName, 0, 0, .1);
-        }
-    }
-
-    private selfModel: any;
-
-    private stateAnimationModel: any;
-
-    private animationSequence? = new Array<RegisteredAnimationInfo>();
-    private animationLoopAfterSequence? = new Array<RegisteredAnimationInfo>();
-
-    createBehaviours(_ext, model, _context) {
-        if (model.uuid === this.gameObject.uuid)
-            this.selfModel = model;
-    }
-
-    private static animationActions: ActionModel[] = [];
-    private static rootsWithExclusivePlayback: Set<Object3D> = new Set();
-
-    // Cleanup. TODO This is not the best way as it's called multiple times (once for each component).
-    afterSerialize() {
-        if (PlayAnimationOnClick.rootsWithExclusivePlayback.size > 1) {
-            const message = "Multiple root objects targeted by more than one animation. To work around QuickLook bug FB13410767, animations will be set as \"exclusive\" and activating them will stop other animations being marked as exclusive.";
-            if (isDevEnvironment()) showBalloonWarning(message);
-            console.warn(message, ...PlayAnimationOnClick.rootsWithExclusivePlayback);
-        }
-        PlayAnimationOnClick.animationActions = [];
-        PlayAnimationOnClick.rootsWithExclusivePlayback = new Set();
-    }
-
-    afterCreateDocument(ext: BehaviorExtension, context: USDZExporterContext) {
-        if (!this.animationSequence || !this.stateAnimationModel) return;
-        if (!this.target) return;
-        
-        const document = context.document;
-        
-        // check if the AnimationExtension has been attached and what data it has for the current object
-        const animationExt = context.extensions.find(ext => ext instanceof AnimationExtension) as AnimationExtension;
-        if (!animationExt) return;
-
-        // This is a workaround for FB13410767 - StartAnimationAction in USDZ preliminary behaviours does not stop when another StartAnimationAction is called on the same prim
-        // When we play multiple animations on the same root, QuickLook just overlaps them and glitches around instead of stopping an earlier one.
-        // Once this is fixed, we can relax this check and just always make it non-exclusive again.
-        // Setting exclusive playback has the side effect of unfortunately canceling all other playing actions that are exclusive too -
-        // seems there is no finer-grained control over which actions should stop which other actions...
-        const requiresExclusivePlayback = animationExt.getClipCount(this.target) > 1;
-        if (requiresExclusivePlayback) {
-            if (isDevEnvironment())
-                console.warn("Setting exclusive playback for " + this.target.name + "@" + this.stateName + " because it has " + animationExt.getClipCount(this.target) + " animations. This works around QuickLook bug FB13410767.");
-            
-            PlayAnimationOnClick.rootsWithExclusivePlayback.add(this.target);
-        }
-
-        const getOrCacheAction = (model: USDObject, anim: RegisteredAnimationInfo) => {
-            let action = PlayAnimationOnClick.animationActions.find(a => a.affectedObjects == model && a.start == anim.start && a.duration == anim.duration);
-            if (!action) {
-                action = ActionBuilder.startAnimationAction(model, anim.start, anim.duration) as ActionModel;
-                PlayAnimationOnClick.animationActions.push(action);
-            }
-            return action;
-        }
-
-        document.traverse(model => {
-            if (model.uuid === this.target?.uuid) {
-                const sequence = ActionBuilder.sequence();
-
-                if (this.animationSequence !== undefined)
-                for (const anim of this.animationSequence) {
-                    sequence.addAction(getOrCacheAction(model, anim));
-                }
-
-                if (this.animationLoopAfterSequence !== undefined) {
-                    // only make a new action group if there's already stuff in the existing one
-                    const loopSequence = sequence.actions.length == 0 ? sequence : ActionBuilder.sequence();
-                    for (const anim of this.animationLoopAfterSequence) {
-                        loopSequence.addAction(getOrCacheAction(model, anim));
-                    }
-                    loopSequence.makeLooping();
-                    if (sequence !== loopSequence)
-                        sequence.addAction(loopSequence);
-                }
-
-                const playAnimationOnTap = new BehaviorModel("tap " + this.name + " for " + this.stateName + " on " + this.target?.name,
-                    this.trigger == "tap" ? TriggerBuilder.tapTrigger(this.selfModel) : TriggerBuilder.sceneStartTrigger(),
-                    sequence
-                );
-                
-                // See comment above for why exclusive playback is currently required when playing multiple animations on the same root.
-                if (requiresExclusivePlayback)
-                    playAnimationOnTap.makeExclusive(true);
-                ext.addBehavior(playAnimationOnTap);
-            }
-        });
-    }
-
-    createAnimation(ext, model, _context) {
-        if (!this.target || !this.animator) return;
-
-        // If there's a separate state specified to play after this one, we 
-        // play it automatically. Theoretically an animator state machine flow could be encoded here.
-
-        // We're parsing the Animator states here and follow the transition chain until we find a loop.
-        // There are some edge cases:
-        // - (0 > 1.looping) should keep looping (1).
-        // - (0 > 1 > 1) should keep looping (1).
-        // - (0 > 1 > 2 > 3 > 2) should keep looping (2,3).
-        // - (0 > 1 > 2 > 3 > 0) should keep looping (0,1,2,3).
-        const runtimeController = this.animator?.runtimeAnimatorController;
-        let currentState = runtimeController?.findState(this.stateName);
-        let statesUntilLoop: State[] = [];
-        let statesLooping: State[] = [];
-
-        if (runtimeController && currentState) {
-            // starting point – we have set this above already as startAction
-            const visitedStates = new Array<State>;
-            visitedStates.push(currentState);
-            let foundLoop = false;
-
-            while (true && visitedStates.length < 100) {
-                if (!currentState || currentState === null || !currentState.transitions || currentState.transitions.length === 0) {
-                    if (currentState.motion?.isLooping)
-                        foundLoop = true;
-                    break;
-                }
-
-                // find the first transition without parameters
-                // TODO we could also find the first _valid_ transition here instead based on the current parameters.
-                const transition = currentState.transitions.find(t => t.conditions.length === 0);
-                const nextState = transition ? runtimeController["getState"](transition.destinationState, 0) : null;
-                // abort: we found a state loop
-                if (nextState && visitedStates.includes(nextState)) {
-                    currentState = nextState;
-                    foundLoop = true;
-                    break;
-                }
-                // keep looking: transition to another state
-                else if (transition) {
-                    currentState = nextState;
-                    if (!currentState)
-                        break;
-                    visitedStates.push(currentState);
-                }
-                // abort: no transition found. check if last state is looping
-                else {
-                    foundLoop = currentState.motion?.isLooping ?? false;
-                    break;
-                }
-            }
-
-            if (foundLoop && currentState) {
-                // check what the first state in the loop is – it must be matching the last one we added
-                const firstStateInLoop = visitedStates.indexOf(currentState);
-                statesUntilLoop = visitedStates.slice(0, firstStateInLoop); // can be empty, which means we're looping all
-                statesLooping = visitedStates.slice(firstStateInLoop); // can be empty, which means nothing is looping
-                console.log("found loop from " + this.stateName, "states until loop", statesUntilLoop, "states looping", statesLooping);
-            }
-            else {
-                statesUntilLoop = visitedStates;
-                statesLooping = [];
-                console.log("found no loop from " + this.stateName, "states", statesUntilLoop);
-            }
-        }
-
-        // filter out any states that don't have motion data
-        statesUntilLoop = statesUntilLoop.filter(s => s.motion?.clip && s.motion?.clip.tracks?.length > 0);
-        statesLooping = statesLooping.filter(s => s.motion?.clip && s.motion?.clip.tracks?.length > 0);
-
-        // If none of the found states have motion, we need to warn
-        if (statesUntilLoop.length === 0 && statesLooping.length === 0) {
-            console.warn("No clips found for state " + this.stateName + " on " + this.animator?.name + ", can't export animation data");
-            return;
-        }
-        this.stateAnimationModel = model;
-
-        // Register all the animation states we found.
-        if (statesUntilLoop.length > 0) {
-            this.animationSequence = new Array<RegisteredAnimationInfo>();
-            for (const state of statesUntilLoop) {
-                this.animationSequence.push(ext.registerAnimation(this.target, state.motion.clip));
-            }
-        }
-        if (statesLooping.length > 0) {
-            this.animationLoopAfterSequence = new Array<RegisteredAnimationInfo>();
-            for (const state of statesLooping) {
-                this.animationLoopAfterSequence.push(ext.registerAnimation(this.target, state.motion.clip));
-            }
-        }
-    }
-
-}
-
-export class PreliminaryAction extends Behaviour {
-    getType(): string | void { }
-    @serializable(Object3D)
-    target?: Object3D;
-
-
-    getDuration(): number | void { };
-}
-
-export class PreliminaryTrigger extends Behaviour {
-
-    @serializable(PreliminaryAction)
-    target?: PreliminaryAction;
-}
-
-export class VisibilityAction extends PreliminaryAction {
-
-    //@type int
-    @serializable()
-    type: VisibilityActionType = VisibilityActionType.Hide;
-
-    @serializable()
-    duration: number = 1;
-
-    getType() {
-        switch (this.type) {
-            case VisibilityActionType.Hide: return "hide";
-            case VisibilityActionType.Show: return "show";
-        }
-    }
-
-    getDuration() {
-        return this.duration;
-    }
-}
-
-export class TapGestureTrigger extends PreliminaryTrigger {
-
-}
-
-export enum VisibilityActionType {
-    Show = 0,
-    Hide = 1,
+import { Behaviour, GameObject } from "../../../../Component.js";
+import { Animator } from "../../../../Animator.js";
+import { Renderer } from "../../../../Renderer.js";
+import { serializable } from "../../../../../engine/engine_serialization_decorator.js";
+import type { IPointerClickHandler, PointerEventData } from "../../../../ui/PointerEvents.js";
+import { AnimationExtension, RegisteredAnimationInfo, type UsdzAnimation } from "../Animation.js";
+import { getWorldPosition, getWorldQuaternion, getWorldScale, setWorldPosition, setWorldQuaternion, setWorldScale } from "../../../../../engine/engine_three_utils.js";
+
+import { Object3D, Material, Vector3, Quaternion, Mesh, Group } from "three";
+import { USDDocument, USDObject, USDZExporterContext } from "../../ThreeUSDZExporter.js";
+
+import type { BehaviorExtension, UsdzBehaviour } from "./Behaviour.js";
+import { ActionBuilder, ActionModel, AuralMode, BehaviorModel, type IBehaviorElement, MotionType, PlayAction, Space, TriggerBuilder, GroupActionModel, MultiplePerformOperation } from "./BehavioursBuilder.js";
+import { AudioSource } from "../../../../AudioSource.js";
+import { NEEDLE_progressive } from "../../../../../engine/extensions/NEEDLE_progressive.js";
+import { isDevEnvironment, showBalloonWarning } from "../../../../../engine/debug/index.js";
+import { Raycaster, ObjectRaycaster } from "../../../../ui/Raycaster.js";
+import type { State } from "../../../../../engine/extensions/NEEDLE_animator_controller_model.js";
+
+function ensureRaycaster(obj: GameObject) {
+    if (!obj) return;
+    if (!obj.getComponentInParent(Raycaster)) {
+        if (isDevEnvironment()) console.warn("Create Raycaster on " + obj.name + " because no raycaster was found in the hierarchy")
+        obj.addNewComponent(ObjectRaycaster);
+    }
+}
+
+export class ChangeTransformOnClick extends Behaviour implements IPointerClickHandler, UsdzBehaviour {
+
+    @serializable(Object3D)
+    object?: Object3D;
+
+    @serializable(Object3D)
+    target?: Object3D;
+
+    @serializable()
+    duration: number = 1;
+
+    @serializable()
+    relativeMotion: boolean = false;
+
+    private coroutine: Generator | null = null;
+
+    private targetPos = new Vector3();
+    private targetRot = new Quaternion();
+    private targetScale = new Vector3();
+
+    start(): void {
+        ensureRaycaster(this.gameObject);
+    }
+
+    onPointerClick(args: PointerEventData) {
+        args.use();
+        if (this.coroutine) this.stopCoroutine(this.coroutine);
+        if (!this.relativeMotion)
+            this.coroutine = this.startCoroutine(this.moveToTarget());
+        else
+            this.coroutine = this.startCoroutine(this.moveRelative());
+    }
+
+    private *moveToTarget() {
+
+        if (!this.target || !this.object) return;
+
+        const thisPos = getWorldPosition(this.object).clone();
+        const targetPos = getWorldPosition(this.target).clone();
+
+        const thisRot = getWorldQuaternion(this.object).clone();
+        const targetRot = getWorldQuaternion(this.target).clone();
+
+        const thisScale = getWorldScale(this.object).clone();
+        const targetScale = getWorldScale(this.target).clone();
+
+        const dist = thisPos.distanceTo(targetPos);
+        const rotDist = thisRot.angleTo(targetRot);
+        const scaleDist = thisScale.distanceTo(targetScale);
+
+        if (dist < 0.01 && rotDist < 0.01 && scaleDist < 0.01) {
+            setWorldPosition(this.object, targetPos);
+            setWorldQuaternion(this.object, targetRot);
+            setWorldScale(this.object, targetScale);
+            this.coroutine = null;
+            return;
+        }
+
+        let t01 = 0;
+        let eased = 0;
+        while (t01 < 1) {
+
+            t01 += this.context.time.deltaTime / this.duration;
+            if (t01 > 1) t01 = 1;
+
+            // apply ease-in-out
+            // https://easings.net/
+            eased = t01 < 0.5 ? 4 * t01 * t01 * t01 : 1 - Math.pow(-2 * t01 + 2, 3) / 2;
+
+            this.targetPos.lerpVectors(thisPos, targetPos, eased);
+            this.targetRot.slerpQuaternions(thisRot, targetRot, eased);
+            this.targetScale.lerpVectors(thisScale, targetScale, eased);
+
+            setWorldPosition(this.object, this.targetPos);
+            setWorldQuaternion(this.object, this.targetRot);
+            setWorldScale(this.object, this.targetScale);
+
+            yield;
+        }
+
+        this.coroutine = null;
+    }
+
+    private *moveRelative() {
+
+        if (!this.target || !this.object) return;
+
+        const thisPos = this.object.position.clone();
+        const thisRot = this.object.quaternion.clone();
+        const thisScale = this.object.scale.clone();
+
+        const posOffset = this.target.position.clone();
+        const rotOffset = this.target.quaternion.clone();
+        const scaleOffset = this.target.scale.clone();
+
+        // convert into right space
+        posOffset.applyQuaternion(this.object.quaternion);
+
+        this.targetPos.copy(this.object.position).add(posOffset);
+        this.targetRot.copy(this.object.quaternion).multiply(rotOffset);
+        this.targetScale.copy(this.object.scale).multiply(scaleOffset);
+
+        let t01 = 0;
+        let eased = 0;
+        while (t01 < 1) {
+
+            t01 += this.context.time.deltaTime / this.duration;
+            if (t01 > 1) t01 = 1;
+
+            // apply ease-in-out
+            // https://easings.net/
+            eased = t01 < 0.5 ? 4 * t01 * t01 * t01 : 1 - Math.pow(-2 * t01 + 2, 3) / 2;
+
+            this.object.position.lerpVectors(thisPos, this.targetPos, eased);
+            this.object.quaternion.slerpQuaternions(thisRot, this.targetRot, eased);
+            this.object.scale.lerpVectors(thisScale, this.targetScale, eased);
+
+            yield;
+        }
+
+        this.coroutine = null;
+    }
+
+    beforeCreateDocument(ext) {
+        if (this.target && this.object && this.gameObject) {
+            const moveForward = new BehaviorModel("Move to " + this.target?.name,
+                TriggerBuilder.tapTrigger(this.gameObject),
+                ActionBuilder.transformAction(this.object, this.target, this.duration, this.relativeMotion ? Space.Relative : Space.Absolute),
+            );
+            ext.addBehavior(moveForward);
+        }
+    }
+}
+
+export class ChangeMaterialOnClick extends Behaviour implements IPointerClickHandler, UsdzBehaviour {
+
+    @serializable(Material)
+    materialToSwitch?: Material;
+
+    @serializable(Material)
+    variantMaterial?: Material;
+
+    @serializable()
+    fadeDuration: number = 0;
+
+    private _objectsWithThisMaterial: Mesh[] = [];
+
+    awake() {
+        if (this.variantMaterial && this.materialToSwitch) {
+            const renderer = GameObject.findObjectsOfType(Renderer);
+            for (const rend of renderer) {
+                for (let i = 0; i < rend.sharedMaterials.length; i++) {
+                    const mat = rend.sharedMaterials[i];
+                    if (mat === this.materialToSwitch) {
+                        if (rend.gameObject instanceof Mesh) {
+                            this._objectsWithThisMaterial.push(rend.gameObject);
+                        }
+                        else if (rend.gameObject instanceof Group) {
+                            for (const child of rend.gameObject.children) {
+                                if (child instanceof Mesh && child.material === mat) {
+                                    this._objectsWithThisMaterial.push(child);
+                                }
+                            }
+                        }
+                        break;
+                    }
+                }
+            }
+        }
+    }
+
+    start(): void {
+        ensureRaycaster(this.gameObject);
+    }
+
+    onPointerClick(args: PointerEventData) {
+        args.use();
+        if (!this.variantMaterial) return;
+        for (let i = 0; i < this._objectsWithThisMaterial.length; i++) {
+            const obj = this._objectsWithThisMaterial[i];
+            obj.material = this.variantMaterial;
+        }
+    }
+
+    private selfModel!: USDObject;
+    private targetModels!: USDObject[];
+
+    private static _materialTriggersPerId: { [key: string]: ChangeMaterialOnClick[] } = {}
+
+
+    async beforeCreateDocument(_ext: BehaviorExtension, _context) {
+        this.targetModels = [];
+        ChangeMaterialOnClick._materialTriggersPerId = {}
+        ChangeMaterialOnClick.variantSwitchIndex = 0;
+
+        // Ensure that the progressive textures have been loaded for all variants and materials
+        if (this.materialToSwitch) {
+            await NEEDLE_progressive.assignTextureLOD(this.context, this.sourceId, this.materialToSwitch, 0);
+        }
+        if (this.variantMaterial) {
+            await NEEDLE_progressive.assignTextureLOD(this.context, this.sourceId, this.variantMaterial, 0);
+        }
+    }
+
+
+    createBehaviours(_ext: BehaviorExtension, model: USDObject, _context) {
+
+        const shouldExport = this._objectsWithThisMaterial.find(o => o.uuid === model.uuid);
+        if (shouldExport) {
+            this.targetModels.push(model);
+        }
+        if (this.gameObject.uuid === model.uuid) {
+            this.selfModel = model;
+            if (this.materialToSwitch) {
+                if (!ChangeMaterialOnClick._materialTriggersPerId[this.materialToSwitch.uuid])
+                    ChangeMaterialOnClick._materialTriggersPerId[this.materialToSwitch.uuid] = [];
+                ChangeMaterialOnClick._materialTriggersPerId[this.materialToSwitch.uuid].push(this);
+            }
+        }
+    }
+
+    afterCreateDocument(ext: BehaviorExtension, _context) {
+
+        if (!this.materialToSwitch) return;
+        const handlers = ChangeMaterialOnClick._materialTriggersPerId[this.materialToSwitch.uuid];
+        if (handlers) {
+            const variants: { [key: string]: Array<USDObject> } = {}
+            for (const handler of handlers) {
+                const createdVariants = handler.createVariants();
+                if (createdVariants && createdVariants.length > 0)
+                    variants[handler.selfModel.uuid] = createdVariants;
+            }
+            for (const handler of handlers) {
+                const otherVariants: Array<USDObject> = [];
+                for (const key in variants) {
+                    if (key !== handler.selfModel.uuid) {
+                        otherVariants.push(...variants[key]);
+                    }
+                }
+                handler.createAndAttachBehaviors(ext, variants[handler.selfModel.uuid], otherVariants);
+            }
+        }
+        delete ChangeMaterialOnClick._materialTriggersPerId[this.materialToSwitch.uuid];
+    }
+
+    private createAndAttachBehaviors(ext: BehaviorExtension, myVariants: Array<USDObject>, otherVariants: Array<USDObject>) {
+        const start: ActionModel[] = [];
+        const select: ActionModel[] = [];
+
+        const fadeDuration = Math.max(0, this.fadeDuration);
+
+        select.push(ActionBuilder.fadeAction([...this.targetModels, ...otherVariants], fadeDuration, false));
+        start.push(ActionBuilder.fadeAction(myVariants, fadeDuration, false));
+        select.push(ActionBuilder.fadeAction(myVariants, fadeDuration, true));
+
+        ext.addBehavior(new BehaviorModel("Select_" + this.selfModel.name,
+            TriggerBuilder.tapTrigger(this.selfModel),
+            ActionBuilder.parallel(...select))
+        );
+        ext.addBehavior(new BehaviorModel("StartHidden_" + this.selfModel.name,
+            TriggerBuilder.sceneStartTrigger(),
+            ActionBuilder.parallel(...start))
+        );
+    }
+
+    static variantSwitchIndex: number = 0;
+    private createVariants() {
+        if (!this.variantMaterial) return null;
+
+        const variantModels: USDObject[] = [];
+        for (const target of this.targetModels) {
+            const variant = target.clone();
+            variant.name += " variant_" + this.variantMaterial.name + "_" + ChangeMaterialOnClick.variantSwitchIndex++;
+            variant.name = variant.name.replace(/\s/g, "_");
+            variant.material = this.variantMaterial;
+            variant.geometry = target.geometry;
+            variant.matrix = target.matrix;
+
+            if (!target.parent || !target.parent.isEmpty()) {
+                USDObject.createEmptyParent(target);
+            }
+            if (target.parent) target.parent.add(variant);
+            variantModels.push(variant);
+        }
+        return variantModels;
+    }
+}
+
+export class SetActiveOnClick extends Behaviour implements IPointerClickHandler, UsdzBehaviour {
+
+    @serializable(Object3D)
+    target?: Object3D;
+
+    @serializable()
+    toggleOnClick: boolean = false;
+
+    @serializable()
+    targetState: boolean = true;
+
+    @serializable()
+    hideSelf: boolean = true;
+
+    start(): void {
+        ensureRaycaster(this.gameObject);
+    }
+
+    onPointerClick(args: PointerEventData) {
+        args.use();
+
+        if (!this.toggleOnClick && this.hideSelf)
+            this.gameObject.visible = false;
+        
+        if (this.target)
+            this.target.visible = this.toggleOnClick ? !this.target.visible : this.targetState;
+    }
+
+    private selfModel!: USDObject;
+    private selfModelClone!: USDObject;
+    private targetModel?: USDObject;
+    private toggleModel?: USDObject;
+
+    createBehaviours(_, model, _context) {
+        if (model.uuid === this.gameObject.uuid) {
+            this.selfModel = model;
+            this.selfModelClone = model.clone();
+        }
+    }
+
+    private stateBeforeCreatingDocument: boolean = false;
+    private targetStateBeforeCreatingDocument: boolean = false;
+    private static clonedToggleIndex = 0;
+    private static wasVisible = Symbol("usdz_SetActiveOnClick_wasVisible");
+    private static toggleClone = Symbol("clone for toggling");
+    private static reverseToggleClone = Symbol("clone for reverse toggling");
+
+    beforeCreateDocument() {
+        if (!this.target) return;
+        
+        // need to cache on the object itself, because otherwise different actions would override each other's visibility state
+        // TODO would probably be better to have this somewhere on the exporter, not on this component
+        if (this.gameObject[SetActiveOnClick.wasVisible] === undefined)
+            this.gameObject[SetActiveOnClick.wasVisible] = this.gameObject.activeSelf;
+        if (this.target[SetActiveOnClick.wasVisible] === undefined)
+            this.target[SetActiveOnClick.wasVisible] = (this.target as GameObject).activeSelf;
+
+        this.stateBeforeCreatingDocument = this.gameObject[SetActiveOnClick.wasVisible];
+        this.targetStateBeforeCreatingDocument = this.target[SetActiveOnClick.wasVisible];
+
+        // Objects need to be on so they are exported, as we're skipping invisible objects
+        this.gameObject.visible = true;
+        this.target.visible = true;
+    }
+
+    afterCreateDocument(ext, context) {
+        if (!this.target) return;
+
+        // Parameters:
+        // - hideSelf: the trigger is hidden after clicking. Can basically only be used once.
+        // - toggleOnClick: the target is toggled on/off when the trigger is clicked.
+        // - targetState: the target is set to this state when the trigger is clicked.
+
+        // Combinations:
+        // - when toggleOnClick is on, hideSelf is ignored
+        //   - we need to make a copy of our object
+        //   - when the trigger is clicked
+        //     - hide the original trigger
+        //     - show the copied trigger
+        //     - set the target to targetState
+        //   - when the copied trigger is clicked
+        //     - hide the copied trigger
+        //     - show the original trigger again
+        //     - set the target to !targetState
+        // - when toggleOnClick is off, hideSelf is used
+        //   - no copy is needed 
+        //   - when the trigger is clicked
+        //     - hide the trigger
+        //     - set the target to the targetState
+
+        this.targetModel = context.document.findById(this.target.uuid);
+        const originalModel = this.selfModel;
+
+        if (this.selfModel && this.targetModel) {
+            let selfModel = this.selfModel;
+            let targetState = this.targetState;
+
+            // if we toggle, we need to create a copy of our object
+            if (this.toggleOnClick) {
+                // When toggling we want to respect the current state of the target,
+                // so effectively this.targetState and this.hideSelf are ignored.
+                targetState = !this.targetStateBeforeCreatingDocument;
+
+
+                // Potentially it's easier/better to just "clone" and put the object as a sibling next
+                // to the rest of the hierarchy. This way we would lose nested clicks (clicking on a child would not trigger events)
+                // but we're not potentially duplicating tons of objects.
+                // It's much easier to reason about nested actions when we're not duplicating tons of hierarchy...
+                // We can probably only do a shallow clone when the tapped object has geometry of its own, otherwise
+                // we end up with nothing to tap on.
+                
+                // Option A: we deep clone ourselves. This makes hierarchical cases and nested behaviours really complex.
+                // We do this currently when the object doesn't have any geometry.
+                if (!this.selfModelClone.geometry) {
+                    if (!this.selfModel.parent || this.selfModel.parent.isEmpty())
+                        USDDocument.createEmptyParent(this.selfModel);
+                    this.toggleModel = this.selfModel.deepClone();
+                    this.toggleModel.name += "_toggle";
+                    this.selfModel.parent!.add(this.toggleModel);
+                }
+                else {
+                    // Option B: we shallow clone ourselves and put the clone next to us. This means childs are not clickable anymore.
+                    // We create clones exactly once for this gameObject, so that all SetActiveOnClick on the same object use the same trigger.
+                    if (!this.gameObject[SetActiveOnClick.toggleClone]) {
+                        const clone = this.selfModelClone.clone();
+                        clone.matrix.identity();
+                        clone.name += "_toggle" + (SetActiveOnClick.clonedToggleIndex++);
+                        originalModel.add(clone);
+                        this.gameObject[SetActiveOnClick.toggleClone] = clone;
+                        
+                        console.warn("USDZExport: Toggle " + this.gameObject.name + " doesn't have geometry. It will be deep cloned and nested behaviours will likely not work.");
+                    }
+                    const clonedSelfModel = this.gameObject[SetActiveOnClick.toggleClone];
+                    
+                    if (!this.gameObject[SetActiveOnClick.reverseToggleClone]) {
+                        const clone = this.selfModelClone.clone();
+                        clone.matrix.identity();
+                        clone.name += "_toggleReverse" + (SetActiveOnClick.clonedToggleIndex++);
+                        originalModel.add(clone);
+                        this.gameObject[SetActiveOnClick.reverseToggleClone] = clone;
+                    }
+                    this.toggleModel = this.gameObject[SetActiveOnClick.reverseToggleClone];
+
+                    if (!this.toggleModel!.geometry || !clonedSelfModel.geometry) {
+                        console.error("triggers without childs and without geometry won't work!", this, originalModel.geometry)
+                    }
+
+                    // We're targeting the clone in the actions below, not the original object
+                    selfModel = clonedSelfModel;
+
+                    // Remove the geometry, we've duplicated it into the toggle/reverseToggle already
+                    originalModel.geometry = null;
+                    originalModel.material = null;
+
+                    // Known issues: clone() does not clone skinned mesh geometry, lights, cameras;
+                    // we still have them on the original object and the clones won't have it.
+                }
+            }
+
+            // this.toggleOnClick is false, so we don't have a toggleModel – no need for clones,
+            // just set the target object to targetState and optionally hide ourselves
+            if (!this.toggleModel) {
+                const sequence: ActionModel[] = [];
+                if (this.hideSelf)
+                    sequence.push(ActionBuilder.fadeAction(selfModel, 0, false));
+                sequence.push(ActionBuilder.fadeAction(this.targetModel, 0, targetState));
+
+                ext.addBehavior(new BehaviorModel("Toggle_" + selfModel.name + "_toggleTo" + (targetState ? "On" : "Off"),
+                    TriggerBuilder.tapTrigger(selfModel),
+                    ActionBuilder.parallel(...sequence)
+                ));
+            }
+            // We have a toggleModel, so we need to set up two sequences:
+            // - one that hides the original object, shows the toggle and sets the target to targetState
+            // - one that hides the toggle, shows the original object and sets the target to !targetState
+            else if (this.toggleOnClick) {
+                const toggleSequence: ActionModel[] = [];
+                toggleSequence.push(ActionBuilder.fadeAction(selfModel, 0, false));
+                toggleSequence.push(ActionBuilder.fadeAction(this.toggleModel, 0, true));
+                toggleSequence.push(ActionBuilder.fadeAction(this.targetModel, 0, targetState));
+
+                ext.addBehavior(new BehaviorModel("Toggle_" + selfModel.name + "_toggleTo" + (targetState ? "On" : "Off"),
+                    TriggerBuilder.tapTrigger(selfModel),
+                    ActionBuilder.parallel(...toggleSequence)
+                ));
+                
+                const reverseSequence: ActionModel[] = [];
+                reverseSequence.push(ActionBuilder.fadeAction(this.toggleModel, 0, false));
+                reverseSequence.push(ActionBuilder.fadeAction(selfModel, 0, true));
+                reverseSequence.push(ActionBuilder.fadeAction(this.targetModel, 0, !targetState));
+
+                ext.addBehavior(new BehaviorModel("Toggle_" + selfModel.name + "_toggleTo" + (!targetState ? "On" : "Off"),
+                    TriggerBuilder.tapTrigger(this.toggleModel),
+                    ActionBuilder.parallel(...reverseSequence)
+                ));
+            }
+
+            // Ensure initial states are set correctly so that we get the same result as was currently active in the runtime
+            const objectsToHide = new Array<USDObject>();
+            if (!this.targetStateBeforeCreatingDocument)
+                objectsToHide.push(this.targetModel);
+            if (!this.stateBeforeCreatingDocument)
+                objectsToHide.push(originalModel);
+            if (this.toggleModel)
+                objectsToHide.push(this.toggleModel);
+
+            ext.addBehavior(new BehaviorModel("HideOnStart_" + this.gameObject.name,
+                TriggerBuilder.sceneStartTrigger(),
+                ActionBuilder.fadeAction(objectsToHide, 0, false)
+            ));
+        }
+    }
+
+    afterSerialize(_ext: BehaviorExtension, _context: USDZExporterContext): void {
+        // cleanup visibility cache
+        if (this.gameObject[SetActiveOnClick.wasVisible] !== undefined) {
+            this.gameObject.visible = this.gameObject[SetActiveOnClick.wasVisible];
+            delete this.gameObject[SetActiveOnClick.wasVisible];
+        }
+        if (this.target && this.target[SetActiveOnClick.wasVisible] !== undefined) {
+            this.target.visible = this.target[SetActiveOnClick.wasVisible];
+            delete this.target[SetActiveOnClick.wasVisible];
+        }
+
+        // cleanup trigger clones
+        delete this.gameObject[SetActiveOnClick.toggleClone];
+        delete this.gameObject[SetActiveOnClick.reverseToggleClone];
+    }
+}
+
+export class HideOnStart extends Behaviour implements UsdzBehaviour {
+
+    start() {
+        this.gameObject.visible = false;
+    }
+
+    createBehaviours(ext, model, _context) {
+        if (model.uuid === this.gameObject.uuid)
+            ext.addBehavior(new BehaviorModel("HideOnStart_" + this.gameObject.name,
+                TriggerBuilder.sceneStartTrigger(),
+                ActionBuilder.fadeAction(model, 0, false)
+            ));
+    }
+
+    beforeCreateDocument() {
+        this.gameObject.visible = true;
+    }
+
+    afterCreateDocument() {
+        this.gameObject.visible = false;
+    }
+}
+
+export class EmphasizeOnClick extends Behaviour implements UsdzBehaviour {
+
+    @serializable()
+    target?: Object3D;
+
+    @serializable()
+    duration: number = 0.5;
+
+    @serializable()
+    motionType: MotionType = MotionType.bounce;
+
+    beforeCreateDocument() { }
+
+    createBehaviours(ext, model, _context) {
+        if (!this.target) return;
+
+        if (model.uuid === this.gameObject.uuid) {
+            const emphasize = new BehaviorModel("emphasize " + this.name,
+                TriggerBuilder.tapTrigger(this.gameObject),
+                ActionBuilder.emphasize(this.target, this.duration, this.motionType, undefined, "basic"),
+            );
+            ext.addBehavior(emphasize);
+        }
+    }
+
+    afterCreateDocument(_ext, _context) { }
+}
+
+export class PlayAudioOnClick extends Behaviour implements IPointerClickHandler, UsdzBehaviour {
+
+    @serializable(AudioSource)
+    target?: AudioSource;
+
+    @serializable(URL)
+    clip: string = "";
+
+    @serializable()
+    toggleOnClick: boolean = false;
+
+    start(): void {
+        ensureRaycaster(this.gameObject);
+    }
+
+    ensureAudioSource() {
+        if (!this.target) {
+            const newAudioSource = this.gameObject.addNewComponent(AudioSource);
+            if (newAudioSource) {
+                this.target = newAudioSource;
+                newAudioSource.spatialBlend = 1;
+                newAudioSource.volume = 1;
+                newAudioSource.loop = false;
+            }
+        }
+    }
+
+    onPointerClick(args: PointerEventData) {
+        args.use();
+
+        if (!this.target?.clip && !this.clip) return;
+
+        this.ensureAudioSource();
+
+        if (this.target) {
+
+            if (this.target.isPlaying && this.toggleOnClick) {
+                this.target.stop();
+            }
+            else {
+                if (!this.toggleOnClick && this.target.isPlaying) {
+                    this.target.stop();
+                }
+                if (this.clip) this.target.play(this.clip);
+                else this.target.play();
+            }
+        }
+    }
+
+    createBehaviours(ext, model, _context) {
+        if (!this.target && !this.clip) return;
+        if (model.uuid === this.gameObject.uuid) {
+
+            const clipUrl = this.clip ? this.clip : this.target ? this.target.clip : undefined;
+            if (!clipUrl) return;
+            if (typeof clipUrl !== "string") return;
+
+            const playbackTarget = this.target ? this.target.gameObject : this.gameObject;
+            const clipName = clipUrl.split("/").pop();
+            const volume = this.target ? this.target.volume : 1;
+            const auralMode = this.target && this.target.spatialBlend == 0 ? AuralMode.NonSpatial : AuralMode.Spatial;
+            
+            // regular tap trigger
+            {
+                let playAction: IBehaviorElement = ActionBuilder.playAudioAction(playbackTarget, "audio/" + clipName, PlayAction.Play, volume, auralMode);
+                // does not seem to work in iOS / QuickLook...
+                if (this.toggleOnClick) (playAction as ActionModel).multiplePerformOperation = MultiplePerformOperation.Stop;
+                if (this.target && this.target.loop)
+                    playAction = ActionBuilder.sequence(playAction).makeLooping();
+                const playClipOnTap = new BehaviorModel("playAudio " + this.name,
+                    TriggerBuilder.tapTrigger(this.gameObject),
+                    playAction,
+                );
+                ext.addBehavior(playClipOnTap);
+            }
+
+            // automatically play audio on start too if the referenced AudioSource has playOnAwake enabled
+            if (this.target && this.target.playOnAwake && this.target.enabled) {
+                let playAction: IBehaviorElement = ActionBuilder.playAudioAction(playbackTarget, "audio/" + clipName, PlayAction.Play, volume, auralMode);
+                if (this.target.loop)
+                    playAction = ActionBuilder.sequence(playAction).makeLooping();
+                const playClipOnStart = new BehaviorModel("playAudioOnStart " + this.name,
+                    TriggerBuilder.sceneStartTrigger(),
+                    playAction,
+                );
+                ext.addBehavior(playClipOnStart);
+            }
+        }
+    }
+
+    async afterSerialize(_ext, context) {
+        if (!this.target && !this.clip) return;
+        const clipUrl = this.clip ? this.clip : this.target ? this.target.clip : undefined;
+        if (!clipUrl) return;
+        if (typeof clipUrl !== "string") return;
+        const clipName = clipUrl.split("/").pop();
+
+        const audio = await fetch(clipUrl);
+        const audioBlob = await audio.blob();
+        const arrayBuffer = await audioBlob.arrayBuffer();
+
+        const audioData: Uint8Array = new Uint8Array(arrayBuffer)
+
+        context.files["audio/" + clipName] = audioData;
+    }
+}
+
+export class PlayAnimationOnClick extends Behaviour implements IPointerClickHandler, UsdzBehaviour, UsdzAnimation {
+
+    @serializable(Animator)
+    animator?: Animator;
+
+    @serializable()
+    stateName?: string;
+
+    // Not editable from the outside yet, but from code
+    // we want to expose this once we have a nice drawer for "Triggers" (e.g. shows proximity distance)
+    // and once we rename the component to "PlayAnimation" or "PlayAnimationOnTrigger"
+    trigger: "tap" | "start" = "tap"; // "proximity"
+
+    private get target() { return this.animator?.gameObject }
+
+    start(): void {
+        ensureRaycaster(this.gameObject);
+    }
+
+    onPointerClick(args: PointerEventData) {
+        args.use();
+        if (!this.target) return;
+        if (this.stateName) {
+            // TODO this is currently quite annoying to use,
+            // as for the web we use the Animator component and its states directly,
+            // while in QuickLook we use explicit animations / states.
+            this.animator?.play(this.stateName, 0, 0, .1);
+        }
+    }
+
+    private selfModel: any;
+
+    private stateAnimationModel: any;
+
+    private animationSequence? = new Array<RegisteredAnimationInfo>();
+    private animationLoopAfterSequence? = new Array<RegisteredAnimationInfo>();
+
+    createBehaviours(_ext, model, _context) {
+        if (model.uuid === this.gameObject.uuid)
+            this.selfModel = model;
+    }
+
+    private static animationActions: ActionModel[] = [];
+    private static rootsWithExclusivePlayback: Set<Object3D> = new Set();
+
+    // Cleanup. TODO This is not the best way as it's called multiple times (once for each component).
+    afterSerialize() {
+        if (PlayAnimationOnClick.rootsWithExclusivePlayback.size > 1) {
+            const message = "Multiple root objects targeted by more than one animation. To work around QuickLook bug FB13410767, animations will be set as \"exclusive\" and activating them will stop other animations being marked as exclusive.";
+            if (isDevEnvironment()) showBalloonWarning(message);
+            console.warn(message, ...PlayAnimationOnClick.rootsWithExclusivePlayback);
+        }
+        PlayAnimationOnClick.animationActions = [];
+        PlayAnimationOnClick.rootsWithExclusivePlayback = new Set();
+    }
+
+    afterCreateDocument(ext: BehaviorExtension, context: USDZExporterContext) {
+        if (!this.animationSequence || !this.stateAnimationModel) return;
+        if (!this.target) return;
+        
+        const document = context.document;
+        
+        // check if the AnimationExtension has been attached and what data it has for the current object
+        const animationExt = context.extensions.find(ext => ext instanceof AnimationExtension) as AnimationExtension;
+        if (!animationExt) return;
+
+        // This is a workaround for FB13410767 - StartAnimationAction in USDZ preliminary behaviours does not stop when another StartAnimationAction is called on the same prim
+        // When we play multiple animations on the same root, QuickLook just overlaps them and glitches around instead of stopping an earlier one.
+        // Once this is fixed, we can relax this check and just always make it non-exclusive again.
+        // Setting exclusive playback has the side effect of unfortunately canceling all other playing actions that are exclusive too -
+        // seems there is no finer-grained control over which actions should stop which other actions...
+        const requiresExclusivePlayback = animationExt.getClipCount(this.target) > 1;
+        if (requiresExclusivePlayback) {
+            if (isDevEnvironment())
+                console.warn("Setting exclusive playback for " + this.target.name + "@" + this.stateName + " because it has " + animationExt.getClipCount(this.target) + " animations. This works around QuickLook bug FB13410767.");
+            
+            PlayAnimationOnClick.rootsWithExclusivePlayback.add(this.target);
+        }
+
+        const getOrCacheAction = (model: USDObject, anim: RegisteredAnimationInfo) => {
+            let action = PlayAnimationOnClick.animationActions.find(a => a.affectedObjects == model && a.start == anim.start && a.duration == anim.duration);
+            if (!action) {
+                action = ActionBuilder.startAnimationAction(model, anim.start, anim.duration) as ActionModel;
+                PlayAnimationOnClick.animationActions.push(action);
+            }
+            return action;
+        }
+
+        document.traverse(model => {
+            if (model.uuid === this.target?.uuid) {
+                const sequence = ActionBuilder.sequence();
+
+                if (this.animationSequence !== undefined)
+                for (const anim of this.animationSequence) {
+                    sequence.addAction(getOrCacheAction(model, anim));
+                }
+
+                if (this.animationLoopAfterSequence !== undefined) {
+                    // only make a new action group if there's already stuff in the existing one
+                    const loopSequence = sequence.actions.length == 0 ? sequence : ActionBuilder.sequence();
+                    for (const anim of this.animationLoopAfterSequence) {
+                        loopSequence.addAction(getOrCacheAction(model, anim));
+                    }
+                    loopSequence.makeLooping();
+                    if (sequence !== loopSequence)
+                        sequence.addAction(loopSequence);
+                }
+
+                const playAnimationOnTap = new BehaviorModel("tap " + this.name + " for " + this.stateName + " on " + this.target?.name,
+                    this.trigger == "tap" ? TriggerBuilder.tapTrigger(this.selfModel) : TriggerBuilder.sceneStartTrigger(),
+                    sequence
+                );
+                
+                // See comment above for why exclusive playback is currently required when playing multiple animations on the same root.
+                if (requiresExclusivePlayback)
+                    playAnimationOnTap.makeExclusive(true);
+                ext.addBehavior(playAnimationOnTap);
+            }
+        });
+    }
+
+    createAnimation(ext, model, _context) {
+        if (!this.target || !this.animator) return;
+
+        // If there's a separate state specified to play after this one, we 
+        // play it automatically. Theoretically an animator state machine flow could be encoded here.
+
+        // We're parsing the Animator states here and follow the transition chain until we find a loop.
+        // There are some edge cases:
+        // - (0 > 1.looping) should keep looping (1).
+        // - (0 > 1 > 1) should keep looping (1).
+        // - (0 > 1 > 2 > 3 > 2) should keep looping (2,3).
+        // - (0 > 1 > 2 > 3 > 0) should keep looping (0,1,2,3).
+        const runtimeController = this.animator?.runtimeAnimatorController;
+        let currentState = runtimeController?.findState(this.stateName);
+        let statesUntilLoop: State[] = [];
+        let statesLooping: State[] = [];
+
+        if (runtimeController && currentState) {
+            // starting point – we have set this above already as startAction
+            const visitedStates = new Array<State>;
+            visitedStates.push(currentState);
+            let foundLoop = false;
+
+            while (true && visitedStates.length < 100) {
+                if (!currentState || currentState === null || !currentState.transitions || currentState.transitions.length === 0) {
+                    if (currentState.motion?.isLooping)
+                        foundLoop = true;
+                    break;
+                }
+
+                // find the first transition without parameters
+                // TODO we could also find the first _valid_ transition here instead based on the current parameters.
+                const transition = currentState.transitions.find(t => t.conditions.length === 0);
+                const nextState = transition ? runtimeController["getState"](transition.destinationState, 0) : null;
+                // abort: we found a state loop
+                if (nextState && visitedStates.includes(nextState)) {
+                    currentState = nextState;
+                    foundLoop = true;
+                    break;
+                }
+                // keep looking: transition to another state
+                else if (transition) {
+                    currentState = nextState;
+                    if (!currentState)
+                        break;
+                    visitedStates.push(currentState);
+                }
+                // abort: no transition found. check if last state is looping
+                else {
+                    foundLoop = currentState.motion?.isLooping ?? false;
+                    break;
+                }
+            }
+
+            if (foundLoop && currentState) {
+                // check what the first state in the loop is – it must be matching the last one we added
+                const firstStateInLoop = visitedStates.indexOf(currentState);
+                statesUntilLoop = visitedStates.slice(0, firstStateInLoop); // can be empty, which means we're looping all
+                statesLooping = visitedStates.slice(firstStateInLoop); // can be empty, which means nothing is looping
+                console.log("found loop from " + this.stateName, "states until loop", statesUntilLoop, "states looping", statesLooping);
+            }
+            else {
+                statesUntilLoop = visitedStates;
+                statesLooping = [];
+                console.log("found no loop from " + this.stateName, "states", statesUntilLoop);
+            }
+        }
+
+        // filter out any states that don't have motion data
+        statesUntilLoop = statesUntilLoop.filter(s => s.motion?.clip && s.motion?.clip.tracks?.length > 0);
+        statesLooping = statesLooping.filter(s => s.motion?.clip && s.motion?.clip.tracks?.length > 0);
+
+        // If none of the found states have motion, we need to warn
+        if (statesUntilLoop.length === 0 && statesLooping.length === 0) {
+            console.warn("No clips found for state " + this.stateName + " on " + this.animator?.name + ", can't export animation data");
+            return;
+        }
+        this.stateAnimationModel = model;
+
+        // Register all the animation states we found.
+        if (statesUntilLoop.length > 0) {
+            this.animationSequence = new Array<RegisteredAnimationInfo>();
+            for (const state of statesUntilLoop) {
+                this.animationSequence.push(ext.registerAnimation(this.target, state.motion.clip));
+            }
+        }
+        if (statesLooping.length > 0) {
+            this.animationLoopAfterSequence = new Array<RegisteredAnimationInfo>();
+            for (const state of statesLooping) {
+                this.animationLoopAfterSequence.push(ext.registerAnimation(this.target, state.motion.clip));
+            }
+        }
+    }
+
+}
+
+export class PreliminaryAction extends Behaviour {
+    getType(): string | void { }
+    @serializable(Object3D)
+    target?: Object3D;
+
+
+    getDuration(): number | void { };
+}
+
+export class PreliminaryTrigger extends Behaviour {
+
+    @serializable(PreliminaryAction)
+    target?: PreliminaryAction;
+}
+
+export class VisibilityAction extends PreliminaryAction {
+
+    //@type int
+    @serializable()
+    type: VisibilityActionType = VisibilityActionType.Hide;
+
+    @serializable()
+    duration: number = 1;
+
+    getType() {
+        switch (this.type) {
+            case VisibilityActionType.Hide: return "hide";
+            case VisibilityActionType.Show: return "show";
+        }
+    }
+
+    getDuration() {
+        return this.duration;
+    }
+}
+
+export class TapGestureTrigger extends PreliminaryTrigger {
+
+}
+
+export enum VisibilityActionType {
+    Show = 0,
+    Hide = 1,
 }