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

package/lib/engine-components/webxr/WebXRController.js

@@ -1,1029 +1,1029 @@
-import { BoxHelper, BufferGeometry, Color, Euler, Layers, Line, Mesh, MeshBasicMaterial, Quaternion, Ray, SphereGeometry, Vector2, Vector3 } from "three";
-import { OculusHandModel } from 'three/examples/jsm/webxr/OculusHandModel.js';
-import { OculusHandPointerModel } from 'three/examples/jsm/webxr/OculusHandPointerModel.js';
-import { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory.js';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
-import { InstancingUtil } from "../../engine/engine_instancing.js";
-import { Mathf } from "../../engine/engine_math.js";
-import { RaycastOptions } from "../../engine/engine_physics.js";
-import { getWorldPosition, getWorldQuaternion, setWorldPosition, setWorldQuaternion } from "../../engine/engine_three_utils.js";
-import { getParam, resolveUrl } from "../../engine/engine_utils.js";
-import { addDracoAndKTX2Loaders } from "../../engine/engine_loaders.js";
-import { Avatar_POI } from "../avatar/Avatar_Brain_LookAt.js";
-import { Behaviour, GameObject } from "../Component.js";
-import { Interactable, UsageMarker } from "../Interactable.js";
-import { Rigidbody } from "../RigidBody.js";
-import { SyncedTransform } from "../SyncedTransform.js";
-import { UIRaycastUtils } from "../ui/RaycastUtils.js";
-import { InputEvents, NEPointerEvent, PointerType } from "../../engine/engine_input.js";
-const debug = getParam("debugwebxrcontroller");
-export var ControllerType;
-(function (ControllerType) {
-    ControllerType[ControllerType["PhysicalDevice"] = 0] = "PhysicalDevice";
-    ControllerType[ControllerType["Touch"] = 1] = "Touch";
-})(ControllerType || (ControllerType = {}));
-export var ControllerEvents;
-(function (ControllerEvents) {
-    ControllerEvents["SelectStart"] = "select-start";
-    ControllerEvents["SelectEnd"] = "select-end";
-    ControllerEvents["Update"] = "update";
-})(ControllerEvents || (ControllerEvents = {}));
-export class TeleportTarget extends Behaviour {
-}
-export class WebXRController extends Behaviour {
-    static Factory = new XRControllerModelFactory();
-    static raycastColor = new Color(.9, .3, .3);
-    static raycastNoHitColor = new Color(.6, .6, .6);
-    static geometry = new BufferGeometry().setFromPoints([new Vector3(0, 0, 0), new Vector3(0, 0, -1)]);
-    static handModels = {};
-    static CreateRaycastLine() {
-        const line = new Line(this.geometry);
-        const mat = line.material;
-        mat.color = this.raycastColor;
-        // mat.linewidth = 10;
-        line.layers.set(2);
-        line.name = 'line';
-        line.scale.z = 1;
-        return line;
-    }
-    static CreateRaycastHitPoint() {
-        const geometry = new SphereGeometry(.5, 22, 22);
-        const material = new MeshBasicMaterial({ color: this.raycastColor });
-        const sphere = new Mesh(geometry, material);
-        sphere.visible = false;
-        sphere.layers.set(2);
-        return sphere;
-    }
-    static Create(owner, index, addTo, type) {
-        const ctrl = addTo ? GameObject.addNewComponent(addTo, WebXRController, false) : new WebXRController();
-        ctrl.webXR = owner;
-        ctrl.index = index;
-        ctrl.type = type;
-        const context = owner.context;
-        // from https://github.com/mrdoob/js/blob/master/examples/webxr_vr_dragging.html
-        // controllers
-        ctrl.controller = context.renderer.xr.getController(index);
-        ctrl.controllerGrip = context.renderer.xr.getControllerGrip(index);
-        ctrl.controllerModel = this.Factory.createControllerModel(ctrl.controller);
-        ctrl.controllerGrip.add(ctrl.controllerModel);
-        ctrl.hand = context.renderer.xr.getHand(index);
-        const loader = new GLTFLoader();
-        addDracoAndKTX2Loaders(loader, context);
-        if (ctrl.webXR.handModelPath && ctrl.webXR.handModelPath !== "")
-            loader.setPath(resolveUrl(owner.sourceId, ctrl.webXR.handModelPath));
-        else
-            // from XRHandMeshModel.js
-            loader.setPath('https://cdn.jsdelivr.net/npm/@webxr-input-profiles/assets@1.0/dist/profiles/generic-hand/');
-        //@ts-ignore
-        const hand = new OculusHandModel(ctrl.hand, loader);
-        ctrl.hand.add(hand);
-        ctrl.hand.traverse(x => x.layers.set(2));
-        ctrl.handPointerModel = new OculusHandPointerModel(ctrl.hand, ctrl.controller);
-        // TODO remove all these once https://github.com/mrdoob/js/pull/23279 lands
-        ctrl.controller.addEventListener('connected', (_) => {
-            ctrl.setControllerLayers(ctrl.controllerModel, 2);
-            ctrl.setControllerLayers(ctrl.controllerGrip, 2);
-            ctrl.setControllerLayers(ctrl.hand, 2);
-            setTimeout(() => {
-                ctrl.setControllerLayers(ctrl.controllerModel, 2);
-                ctrl.setControllerLayers(ctrl.controllerGrip, 2);
-                ctrl.setControllerLayers(ctrl.hand, 2);
-            }, 1000);
-        });
-        // TODO: unsubscribe! this should be moved into onenable and ondisable!
-        // TODO remove all these once https://github.com/mrdoob/js/pull/23279 lands
-        ctrl.hand.addEventListener('connected', (event) => {
-            const xrInputSource = event.data;
-            if (xrInputSource.hand) {
-                if (owner.Rig)
-                    owner.Rig.add(ctrl.hand);
-                ctrl.type = ControllerType.PhysicalDevice;
-                ctrl.handPointerModel.traverse(x => x.layers.set(2)); // ignore raycast
-                ctrl.handPointerModel.pointerObject?.traverse(x => x.layers.set(2));
-                // when exiting and re-entering xr the joints are not parented to the hand anymore
-                // this is a workaround to fix that temporarely
-                // see https://github.com/needle-tools/needle-tiny-playground/issues/123
-                const jnts = ctrl.hand["joints"];
-                if (jnts) {
-                    for (const key of Object.keys(jnts)) {
-                        const joint = jnts[key];
-                        if (joint.parent)
-                            continue;
-                        ctrl.hand.add(joint);
-                    }
-                }
-            }
-        });
-        return ctrl;
-    }
-    // TODO: replace with component events
-    static addEventListener(evt, callback) {
-        const list = this.eventSubs[evt] ?? [];
-        list.push(callback);
-        this.eventSubs[evt] = list;
-    }
-    // TODO: replace with component events
-    static removeEventListener(evt, callback) {
-        if (!callback)
-            return;
-        const list = this.eventSubs[evt] ?? [];
-        const idx = list.indexOf(callback);
-        if (idx >= 0)
-            list.splice(idx, 1);
-        this.eventSubs[evt] = list;
-    }
-    static eventSubs = {};
-    webXR;
-    index = -1;
-    controllerModel;
-    controller;
-    controllerGrip;
-    hand;
-    handPointerModel;
-    grabbed = null;
-    input = null;
-    type = ControllerType.PhysicalDevice;
-    showRaycastLine = true;
-    enableRaycasts = true;
-    enableDefaultControls = true;
-    get isUsingHands() {
-        const r = this.input?.hand;
-        return r !== null && r !== undefined;
-    }
-    get wrist() {
-        if (!this.hand)
-            return null;
-        const jnts = this.hand["joints"];
-        if (!jnts)
-            return null;
-        return jnts["wrist"];
-    }
-    _wristQuaternion = null;
-    getWristQuaternion() {
-        const wrist = this.wrist;
-        if (!wrist)
-            return null;
-        if (!this._wristQuaternion)
-            this._wristQuaternion = new Quaternion();
-        const wr = getWorldQuaternion(wrist).multiply(this._wristQuaternion.setFromEuler(new Euler(-Math.PI / 4, 0, 0)));
-        return wr;
-    }
-    movementVector = new Vector3();
-    worldRot = new Quaternion();
-    joystick = new Vector2();
-    didRotate = false;
-    didTeleport = false;
-    didChangeScale = false;
-    static PreviousCameraFarDistance = undefined;
-    static MovementSpeedFactor = 1;
-    lastHit = null;
-    raycastLine = null;
-    _raycastHitPoint = null;
-    _connnectedCallback = null;
-    _disconnectedCallback = null;
-    _selectStartEvt = null;
-    _selectEndEvt = null;
-    get selectionDown() { return this._selectionPressed && !this._selectionPressedLastFrame; }
-    get selectionUp() { return !this._selectionPressed && this._selectionPressedLastFrame; }
-    get selectionPressed() { return this._selectionPressed; }
-    get selectionClick() { return this._selectionEndTime - this._selectionStartTime < 0.3; }
-    get raycastHitPoint() { return this._raycastHitPoint; }
-    _selectionPressed = false;
-    _selectionPressedLastFrame = false;
-    _selectionStartTime = 0;
-    _selectionEndTime = 0;
-    get useSmoothing() { return this._useSmoothing; }
-    ;
-    _useSmoothing = true;
-    awake() {
-        if (!this.controller) {
-            console.warn("WebXRController: Missing controller object.", this);
-            return;
-        }
-        this._connnectedCallback = this.onSourceConnected.bind(this);
-        this._disconnectedCallback = this.onSourceDisconnected.bind(this);
-        this._selectStartEvt = this.onSelectStart.bind(this);
-        this._selectEndEvt = this.onSelectEnd.bind(this);
-        if (this.type === ControllerType.Touch) {
-            this.controllerGrip.addEventListener("connected", this._connnectedCallback);
-            this.controllerGrip.addEventListener("disconnected", this._disconnectedCallback);
-            this.controller.addEventListener('selectstart', this._selectStartEvt);
-            this.controller.addEventListener('selectend', this._selectEndEvt);
-        }
-        if (this.type === ControllerType.PhysicalDevice) {
-            this.controller.addEventListener('selectstart', this._selectStartEvt);
-            this.controller.addEventListener('selectend', this._selectEndEvt);
-        }
-    }
-    onDestroy() {
-        if (this.type === ControllerType.Touch) {
-            this.controllerGrip.removeEventListener("connected", this._connnectedCallback);
-            this.controllerGrip.removeEventListener("disconnected", this._disconnectedCallback);
-            this.controller.removeEventListener('selectstart', this._selectStartEvt);
-            this.controller.removeEventListener('selectend', this._selectEndEvt);
-        }
-        if (this.type === ControllerType.PhysicalDevice) {
-            this.controller.removeEventListener('selectstart', this._selectStartEvt);
-            this.controller.removeEventListener('selectend', this._selectEndEvt);
-        }
-        this.hand?.clear();
-        this.controllerGrip?.clear();
-        this.controller?.clear();
-    }
-    onEnable() {
-        if (!this.webXR) {
-            console.warn("No WebXR component assigned to WebXRController.");
-            return;
-        }
-        if (this.hand)
-            this.hand.name = "Hand";
-        if (this.controllerGrip)
-            this.controllerGrip.name = "ControllerGrip";
-        if (this.controller)
-            this.controller.name = "Controller";
-        if (this.raycastLine)
-            this.raycastLine.name = "RaycastLine;";
-        if (this.webXR.Controllers.indexOf(this) < 0)
-            this.webXR.Controllers.push(this);
-        if (!this.raycastLine)
-            this.raycastLine = WebXRController.CreateRaycastLine();
-        if (!this._raycastHitPoint)
-            this._raycastHitPoint = WebXRController.CreateRaycastHitPoint();
-        this.webXR.Rig?.add(this.hand);
-        this.webXR.Rig?.add(this.controllerGrip);
-        this.webXR.Rig?.add(this.controller);
-        this.webXR.Rig?.add(this.raycastLine);
-        this.raycastLine?.add(this._raycastHitPoint);
-        this._raycastHitPoint.visible = false;
-        this.hand.add(this.handPointerModel);
-        if (debug)
-            console.log("ADDED TO RIG", this.webXR.Rig);
-        // // console.log("enable", this.index, this.controllerGrip.uuid)
-    }
-    onDisable() {
-        // console.log("XR controller disabled", this);
-        this.hand?.removeFromParent();
-        this.controllerGrip?.removeFromParent();
-        this.controller?.removeFromParent();
-        this.raycastLine?.removeFromParent();
-        this._raycastHitPoint?.removeFromParent();
-        // console.log("Disable", this._connnectedCallback, this._disconnectedCallback);
-        // this.controllerGrip.removeEventListener("connected", this._connnectedCallback);
-        // this.controllerGrip.removeEventListener("disconnected", this._disconnectedCallback);
-        if (this.webXR) {
-            const i = this.webXR.Controllers.indexOf(this);
-            if (i >= 0)
-                this.webXR.Controllers.splice(i, 1);
-        }
-    }
-    // onDestroy(): void {
-    //     console.log("destroyed", this.index);
-    // }
-    _isConnected = false;
-    onSourceConnected(e) {
-        if (this._isConnected) {
-            console.warn("Received connected event for controller that is already connected", this.index, e);
-            return;
-        }
-        this._isConnected = true;
-        this.input = e.data;
-        if (this.type === ControllerType.Touch) {
-            this.onSelectStart();
-        }
-    }
-    onSourceDisconnected(_e) {
-        if (!this._isConnected) {
-            console.warn("Received discnnected event for controller that is not connected", _e);
-            return;
-        }
-        this._isConnected = false;
-        if (this.type === ControllerType.Touch) {
-            this.onSelectEnd();
-        }
-        this.input = null;
-    }
-    createPointerEvent(type) {
-        switch (type) {
-            case "down":
-                this.context.input.createPointerDown(new NEPointerEvent(InputEvents.PointerDown, null, { clientX: 0, clientY: 0, button: this.index, pointerType: PointerType.Touch }));
-                break;
-            case "move":
-                break;
-            case "up":
-                this.context.input.createPointerUp(new NEPointerEvent(InputEvents.PointerUp, null, { clientX: 0, clientY: 0, button: this.index, pointerType: PointerType.Touch }));
-                break;
-        }
-    }
-    rayRotation = new Quaternion();
-    raycastUpdate(raycastLine, wp) {
-        const allowRaycastLineVisible = this.showRaycastLine && this.type !== ControllerType.Touch;
-        if (this.type === ControllerType.Touch) {
-            raycastLine.visible = false;
-        }
-        else if (this.isUsingHands) {
-            raycastLine.visible = !this.grabbed && allowRaycastLineVisible;
-            setWorldPosition(raycastLine, wp);
-            const jnts = this.hand['joints'];
-            if (jnts) {
-                const wrist = jnts['wrist'];
-                if (wrist && this.grabbed && this.grabbed.isCloseGrab) {
-                    const wr = this.getWristQuaternion();
-                    if (wr)
-                        this.rayRotation.copy(wr);
-                    // this.rayRotation.slerp(wr, this.useSmoothing ? t * 2 : 1);
-                }
-            }
-            setWorldQuaternion(raycastLine, this.rayRotation);
-        }
-        else {
-            raycastLine.visible = allowRaycastLineVisible;
-            setWorldQuaternion(raycastLine, this.rayRotation);
-            setWorldPosition(raycastLine, wp);
-        }
-    }
-    update() {
-        if (!this.webXR)
-            return;
-        // TODO: we should wait until we actually have models, this is just a workaround
-        if (this.context.time.frameCount % 60 === 0) {
-            this.setControllerLayers(this.controller, 2);
-            this.setControllerLayers(this.controllerGrip, 2);
-            this.setControllerLayers(this.hand, 2);
-        }
-        const subs = WebXRController.eventSubs[ControllerEvents.Update];
-        if (subs && subs.length > 0) {
-            for (const sub of subs) {
-                sub(this);
-            }
-        }
-        let t = 1;
-        if (this.type === ControllerType.PhysicalDevice)
-            t = this.context.time.deltaTime / .1;
-        else if (this.isUsingHands && this.handPointerModel.pinched)
-            t = this.context.time.deltaTime / .3;
-        this.rayRotation.slerp(getWorldQuaternion(this.controller), this.useSmoothing ? t : 1.0);
-        const wp = getWorldPosition(this.controller);
-        // hide hand pointer model, it's giant and doesn't really help
-        if (this.isUsingHands && this.handPointerModel.cursorObject) {
-            this.handPointerModel.cursorObject.visible = false;
-        }
-        // perform raycasts
-        if (this.enableRaycasts) {
-            if (this.raycastLine) {
-                this.raycastUpdate(this.raycastLine, wp);
-            }
-            this.lastHit = this.updateLastHit();
-            if (this.grabbed) {
-                this.grabbed.update();
-            }
-        }
-        else { // hide line when raycasting is disabled
-            if (this.raycastLine) {
-                this.raycastLine.visible = false;
-            }
-        }
-        this._selectionPressedLastFrame = this._selectionPressed;
-        if (this.selectStartCallback) {
-            this.selectStartCallback();
-        }
-    }
-    onUpdate(session) {
-        this.lastHit = null;
-        if (!session || session.inputSources.length <= this.index) {
-            this.input = null;
-            return;
-        }
-        if (this.type === ControllerType.PhysicalDevice)
-            this.input = session.inputSources[this.index];
-        if (!this.input)
-            return;
-        const rig = this.webXR.Rig;
-        if (!rig)
-            return;
-        if (this._didNotEndSelection && !this.handPointerModel.pinched) {
-            this._didNotEndSelection = false;
-            this.onSelectEnd();
-        }
-        this.updateStick(this.input);
-        const buttons = this.input?.gamepad?.buttons;
-        if (this.enableDefaultControls) {
-            switch (this.input.handedness) {
-                case "left":
-                    this.movementUpdate(rig, buttons);
-                    break;
-                case "right":
-                    this.rotationUpdate(rig, buttons);
-                    break;
-            }
-        }
-    }
-    movementUpdate(rig, buttons) {
-        const speedFactor = 3 * WebXRController.MovementSpeedFactor;
-        const powFactor = 2;
-        const speed = Mathf.clamp01(this.joystick.length() * 2);
-        const sideDir = this.joystick.x > 0 ? 1 : -1;
-        let side = Math.pow(this.joystick.x, powFactor);
-        side *= sideDir;
-        side *= speed;
-        const forwardDir = this.joystick.y > 0 ? 1 : -1;
-        let forward = Math.pow(this.joystick.y, powFactor);
-        forward *= forwardDir;
-        side *= speed;
-        rig.getWorldQuaternion(this.worldRot);
-        this.movementVector.set(side, 0, forward);
-        this.movementVector.applyQuaternion(this.webXR.TransformOrientation);
-        this.movementVector.y = 0;
-        this.movementVector.applyQuaternion(this.worldRot);
-        this.movementVector.multiplyScalar(speedFactor * this.context.time.deltaTime);
-        rig.position.add(this.movementVector);
-        if (this.isUsingHands)
-            this.runTeleport(rig, buttons);
-    }
-    rotationUpdate(rig, buttons) {
-        const rotate = this.joystick.x;
-        const rotAbs = Math.abs(rotate);
-        if (rotAbs < 0.4) {
-            this.didRotate = false;
-        }
-        else if (rotAbs > .5 && !this.didRotate) {
-            const dir = rotate > 0 ? -1 : 1;
-            rig.rotateY(Mathf.toRadians(30 * dir));
-            this.didRotate = true;
-        }
-        this.runTeleport(rig, buttons);
-    }
-    _pinchStartTime = undefined;
-    runTeleport(rig, buttons) {
-        let teleport = -this.joystick.y;
-        if (this.hand?.visible && !this.grabbed) {
-            const pinched = this.handPointerModel.isPinched();
-            if (pinched && this._pinchStartTime === undefined) {
-                this._pinchStartTime = this.context.time.time;
-            }
-            if (pinched && this._pinchStartTime && this.context.time.time - this._pinchStartTime > .8) {
-                // hacky approach for basic hand teleportation - 
-                // we teleport if we pinch and the back of the hand points down (open hand gesture)
-                // const v1 = new Vector3();
-                // const worldQuaternion = new Quaternion();
-                // this.controller.getWorldQuaternion(worldQuaternion);
-                // v1.copy(this.controller.up).applyQuaternion(worldQuaternion);
-                // const dotPr = -v1.dot(this.controller.up);
-                teleport = this.handPointerModel.isPinched() ? 1 : 0;
-            }
-            if (!pinched)
-                this._pinchStartTime = undefined;
-        }
-        else
-            this._pinchStartTime = undefined;
-        const inVR = this.webXR.IsInVR;
-        const xrRig = this.webXR.Rig;
-        let doTeleport = teleport > .5 && inVR;
-        let isInMiniatureMode = xrRig ? xrRig?.scale?.x < .999 : false;
-        let newRigScale = null;
-        if (buttons && this.input && !this.input.hand) {
-            for (let i = 0; i < buttons.length; i++) {
-                const btn = buttons[i];
-                // button[4] seems to be the A button if it exists. On hololens it's randomly pressed though for hands
-                // see https://www.w3.org/TR/webxr-gamepads-module-1/#xr-standard-gamepad-mapping
-                if (i === 4) {
-                    if (btn.pressed && !this.didChangeScale && inVR) {
-                        this.didChangeScale = true;
-                        const rig = xrRig;
-                        if (rig) {
-                            const args = this.switchScale(rig, doTeleport, isInMiniatureMode, newRigScale);
-                            doTeleport = args.doTeleport;
-                            isInMiniatureMode = args.isInMiniatureMode;
-                            newRigScale = args.newRigScale;
-                        }
-                    }
-                    else if (!btn.pressed)
-                        this.didChangeScale = false;
-                }
-            }
-        }
-        if (doTeleport) {
-            if (!this.didTeleport) {
-                const rc = this.raycast();
-                this.didTeleport = true;
-                if (rc && rc.length > 0) {
-                    const hit = rc[0];
-                    if (isInMiniatureMode || this.isValidTeleportTarget(hit.object)) {
-                        const point = hit.point;
-                        setWorldPosition(rig, point);
-                    }
-                }
-            }
-        }
-        else if (teleport < .1) {
-            this.didTeleport = false;
-        }
-        if (newRigScale !== null) {
-            rig.scale.set(newRigScale, newRigScale, newRigScale);
-            rig.updateMatrixWorld();
-        }
-    }
-    isValidTeleportTarget(obj) {
-        return GameObject.getComponentInParent(obj, TeleportTarget) != null;
-    }
-    switchScale(rig, doTeleport, isInMiniatureMode, newRigScale) {
-        if (!isInMiniatureMode) {
-            isInMiniatureMode = true;
-            doTeleport = true;
-            newRigScale = .1;
-            WebXRController.MovementSpeedFactor = newRigScale * 2;
-            const cam = this.context.mainCamera;
-            WebXRController.PreviousCameraFarDistance = cam.far;
-            cam.far /= newRigScale;
-        }
-        else {
-            isInMiniatureMode = false;
-            rig.scale.set(1, 1, 1);
-            newRigScale = 1;
-            WebXRController.MovementSpeedFactor = 1;
-            const cam = this.context.mainCamera;
-            if (WebXRController.PreviousCameraFarDistance)
-                cam.far = WebXRController.PreviousCameraFarDistance;
-        }
-        return { doTeleport, isInMiniatureMode, newRigScale };
-    }
-    updateStick(inputSource) {
-        if (!inputSource || !inputSource.gamepad || inputSource.gamepad.axes?.length < 4)
-            return;
-        this.joystick.x = inputSource.gamepad.axes[2];
-        this.joystick.y = inputSource.gamepad.axes[3];
-    }
-    updateLastHit() {
-        const rc = this.raycast();
-        const hit = rc ? rc[0] : null;
-        this.lastHit = hit;
-        let factor = 1;
-        if (this.webXR.Rig) {
-            factor /= this.webXR.Rig.scale.x;
-        }
-        // if (!hit) factor = 0;
-        if (this.raycastLine) {
-            this.raycastLine.scale.z = factor * (this.lastHit?.distance ?? 9999);
-            const mat = this.raycastLine.material;
-            if (hit != null)
-                mat.color = WebXRController.raycastColor;
-            else
-                mat.color = WebXRController.raycastNoHitColor;
-        }
-        if (this._raycastHitPoint) {
-            if (this.lastHit != null) {
-                this._raycastHitPoint.position.z = -1; // -this.lastHit.distance;
-                const scale = Mathf.clamp(this.lastHit.distance * .01 * factor, .015, .1);
-                this._raycastHitPoint.scale.set(scale, scale, scale);
-            }
-            this._raycastHitPoint.visible = this.lastHit !== null && this.lastHit !== undefined;
-        }
-        return hit;
-    }
-    onSelectStart() {
-        if (!this.context.connection.allowEditing)
-            return;
-        // console.log("SELECT START", _event);
-        // if we process the event immediately the controller 
-        // world positions are not yet correctly updated and we have info from the last frame
-        // so we delay the event processing one frame
-        // only necessary for AR - ideally we can get it to work right here
-        // but should be fine as a workaround for now
-        this.selectStartCallback = () => this.onHandleSelectStart();
-    }
-    selectStartCallback = null;
-    lastSelectStartObject = null;
-    ;
-    onHandleSelectStart() {
-        this.selectStartCallback = null;
-        this._selectionPressed = true;
-        this._selectionStartTime = this.context.time.time;
-        this._selectionEndTime = 1000;
-        // console.log("DOWN", this.index, WebXRController.eventSubs);
-        // let maxDistance = this.isUsingHands ? .1 : undefined;
-        let intersections = null;
-        let closeGrab = false;
-        if (this.isUsingHands) {
-            intersections = this.overlap();
-            if (intersections.length <= 0) {
-                intersections = this.raycast();
-                closeGrab = false;
-            }
-            else {
-                closeGrab = true;
-            }
-        }
-        else
-            intersections = this.raycast();
-        if (debug)
-            console.log("onHandleSelectStart", "close grab? " + closeGrab, "intersections", intersections);
-        if (intersections && intersections.length > 0) {
-            for (const intersection of intersections) {
-                const object = intersection.object;
-                this.lastSelectStartObject = object;
-                const args = { selected: object, grab: object };
-                const subs = WebXRController.eventSubs[ControllerEvents.SelectStart];
-                if (subs && subs.length > 0) {
-                    for (const sub of subs) {
-                        sub(this, args);
-                    }
-                }
-                if (args.grab !== object && debug)
-                    console.log("Grabbed object changed", "original", object, "new", args.grab);
-                if (args.grab) {
-                    this.grabbed = AttachedObject.TryTake(this, args.grab, intersection, closeGrab);
-                }
-                break;
-            }
-        }
-        else {
-            const subs = WebXRController.eventSubs[ControllerEvents.SelectStart];
-            const args = { selected: null, grab: null };
-            if (subs && subs.length > 0) {
-                for (const sub of subs) {
-                    sub(this, args);
-                }
-            }
-        }
-    }
-    _didNotEndSelection = false;
-    onSelectEnd() {
-        if (this.isUsingHands) {
-            if (this.handPointerModel.pinched) {
-                this._didNotEndSelection = true;
-                return;
-            }
-        }
-        if (!this._selectionPressed)
-            return;
-        this.selectStartCallback = null;
-        this._selectionPressed = false;
-        this._selectionEndTime = this.context.time.time;
-        const args = { grab: this.grabbed?.selected ?? this.lastSelectStartObject };
-        const subs = WebXRController.eventSubs[ControllerEvents.SelectEnd];
-        if (subs && subs.length > 0) {
-            for (const sub of subs) {
-                sub(this, args);
-            }
-        }
-        if (this.grabbed) {
-            this.grabbed.free();
-            this.grabbed = null;
-        }
-    }
-    testIsVisible(obj) {
-        if (!obj)
-            return false;
-        if (GameObject.isActiveInHierarchy(obj) === false)
-            return false;
-        if (UIRaycastUtils.isInteractable(obj) === false) {
-            return false;
-        }
-        return true;
-        // if (!obj.visible) return false;
-        // return this.testIsVisible(obj.parent);
-    }
-    setControllerLayers(obj, layer) {
-        if (!obj)
-            return;
-        obj.layers.set(layer);
-        if (obj.children) {
-            for (const ch of obj.children) {
-                if (this.grabbed?.selected === ch || this.grabbed?.selectedMesh === ch) {
-                    continue;
-                }
-                this.setControllerLayers(ch, layer);
-            }
-        }
-    }
-    getRay() {
-        const ray = new Ray();
-        // this.tempMatrix.identity().extractRotation(this.controller.matrixWorld);
-        // ray.origin.setFromMatrixPosition(this.controller.matrixWorld);
-        ray.origin.copy(getWorldPosition(this.controller));
-        ray.direction.set(0, 0, -1).applyQuaternion(this.rayRotation);
-        return ray;
-    }
-    closeGrabBoundingBoxHelper;
-    overlap() {
-        const overlapCenter = (this.isUsingHands && this.handPointerModel) ? this.handPointerModel.pointerObject : this.controllerGrip;
-        if (debug) {
-            if (!this.closeGrabBoundingBoxHelper && overlapCenter) {
-                this.closeGrabBoundingBoxHelper = new BoxHelper(overlapCenter, 0xffff00);
-                this.scene.add(this.closeGrabBoundingBoxHelper);
-            }
-            if (this.closeGrabBoundingBoxHelper && overlapCenter) {
-                this.closeGrabBoundingBoxHelper.setFromObject(overlapCenter);
-            }
-        }
-        if (!overlapCenter)
-            return new Array();
-        const wp = getWorldPosition(overlapCenter).clone();
-        return this.context.physics.sphereOverlap(wp, .02);
-    }
-    raycast() {
-        const opts = new RaycastOptions();
-        opts.layerMask = new Layers();
-        opts.layerMask.enableAll();
-        opts.layerMask.disable(2);
-        opts.ray = this.getRay();
-        const hits = this.context.physics.raycast(opts);
-        for (let i = 0; i < hits.length; i++) {
-            const hit = hits[i];
-            const obj = hit.object;
-            if (!this.testIsVisible(obj)) {
-                hits.splice(i, 1);
-                i--;
-                continue;
-            }
-            hit.object = UIRaycastUtils.getObject(obj);
-            break;
-        }
-        // console.log(...hits);
-        return hits;
-    }
-}
-export var AttachedObjectEvents;
-(function (AttachedObjectEvents) {
-    AttachedObjectEvents["WillTake"] = "WillTake";
-    AttachedObjectEvents["DidTake"] = "DidTake";
-    AttachedObjectEvents["WillFree"] = "WillFree";
-    AttachedObjectEvents["DidFree"] = "DidFree";
-})(AttachedObjectEvents || (AttachedObjectEvents = {}));
-export class AttachedObject {
-    static Events = {};
-    static AddEventListener(event, callback) {
-        if (!AttachedObject.Events[event])
-            AttachedObject.Events[event] = [];
-        AttachedObject.Events[event].push(callback);
-        return callback;
-    }
-    static RemoveEventListener(event, callback) {
-        if (!callback)
-            return;
-        if (!AttachedObject.Events[event])
-            return;
-        const idx = AttachedObject.Events[event].indexOf(callback);
-        if (idx >= 0)
-            AttachedObject.Events[event].splice(idx, 1);
-    }
-    static Current = [];
-    static Register(obj) {
-        if (!this.Current.find(x => x === obj)) {
-            this.Current.push(obj);
-        }
-    }
-    static Remove(obj) {
-        const i = this.Current.indexOf(obj);
-        if (i >= 0) {
-            this.Current.splice(i, 1);
-        }
-    }
-    static TryTake(controller, candidate, intersection, closeGrab) {
-        const interactable = GameObject.getComponentInParent(candidate, Interactable);
-        if (!interactable) {
-            if (debug)
-                console.warn("Prevented taking object that is not interactable", candidate);
-            return null;
-        }
-        else
-            candidate = interactable.gameObject;
-        let objectToAttach = candidate;
-        const sync = GameObject.getComponentInParent(candidate, SyncedTransform);
-        if (sync) {
-            sync.requestOwnership();
-            objectToAttach = sync.gameObject;
-        }
-        for (const o of this.Current) {
-            if (o.selected === objectToAttach) {
-                if (o.controller === controller)
-                    return o;
-                o.free();
-                o.Take(controller, objectToAttach, candidate, sync, interactable, intersection, closeGrab);
-                return o;
-            }
-        }
-        const att = new AttachedObject();
-        att.Take(controller, objectToAttach, candidate, sync, interactable, intersection, closeGrab);
-        return att;
-    }
-    sync = null;
-    selected = null;
-    selectedParent = null;
-    selectedMesh = null;
-    controller = null;
-    grabTime = 0;
-    grabUUID = "";
-    isCloseGrab = false; // when taken via sphere cast with hands
-    originalMaterial = null;
-    usageMarker = null;
-    rigidbodies = null;
-    didReparent = false;
-    grabDistance = 0;
-    interactable = null;
-    positionSource = null;
-    Take(controller, take, hit, sync, _interactable, intersection, closeGrab) {
-        console.assert(take !== null, "Expected object to be taken but was", take);
-        if (controller.isUsingHands) {
-            this.positionSource = closeGrab ? controller.wrist : controller.controller;
-        }
-        else {
-            this.positionSource = controller.controller;
-        }
-        if (!this.positionSource) {
-            console.warn("No position source");
-            return this;
-        }
-        const args = { controller, take, hit, sync, interactable: _interactable };
-        AttachedObject.Events.WillTake?.forEach(x => x(this, args));
-        const mesh = hit;
-        if (mesh?.material) {
-            this.originalMaterial = mesh.material;
-            if (!Array.isArray(mesh.material)) {
-                mesh.material = mesh.material.clone();
-                if (mesh.material && mesh.material["emissive"])
-                    mesh.material["emissive"].b = .2;
-            }
-        }
-        this.selected = take;
-        if (!this.selectedParent) {
-            this.selectedParent = take.parent;
-        }
-        this.selectedMesh = mesh;
-        this.controller = controller;
-        this.interactable = _interactable;
-        this.isCloseGrab = closeGrab;
-        // if (interactable.canGrab) {
-        //     this.didReparent = true;
-        //     this.device.controller.attach(take);
-        // }
-        // else 
-        this.didReparent = false;
-        this.sync = sync;
-        this.grabTime = controller.context.time.time;
-        this.grabUUID = Date.now().toString();
-        this.usageMarker = GameObject.addNewComponent(this.selected, UsageMarker);
-        this.rigidbodies = GameObject.getComponentsInChildren(this.selected, Rigidbody);
-        getWorldPosition(this.positionSource, this.lastControllerWorldPos);
-        const getGrabPoint = () => closeGrab ? this.lastControllerWorldPos.clone() : intersection.point.clone();
-        this.grabDistance = getGrabPoint().distanceTo(this.lastControllerWorldPos);
-        this.totalChangeAlongDirection = 0.0;
-        // we're storing position relative to the grab point
-        // we're storing rotation relative to the ray
-        this.localPositionOffsetToGrab = this.selected.worldToLocal(getGrabPoint());
-        const rot = controller.isUsingHands && closeGrab ? this.controller.getWristQuaternion().clone() : controller.rayRotation.clone();
-        getWorldQuaternion(this.selected, this.localQuaternionToGrab).premultiply(rot.invert());
-        const rig = this.controller.webXR.Rig;
-        if (rig)
-            this.rigPositionLastFrame.copy(getWorldPosition(rig));
-        Avatar_POI.Add(controller.context, this.selected);
-        AttachedObject.Register(this);
-        if (this.sync) {
-            this.sync.fastMode = true;
-        }
-        AttachedObject.Events.DidTake?.forEach(x => x(this, args));
-        return this;
-    }
-    free() {
-        if (!this.selected)
-            return;
-        const args = { controller: this.controller, take: this.selected, hit: this.selected, sync: this.sync, interactable: null };
-        AttachedObject.Events.WillFree?.forEach(x => x(this, args));
-        Avatar_POI.Remove(this.controller.context, this.selected);
-        AttachedObject.Remove(this);
-        if (this.sync) {
-            this.sync.fastMode = false;
-        }
-        const mesh = this.selectedMesh;
-        if (mesh && this.originalMaterial && mesh.material) {
-            mesh.material = this.originalMaterial;
-        }
-        const object = this.selected;
-        // only attach the object back if it has a parent
-        // no parent means it was destroyed while holding it!
-        if (this.didReparent && object.parent) {
-            const prevParent = this.selectedParent;
-            if (prevParent)
-                prevParent.attach(object);
-            else
-                this.controller?.context.scene.attach(object);
-        }
-        this.usageMarker?.destroy();
-        if (this.controller)
-            this.controller.grabbed = null;
-        this.selected = null;
-        this.selectedParent = null;
-        this.selectedMesh = null;
-        this.sync = null;
-        // TODO: make throwing work again
-        if (this.rigidbodies) {
-            for (const rb of this.rigidbodies) {
-                rb.wakeUp();
-                rb.setVelocity(rb.smoothedVelocity);
-            }
-        }
-        this.rigidbodies = null;
-        this.localPositionOffsetToGrab = null;
-        this.quaternionLerp = null;
-        AttachedObject.Events.DidFree?.forEach(x => x(this, args));
-    }
-    grabPoint = new Vector3();
-    localPositionOffsetToGrab = null;
-    localPositionOffsetToGrab_worldSpace = new Vector3();
-    localQuaternionToGrab = new Quaternion(0, 0, 0, 1);
-    targetDir = null;
-    quaternionLerp = null;
-    controllerDir = new Vector3();
-    controllerWorldPos = new Vector3();
-    lastControllerWorldPos = new Vector3();
-    controllerPosDelta = new Vector3();
-    totalChangeAlongDirection = 0.0;
-    rigPositionLastFrame = new Vector3();
-    controllerMovementSinceLastFrame() {
-        if (!this.positionSource || !this.controller)
-            return 0.0;
-        // controller direction
-        this.controllerDir.set(0, 0, -1);
-        this.controllerDir.applyQuaternion(this.controller.rayRotation);
-        // controller delta
-        getWorldPosition(this.positionSource, this.controllerWorldPos);
-        this.controllerPosDelta.copy(this.controllerWorldPos);
-        this.controllerPosDelta.sub(this.lastControllerWorldPos);
-        this.lastControllerWorldPos.copy(this.controllerWorldPos);
-        const rig = this.controller.webXR.Rig;
-        if (rig) {
-            const rigPos = getWorldPosition(rig);
-            const rigDelta = this.rigPositionLastFrame.sub(rigPos);
-            this.controllerPosDelta.add(rigDelta);
-            this.rigPositionLastFrame.copy(rigPos);
-        }
-        // calculate delta along direction
-        const changeAlongControllerDirection = this.controllerDir.dot(this.controllerPosDelta);
-        return changeAlongControllerDirection;
-    }
-    update() {
-        if (this.rigidbodies)
-            for (const rb of this.rigidbodies)
-                rb.resetVelocities();
-        // TODO: add/use sync lost ownership event
-        if (this.sync && this.controller && this.controller.context.connection.isInRoom) {
-            const td = this.controller.context.time.time - this.grabTime;
-            // if (time.frameCount % 60 === 0) {
-            //     console.log("ownership?", this.selected.name, this.sync.hasOwnership(), td)
-            // }
-            if (td > 3) {
-                // if (time.frameCount % 60 === 0) {
-                //     console.log(this.sync.hasOwnership())
-                // }
-                if (this.sync.hasOwnership() === false) {
-                    console.log("no ownership, will leave", this.sync.guid);
-                    this.free();
-                }
-            }
-        }
-        if (this.interactable && !this.interactable.canGrab)
-            return;
-        if (!this.didReparent && this.selected && this.controller) {
-            const rigScale = this.controller.webXR.Rig?.scale.x ?? 1.0;
-            this.totalChangeAlongDirection += this.controllerMovementSinceLastFrame();
-            // console.log(this.totalChangeAlongDirection);
-            // alert("yo: " + this.controller.webXR.Rig?.scale.x); // this is 0.1 on Hololens
-            let currentDist = 1.0;
-            if (this.controller.type === ControllerType.PhysicalDevice) // only for controllers and not on touch (AR touches are controllers)
-             {
-                currentDist = Math.max(0.0, 1 + this.totalChangeAlongDirection * 2.0 / rigScale);
-                currentDist = currentDist * currentDist * currentDist;
-            }
-            if (this.grabDistance / rigScale < 0.8)
-                currentDist = 1.0; // don't accelerate if this is a close grab, want full control
-            if (!this.targetDir) {
-                this.targetDir = new Vector3();
-            }
-            this.targetDir.set(0, 0, -this.grabDistance * currentDist);
-            const target = this.targetDir.applyQuaternion(this.controller.rayRotation).add(this.controllerWorldPos);
-            // apply rotation
-            const targetQuat = this.controller.rayRotation.clone().multiplyQuaternions(this.controller.rayRotation, this.localQuaternionToGrab);
-            if (!this.quaternionLerp) {
-                this.quaternionLerp = targetQuat.clone();
-            }
-            this.quaternionLerp.slerp(targetQuat, this.controller.useSmoothing ? this.controller.context.time.deltaTime / .03 : 1.0);
-            setWorldQuaternion(this.selected, this.quaternionLerp);
-            this.selected.updateWorldMatrix(false, false); // necessary so that rotation is correct for the following position update
-            // apply position
-            this.grabPoint.copy(target);
-            // apply local grab offset
-            if (this.localPositionOffsetToGrab) {
-                this.localPositionOffsetToGrab_worldSpace.copy(this.localPositionOffsetToGrab);
-                this.selected.localToWorld(this.localPositionOffsetToGrab_worldSpace).sub(getWorldPosition(this.selected));
-                target.sub(this.localPositionOffsetToGrab_worldSpace);
-            }
-            setWorldPosition(this.selected, target);
-        }
-        if (this.rigidbodies != null) {
-            for (const rb of this.rigidbodies) {
-                rb.wakeUp();
-            }
-        }
-        InstancingUtil.markDirty(this.selected, true);
-    }
-}
+import { BoxHelper, BufferGeometry, Color, Euler, Layers, Line, Mesh, MeshBasicMaterial, Quaternion, Ray, SphereGeometry, Vector2, Vector3 } from "three";
+import { OculusHandModel } from 'three/examples/jsm/webxr/OculusHandModel.js';
+import { OculusHandPointerModel } from 'three/examples/jsm/webxr/OculusHandPointerModel.js';
+import { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory.js';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+import { InstancingUtil } from "../../engine/engine_instancing.js";
+import { Mathf } from "../../engine/engine_math.js";
+import { RaycastOptions } from "../../engine/engine_physics.js";
+import { getWorldPosition, getWorldQuaternion, setWorldPosition, setWorldQuaternion } from "../../engine/engine_three_utils.js";
+import { getParam, resolveUrl } from "../../engine/engine_utils.js";
+import { addDracoAndKTX2Loaders } from "../../engine/engine_loaders.js";
+import { Avatar_POI } from "../avatar/Avatar_Brain_LookAt.js";
+import { Behaviour, GameObject } from "../Component.js";
+import { Interactable, UsageMarker } from "../Interactable.js";
+import { Rigidbody } from "../RigidBody.js";
+import { SyncedTransform } from "../SyncedTransform.js";
+import { UIRaycastUtils } from "../ui/RaycastUtils.js";
+import { InputEvents, NEPointerEvent, PointerType } from "../../engine/engine_input.js";
+const debug = getParam("debugwebxrcontroller");
+export var ControllerType;
+(function (ControllerType) {
+    ControllerType[ControllerType["PhysicalDevice"] = 0] = "PhysicalDevice";
+    ControllerType[ControllerType["Touch"] = 1] = "Touch";
+})(ControllerType || (ControllerType = {}));
+export var ControllerEvents;
+(function (ControllerEvents) {
+    ControllerEvents["SelectStart"] = "select-start";
+    ControllerEvents["SelectEnd"] = "select-end";
+    ControllerEvents["Update"] = "update";
+})(ControllerEvents || (ControllerEvents = {}));
+export class TeleportTarget extends Behaviour {
+}
+export class WebXRController extends Behaviour {
+    static Factory = new XRControllerModelFactory();
+    static raycastColor = new Color(.9, .3, .3);
+    static raycastNoHitColor = new Color(.6, .6, .6);
+    static geometry = new BufferGeometry().setFromPoints([new Vector3(0, 0, 0), new Vector3(0, 0, -1)]);
+    static handModels = {};
+    static CreateRaycastLine() {
+        const line = new Line(this.geometry);
+        const mat = line.material;
+        mat.color = this.raycastColor;
+        // mat.linewidth = 10;
+        line.layers.set(2);
+        line.name = 'line';
+        line.scale.z = 1;
+        return line;
+    }
+    static CreateRaycastHitPoint() {
+        const geometry = new SphereGeometry(.5, 22, 22);
+        const material = new MeshBasicMaterial({ color: this.raycastColor });
+        const sphere = new Mesh(geometry, material);
+        sphere.visible = false;
+        sphere.layers.set(2);
+        return sphere;
+    }
+    static Create(owner, index, addTo, type) {
+        const ctrl = addTo ? GameObject.addNewComponent(addTo, WebXRController, false) : new WebXRController();
+        ctrl.webXR = owner;
+        ctrl.index = index;
+        ctrl.type = type;
+        const context = owner.context;
+        // from https://github.com/mrdoob/js/blob/master/examples/webxr_vr_dragging.html
+        // controllers
+        ctrl.controller = context.renderer.xr.getController(index);
+        ctrl.controllerGrip = context.renderer.xr.getControllerGrip(index);
+        ctrl.controllerModel = this.Factory.createControllerModel(ctrl.controller);
+        ctrl.controllerGrip.add(ctrl.controllerModel);
+        ctrl.hand = context.renderer.xr.getHand(index);
+        const loader = new GLTFLoader();
+        addDracoAndKTX2Loaders(loader, context);
+        if (ctrl.webXR.handModelPath && ctrl.webXR.handModelPath !== "")
+            loader.setPath(resolveUrl(owner.sourceId, ctrl.webXR.handModelPath));
+        else
+            // from XRHandMeshModel.js
+            loader.setPath('https://cdn.jsdelivr.net/npm/@webxr-input-profiles/assets@1.0/dist/profiles/generic-hand/');
+        //@ts-ignore
+        const hand = new OculusHandModel(ctrl.hand, loader);
+        ctrl.hand.add(hand);
+        ctrl.hand.traverse(x => x.layers.set(2));
+        ctrl.handPointerModel = new OculusHandPointerModel(ctrl.hand, ctrl.controller);
+        // TODO remove all these once https://github.com/mrdoob/js/pull/23279 lands
+        ctrl.controller.addEventListener('connected', (_) => {
+            ctrl.setControllerLayers(ctrl.controllerModel, 2);
+            ctrl.setControllerLayers(ctrl.controllerGrip, 2);
+            ctrl.setControllerLayers(ctrl.hand, 2);
+            setTimeout(() => {
+                ctrl.setControllerLayers(ctrl.controllerModel, 2);
+                ctrl.setControllerLayers(ctrl.controllerGrip, 2);
+                ctrl.setControllerLayers(ctrl.hand, 2);
+            }, 1000);
+        });
+        // TODO: unsubscribe! this should be moved into onenable and ondisable!
+        // TODO remove all these once https://github.com/mrdoob/js/pull/23279 lands
+        ctrl.hand.addEventListener('connected', (event) => {
+            const xrInputSource = event.data;
+            if (xrInputSource.hand) {
+                if (owner.Rig)
+                    owner.Rig.add(ctrl.hand);
+                ctrl.type = ControllerType.PhysicalDevice;
+                ctrl.handPointerModel.traverse(x => x.layers.set(2)); // ignore raycast
+                ctrl.handPointerModel.pointerObject?.traverse(x => x.layers.set(2));
+                // when exiting and re-entering xr the joints are not parented to the hand anymore
+                // this is a workaround to fix that temporarely
+                // see https://github.com/needle-tools/needle-tiny-playground/issues/123
+                const jnts = ctrl.hand["joints"];
+                if (jnts) {
+                    for (const key of Object.keys(jnts)) {
+                        const joint = jnts[key];
+                        if (joint.parent)
+                            continue;
+                        ctrl.hand.add(joint);
+                    }
+                }
+            }
+        });
+        return ctrl;
+    }
+    // TODO: replace with component events
+    static addEventListener(evt, callback) {
+        const list = this.eventSubs[evt] ?? [];
+        list.push(callback);
+        this.eventSubs[evt] = list;
+    }
+    // TODO: replace with component events
+    static removeEventListener(evt, callback) {
+        if (!callback)
+            return;
+        const list = this.eventSubs[evt] ?? [];
+        const idx = list.indexOf(callback);
+        if (idx >= 0)
+            list.splice(idx, 1);
+        this.eventSubs[evt] = list;
+    }
+    static eventSubs = {};
+    webXR;
+    index = -1;
+    controllerModel;
+    controller;
+    controllerGrip;
+    hand;
+    handPointerModel;
+    grabbed = null;
+    input = null;
+    type = ControllerType.PhysicalDevice;
+    showRaycastLine = true;
+    enableRaycasts = true;
+    enableDefaultControls = true;
+    get isUsingHands() {
+        const r = this.input?.hand;
+        return r !== null && r !== undefined;
+    }
+    get wrist() {
+        if (!this.hand)
+            return null;
+        const jnts = this.hand["joints"];
+        if (!jnts)
+            return null;
+        return jnts["wrist"];
+    }
+    _wristQuaternion = null;
+    getWristQuaternion() {
+        const wrist = this.wrist;
+        if (!wrist)
+            return null;
+        if (!this._wristQuaternion)
+            this._wristQuaternion = new Quaternion();
+        const wr = getWorldQuaternion(wrist).multiply(this._wristQuaternion.setFromEuler(new Euler(-Math.PI / 4, 0, 0)));
+        return wr;
+    }
+    movementVector = new Vector3();
+    worldRot = new Quaternion();
+    joystick = new Vector2();
+    didRotate = false;
+    didTeleport = false;
+    didChangeScale = false;
+    static PreviousCameraFarDistance = undefined;
+    static MovementSpeedFactor = 1;
+    lastHit = null;
+    raycastLine = null;
+    _raycastHitPoint = null;
+    _connnectedCallback = null;
+    _disconnectedCallback = null;
+    _selectStartEvt = null;
+    _selectEndEvt = null;
+    get selectionDown() { return this._selectionPressed && !this._selectionPressedLastFrame; }
+    get selectionUp() { return !this._selectionPressed && this._selectionPressedLastFrame; }
+    get selectionPressed() { return this._selectionPressed; }
+    get selectionClick() { return this._selectionEndTime - this._selectionStartTime < 0.3; }
+    get raycastHitPoint() { return this._raycastHitPoint; }
+    _selectionPressed = false;
+    _selectionPressedLastFrame = false;
+    _selectionStartTime = 0;
+    _selectionEndTime = 0;
+    get useSmoothing() { return this._useSmoothing; }
+    ;
+    _useSmoothing = true;
+    awake() {
+        if (!this.controller) {
+            console.warn("WebXRController: Missing controller object.", this);
+            return;
+        }
+        this._connnectedCallback = this.onSourceConnected.bind(this);
+        this._disconnectedCallback = this.onSourceDisconnected.bind(this);
+        this._selectStartEvt = this.onSelectStart.bind(this);
+        this._selectEndEvt = this.onSelectEnd.bind(this);
+        if (this.type === ControllerType.Touch) {
+            this.controllerGrip.addEventListener("connected", this._connnectedCallback);
+            this.controllerGrip.addEventListener("disconnected", this._disconnectedCallback);
+            this.controller.addEventListener('selectstart', this._selectStartEvt);
+            this.controller.addEventListener('selectend', this._selectEndEvt);
+        }
+        if (this.type === ControllerType.PhysicalDevice) {
+            this.controller.addEventListener('selectstart', this._selectStartEvt);
+            this.controller.addEventListener('selectend', this._selectEndEvt);
+        }
+    }
+    onDestroy() {
+        if (this.type === ControllerType.Touch) {
+            this.controllerGrip.removeEventListener("connected", this._connnectedCallback);
+            this.controllerGrip.removeEventListener("disconnected", this._disconnectedCallback);
+            this.controller.removeEventListener('selectstart', this._selectStartEvt);
+            this.controller.removeEventListener('selectend', this._selectEndEvt);
+        }
+        if (this.type === ControllerType.PhysicalDevice) {
+            this.controller.removeEventListener('selectstart', this._selectStartEvt);
+            this.controller.removeEventListener('selectend', this._selectEndEvt);
+        }
+        this.hand?.clear();
+        this.controllerGrip?.clear();
+        this.controller?.clear();
+    }
+    onEnable() {
+        if (!this.webXR) {
+            console.warn("No WebXR component assigned to WebXRController.");
+            return;
+        }
+        if (this.hand)
+            this.hand.name = "Hand";
+        if (this.controllerGrip)
+            this.controllerGrip.name = "ControllerGrip";
+        if (this.controller)
+            this.controller.name = "Controller";
+        if (this.raycastLine)
+            this.raycastLine.name = "RaycastLine;";
+        if (this.webXR.Controllers.indexOf(this) < 0)
+            this.webXR.Controllers.push(this);
+        if (!this.raycastLine)
+            this.raycastLine = WebXRController.CreateRaycastLine();
+        if (!this._raycastHitPoint)
+            this._raycastHitPoint = WebXRController.CreateRaycastHitPoint();
+        this.webXR.Rig?.add(this.hand);
+        this.webXR.Rig?.add(this.controllerGrip);
+        this.webXR.Rig?.add(this.controller);
+        this.webXR.Rig?.add(this.raycastLine);
+        this.raycastLine?.add(this._raycastHitPoint);
+        this._raycastHitPoint.visible = false;
+        this.hand.add(this.handPointerModel);
+        if (debug)
+            console.log("ADDED TO RIG", this.webXR.Rig);
+        // // console.log("enable", this.index, this.controllerGrip.uuid)
+    }
+    onDisable() {
+        // console.log("XR controller disabled", this);
+        this.hand?.removeFromParent();
+        this.controllerGrip?.removeFromParent();
+        this.controller?.removeFromParent();
+        this.raycastLine?.removeFromParent();
+        this._raycastHitPoint?.removeFromParent();
+        // console.log("Disable", this._connnectedCallback, this._disconnectedCallback);
+        // this.controllerGrip.removeEventListener("connected", this._connnectedCallback);
+        // this.controllerGrip.removeEventListener("disconnected", this._disconnectedCallback);
+        if (this.webXR) {
+            const i = this.webXR.Controllers.indexOf(this);
+            if (i >= 0)
+                this.webXR.Controllers.splice(i, 1);
+        }
+    }
+    // onDestroy(): void {
+    //     console.log("destroyed", this.index);
+    // }
+    _isConnected = false;
+    onSourceConnected(e) {
+        if (this._isConnected) {
+            console.warn("Received connected event for controller that is already connected", this.index, e);
+            return;
+        }
+        this._isConnected = true;
+        this.input = e.data;
+        if (this.type === ControllerType.Touch) {
+            this.onSelectStart();
+        }
+    }
+    onSourceDisconnected(_e) {
+        if (!this._isConnected) {
+            console.warn("Received discnnected event for controller that is not connected", _e);
+            return;
+        }
+        this._isConnected = false;
+        if (this.type === ControllerType.Touch) {
+            this.onSelectEnd();
+        }
+        this.input = null;
+    }
+    createPointerEvent(type) {
+        switch (type) {
+            case "down":
+                this.context.input.createPointerDown(new NEPointerEvent(InputEvents.PointerDown, null, { clientX: 0, clientY: 0, button: this.index, pointerType: PointerType.Touch }));
+                break;
+            case "move":
+                break;
+            case "up":
+                this.context.input.createPointerUp(new NEPointerEvent(InputEvents.PointerUp, null, { clientX: 0, clientY: 0, button: this.index, pointerType: PointerType.Touch }));
+                break;
+        }
+    }
+    rayRotation = new Quaternion();
+    raycastUpdate(raycastLine, wp) {
+        const allowRaycastLineVisible = this.showRaycastLine && this.type !== ControllerType.Touch;
+        if (this.type === ControllerType.Touch) {
+            raycastLine.visible = false;
+        }
+        else if (this.isUsingHands) {
+            raycastLine.visible = !this.grabbed && allowRaycastLineVisible;
+            setWorldPosition(raycastLine, wp);
+            const jnts = this.hand['joints'];
+            if (jnts) {
+                const wrist = jnts['wrist'];
+                if (wrist && this.grabbed && this.grabbed.isCloseGrab) {
+                    const wr = this.getWristQuaternion();
+                    if (wr)
+                        this.rayRotation.copy(wr);
+                    // this.rayRotation.slerp(wr, this.useSmoothing ? t * 2 : 1);
+                }
+            }
+            setWorldQuaternion(raycastLine, this.rayRotation);
+        }
+        else {
+            raycastLine.visible = allowRaycastLineVisible;
+            setWorldQuaternion(raycastLine, this.rayRotation);
+            setWorldPosition(raycastLine, wp);
+        }
+    }
+    update() {
+        if (!this.webXR)
+            return;
+        // TODO: we should wait until we actually have models, this is just a workaround
+        if (this.context.time.frameCount % 60 === 0) {
+            this.setControllerLayers(this.controller, 2);
+            this.setControllerLayers(this.controllerGrip, 2);
+            this.setControllerLayers(this.hand, 2);
+        }
+        const subs = WebXRController.eventSubs[ControllerEvents.Update];
+        if (subs && subs.length > 0) {
+            for (const sub of subs) {
+                sub(this);
+            }
+        }
+        let t = 1;
+        if (this.type === ControllerType.PhysicalDevice)
+            t = this.context.time.deltaTime / .1;
+        else if (this.isUsingHands && this.handPointerModel.pinched)
+            t = this.context.time.deltaTime / .3;
+        this.rayRotation.slerp(getWorldQuaternion(this.controller), this.useSmoothing ? t : 1.0);
+        const wp = getWorldPosition(this.controller);
+        // hide hand pointer model, it's giant and doesn't really help
+        if (this.isUsingHands && this.handPointerModel.cursorObject) {
+            this.handPointerModel.cursorObject.visible = false;
+        }
+        // perform raycasts
+        if (this.enableRaycasts) {
+            if (this.raycastLine) {
+                this.raycastUpdate(this.raycastLine, wp);
+            }
+            this.lastHit = this.updateLastHit();
+            if (this.grabbed) {
+                this.grabbed.update();
+            }
+        }
+        else { // hide line when raycasting is disabled
+            if (this.raycastLine) {
+                this.raycastLine.visible = false;
+            }
+        }
+        this._selectionPressedLastFrame = this._selectionPressed;
+        if (this.selectStartCallback) {
+            this.selectStartCallback();
+        }
+    }
+    onUpdate(session) {
+        this.lastHit = null;
+        if (!session || session.inputSources.length <= this.index) {
+            this.input = null;
+            return;
+        }
+        if (this.type === ControllerType.PhysicalDevice)
+            this.input = session.inputSources[this.index];
+        if (!this.input)
+            return;
+        const rig = this.webXR.Rig;
+        if (!rig)
+            return;
+        if (this._didNotEndSelection && !this.handPointerModel.pinched) {
+            this._didNotEndSelection = false;
+            this.onSelectEnd();
+        }
+        this.updateStick(this.input);
+        const buttons = this.input?.gamepad?.buttons;
+        if (this.enableDefaultControls) {
+            switch (this.input.handedness) {
+                case "left":
+                    this.movementUpdate(rig, buttons);
+                    break;
+                case "right":
+                    this.rotationUpdate(rig, buttons);
+                    break;
+            }
+        }
+    }
+    movementUpdate(rig, buttons) {
+        const speedFactor = 3 * WebXRController.MovementSpeedFactor;
+        const powFactor = 2;
+        const speed = Mathf.clamp01(this.joystick.length() * 2);
+        const sideDir = this.joystick.x > 0 ? 1 : -1;
+        let side = Math.pow(this.joystick.x, powFactor);
+        side *= sideDir;
+        side *= speed;
+        const forwardDir = this.joystick.y > 0 ? 1 : -1;
+        let forward = Math.pow(this.joystick.y, powFactor);
+        forward *= forwardDir;
+        side *= speed;
+        rig.getWorldQuaternion(this.worldRot);
+        this.movementVector.set(side, 0, forward);
+        this.movementVector.applyQuaternion(this.webXR.TransformOrientation);
+        this.movementVector.y = 0;
+        this.movementVector.applyQuaternion(this.worldRot);
+        this.movementVector.multiplyScalar(speedFactor * this.context.time.deltaTime);
+        rig.position.add(this.movementVector);
+        if (this.isUsingHands)
+            this.runTeleport(rig, buttons);
+    }
+    rotationUpdate(rig, buttons) {
+        const rotate = this.joystick.x;
+        const rotAbs = Math.abs(rotate);
+        if (rotAbs < 0.4) {
+            this.didRotate = false;
+        }
+        else if (rotAbs > .5 && !this.didRotate) {
+            const dir = rotate > 0 ? -1 : 1;
+            rig.rotateY(Mathf.toRadians(30 * dir));
+            this.didRotate = true;
+        }
+        this.runTeleport(rig, buttons);
+    }
+    _pinchStartTime = undefined;
+    runTeleport(rig, buttons) {
+        let teleport = -this.joystick.y;
+        if (this.hand?.visible && !this.grabbed) {
+            const pinched = this.handPointerModel.isPinched();
+            if (pinched && this._pinchStartTime === undefined) {
+                this._pinchStartTime = this.context.time.time;
+            }
+            if (pinched && this._pinchStartTime && this.context.time.time - this._pinchStartTime > .8) {
+                // hacky approach for basic hand teleportation - 
+                // we teleport if we pinch and the back of the hand points down (open hand gesture)
+                // const v1 = new Vector3();
+                // const worldQuaternion = new Quaternion();
+                // this.controller.getWorldQuaternion(worldQuaternion);
+                // v1.copy(this.controller.up).applyQuaternion(worldQuaternion);
+                // const dotPr = -v1.dot(this.controller.up);
+                teleport = this.handPointerModel.isPinched() ? 1 : 0;
+            }
+            if (!pinched)
+                this._pinchStartTime = undefined;
+        }
+        else
+            this._pinchStartTime = undefined;
+        const inVR = this.webXR.IsInVR;
+        const xrRig = this.webXR.Rig;
+        let doTeleport = teleport > .5 && inVR;
+        let isInMiniatureMode = xrRig ? xrRig?.scale?.x < .999 : false;
+        let newRigScale = null;
+        if (buttons && this.input && !this.input.hand) {
+            for (let i = 0; i < buttons.length; i++) {
+                const btn = buttons[i];
+                // button[4] seems to be the A button if it exists. On hololens it's randomly pressed though for hands
+                // see https://www.w3.org/TR/webxr-gamepads-module-1/#xr-standard-gamepad-mapping
+                if (i === 4) {
+                    if (btn.pressed && !this.didChangeScale && inVR) {
+                        this.didChangeScale = true;
+                        const rig = xrRig;
+                        if (rig) {
+                            const args = this.switchScale(rig, doTeleport, isInMiniatureMode, newRigScale);
+                            doTeleport = args.doTeleport;
+                            isInMiniatureMode = args.isInMiniatureMode;
+                            newRigScale = args.newRigScale;
+                        }
+                    }
+                    else if (!btn.pressed)
+                        this.didChangeScale = false;
+                }
+            }
+        }
+        if (doTeleport) {
+            if (!this.didTeleport) {
+                const rc = this.raycast();
+                this.didTeleport = true;
+                if (rc && rc.length > 0) {
+                    const hit = rc[0];
+                    if (isInMiniatureMode || this.isValidTeleportTarget(hit.object)) {
+                        const point = hit.point;
+                        setWorldPosition(rig, point);
+                    }
+                }
+            }
+        }
+        else if (teleport < .1) {
+            this.didTeleport = false;
+        }
+        if (newRigScale !== null) {
+            rig.scale.set(newRigScale, newRigScale, newRigScale);
+            rig.updateMatrixWorld();
+        }
+    }
+    isValidTeleportTarget(obj) {
+        return GameObject.getComponentInParent(obj, TeleportTarget) != null;
+    }
+    switchScale(rig, doTeleport, isInMiniatureMode, newRigScale) {
+        if (!isInMiniatureMode) {
+            isInMiniatureMode = true;
+            doTeleport = true;
+            newRigScale = .1;
+            WebXRController.MovementSpeedFactor = newRigScale * 2;
+            const cam = this.context.mainCamera;
+            WebXRController.PreviousCameraFarDistance = cam.far;
+            cam.far /= newRigScale;
+        }
+        else {
+            isInMiniatureMode = false;
+            rig.scale.set(1, 1, 1);
+            newRigScale = 1;
+            WebXRController.MovementSpeedFactor = 1;
+            const cam = this.context.mainCamera;
+            if (WebXRController.PreviousCameraFarDistance)
+                cam.far = WebXRController.PreviousCameraFarDistance;
+        }
+        return { doTeleport, isInMiniatureMode, newRigScale };
+    }
+    updateStick(inputSource) {
+        if (!inputSource || !inputSource.gamepad || inputSource.gamepad.axes?.length < 4)
+            return;
+        this.joystick.x = inputSource.gamepad.axes[2];
+        this.joystick.y = inputSource.gamepad.axes[3];
+    }
+    updateLastHit() {
+        const rc = this.raycast();
+        const hit = rc ? rc[0] : null;
+        this.lastHit = hit;
+        let factor = 1;
+        if (this.webXR.Rig) {
+            factor /= this.webXR.Rig.scale.x;
+        }
+        // if (!hit) factor = 0;
+        if (this.raycastLine) {
+            this.raycastLine.scale.z = factor * (this.lastHit?.distance ?? 9999);
+            const mat = this.raycastLine.material;
+            if (hit != null)
+                mat.color = WebXRController.raycastColor;
+            else
+                mat.color = WebXRController.raycastNoHitColor;
+        }
+        if (this._raycastHitPoint) {
+            if (this.lastHit != null) {
+                this._raycastHitPoint.position.z = -1; // -this.lastHit.distance;
+                const scale = Mathf.clamp(this.lastHit.distance * .01 * factor, .015, .1);
+                this._raycastHitPoint.scale.set(scale, scale, scale);
+            }
+            this._raycastHitPoint.visible = this.lastHit !== null && this.lastHit !== undefined;
+        }
+        return hit;
+    }
+    onSelectStart() {
+        if (!this.context.connection.allowEditing)
+            return;
+        // console.log("SELECT START", _event);
+        // if we process the event immediately the controller 
+        // world positions are not yet correctly updated and we have info from the last frame
+        // so we delay the event processing one frame
+        // only necessary for AR - ideally we can get it to work right here
+        // but should be fine as a workaround for now
+        this.selectStartCallback = () => this.onHandleSelectStart();
+    }
+    selectStartCallback = null;
+    lastSelectStartObject = null;
+    ;
+    onHandleSelectStart() {
+        this.selectStartCallback = null;
+        this._selectionPressed = true;
+        this._selectionStartTime = this.context.time.time;
+        this._selectionEndTime = 1000;
+        // console.log("DOWN", this.index, WebXRController.eventSubs);
+        // let maxDistance = this.isUsingHands ? .1 : undefined;
+        let intersections = null;
+        let closeGrab = false;
+        if (this.isUsingHands) {
+            intersections = this.overlap();
+            if (intersections.length <= 0) {
+                intersections = this.raycast();
+                closeGrab = false;
+            }
+            else {
+                closeGrab = true;
+            }
+        }
+        else
+            intersections = this.raycast();
+        if (debug)
+            console.log("onHandleSelectStart", "close grab? " + closeGrab, "intersections", intersections);
+        if (intersections && intersections.length > 0) {
+            for (const intersection of intersections) {
+                const object = intersection.object;
+                this.lastSelectStartObject = object;
+                const args = { selected: object, grab: object };
+                const subs = WebXRController.eventSubs[ControllerEvents.SelectStart];
+                if (subs && subs.length > 0) {
+                    for (const sub of subs) {
+                        sub(this, args);
+                    }
+                }
+                if (args.grab !== object && debug)
+                    console.log("Grabbed object changed", "original", object, "new", args.grab);
+                if (args.grab) {
+                    this.grabbed = AttachedObject.TryTake(this, args.grab, intersection, closeGrab);
+                }
+                break;
+            }
+        }
+        else {
+            const subs = WebXRController.eventSubs[ControllerEvents.SelectStart];
+            const args = { selected: null, grab: null };
+            if (subs && subs.length > 0) {
+                for (const sub of subs) {
+                    sub(this, args);
+                }
+            }
+        }
+    }
+    _didNotEndSelection = false;
+    onSelectEnd() {
+        if (this.isUsingHands) {
+            if (this.handPointerModel.pinched) {
+                this._didNotEndSelection = true;
+                return;
+            }
+        }
+        if (!this._selectionPressed)
+            return;
+        this.selectStartCallback = null;
+        this._selectionPressed = false;
+        this._selectionEndTime = this.context.time.time;
+        const args = { grab: this.grabbed?.selected ?? this.lastSelectStartObject };
+        const subs = WebXRController.eventSubs[ControllerEvents.SelectEnd];
+        if (subs && subs.length > 0) {
+            for (const sub of subs) {
+                sub(this, args);
+            }
+        }
+        if (this.grabbed) {
+            this.grabbed.free();
+            this.grabbed = null;
+        }
+    }
+    testIsVisible(obj) {
+        if (!obj)
+            return false;
+        if (GameObject.isActiveInHierarchy(obj) === false)
+            return false;
+        if (UIRaycastUtils.isInteractable(obj) === false) {
+            return false;
+        }
+        return true;
+        // if (!obj.visible) return false;
+        // return this.testIsVisible(obj.parent);
+    }
+    setControllerLayers(obj, layer) {
+        if (!obj)
+            return;
+        obj.layers.set(layer);
+        if (obj.children) {
+            for (const ch of obj.children) {
+                if (this.grabbed?.selected === ch || this.grabbed?.selectedMesh === ch) {
+                    continue;
+                }
+                this.setControllerLayers(ch, layer);
+            }
+        }
+    }
+    getRay() {
+        const ray = new Ray();
+        // this.tempMatrix.identity().extractRotation(this.controller.matrixWorld);
+        // ray.origin.setFromMatrixPosition(this.controller.matrixWorld);
+        ray.origin.copy(getWorldPosition(this.controller));
+        ray.direction.set(0, 0, -1).applyQuaternion(this.rayRotation);
+        return ray;
+    }
+    closeGrabBoundingBoxHelper;
+    overlap() {
+        const overlapCenter = (this.isUsingHands && this.handPointerModel) ? this.handPointerModel.pointerObject : this.controllerGrip;
+        if (debug) {
+            if (!this.closeGrabBoundingBoxHelper && overlapCenter) {
+                this.closeGrabBoundingBoxHelper = new BoxHelper(overlapCenter, 0xffff00);
+                this.scene.add(this.closeGrabBoundingBoxHelper);
+            }
+            if (this.closeGrabBoundingBoxHelper && overlapCenter) {
+                this.closeGrabBoundingBoxHelper.setFromObject(overlapCenter);
+            }
+        }
+        if (!overlapCenter)
+            return new Array();
+        const wp = getWorldPosition(overlapCenter).clone();
+        return this.context.physics.sphereOverlap(wp, .02);
+    }
+    raycast() {
+        const opts = new RaycastOptions();
+        opts.layerMask = new Layers();
+        opts.layerMask.enableAll();
+        opts.layerMask.disable(2);
+        opts.ray = this.getRay();
+        const hits = this.context.physics.raycast(opts);
+        for (let i = 0; i < hits.length; i++) {
+            const hit = hits[i];
+            const obj = hit.object;
+            if (!this.testIsVisible(obj)) {
+                hits.splice(i, 1);
+                i--;
+                continue;
+            }
+            hit.object = UIRaycastUtils.getObject(obj);
+            break;
+        }
+        // console.log(...hits);
+        return hits;
+    }
+}
+export var AttachedObjectEvents;
+(function (AttachedObjectEvents) {
+    AttachedObjectEvents["WillTake"] = "WillTake";
+    AttachedObjectEvents["DidTake"] = "DidTake";
+    AttachedObjectEvents["WillFree"] = "WillFree";
+    AttachedObjectEvents["DidFree"] = "DidFree";
+})(AttachedObjectEvents || (AttachedObjectEvents = {}));
+export class AttachedObject {
+    static Events = {};
+    static AddEventListener(event, callback) {
+        if (!AttachedObject.Events[event])
+            AttachedObject.Events[event] = [];
+        AttachedObject.Events[event].push(callback);
+        return callback;
+    }
+    static RemoveEventListener(event, callback) {
+        if (!callback)
+            return;
+        if (!AttachedObject.Events[event])
+            return;
+        const idx = AttachedObject.Events[event].indexOf(callback);
+        if (idx >= 0)
+            AttachedObject.Events[event].splice(idx, 1);
+    }
+    static Current = [];
+    static Register(obj) {
+        if (!this.Current.find(x => x === obj)) {
+            this.Current.push(obj);
+        }
+    }
+    static Remove(obj) {
+        const i = this.Current.indexOf(obj);
+        if (i >= 0) {
+            this.Current.splice(i, 1);
+        }
+    }
+    static TryTake(controller, candidate, intersection, closeGrab) {
+        const interactable = GameObject.getComponentInParent(candidate, Interactable);
+        if (!interactable) {
+            if (debug)
+                console.warn("Prevented taking object that is not interactable", candidate);
+            return null;
+        }
+        else
+            candidate = interactable.gameObject;
+        let objectToAttach = candidate;
+        const sync = GameObject.getComponentInParent(candidate, SyncedTransform);
+        if (sync) {
+            sync.requestOwnership();
+            objectToAttach = sync.gameObject;
+        }
+        for (const o of this.Current) {
+            if (o.selected === objectToAttach) {
+                if (o.controller === controller)
+                    return o;
+                o.free();
+                o.Take(controller, objectToAttach, candidate, sync, interactable, intersection, closeGrab);
+                return o;
+            }
+        }
+        const att = new AttachedObject();
+        att.Take(controller, objectToAttach, candidate, sync, interactable, intersection, closeGrab);
+        return att;
+    }
+    sync = null;
+    selected = null;
+    selectedParent = null;
+    selectedMesh = null;
+    controller = null;
+    grabTime = 0;
+    grabUUID = "";
+    isCloseGrab = false; // when taken via sphere cast with hands
+    originalMaterial = null;
+    usageMarker = null;
+    rigidbodies = null;
+    didReparent = false;
+    grabDistance = 0;
+    interactable = null;
+    positionSource = null;
+    Take(controller, take, hit, sync, _interactable, intersection, closeGrab) {
+        console.assert(take !== null, "Expected object to be taken but was", take);
+        if (controller.isUsingHands) {
+            this.positionSource = closeGrab ? controller.wrist : controller.controller;
+        }
+        else {
+            this.positionSource = controller.controller;
+        }
+        if (!this.positionSource) {
+            console.warn("No position source");
+            return this;
+        }
+        const args = { controller, take, hit, sync, interactable: _interactable };
+        AttachedObject.Events.WillTake?.forEach(x => x(this, args));
+        const mesh = hit;
+        if (mesh?.material) {
+            this.originalMaterial = mesh.material;
+            if (!Array.isArray(mesh.material)) {
+                mesh.material = mesh.material.clone();
+                if (mesh.material && mesh.material["emissive"])
+                    mesh.material["emissive"].b = .2;
+            }
+        }
+        this.selected = take;
+        if (!this.selectedParent) {
+            this.selectedParent = take.parent;
+        }
+        this.selectedMesh = mesh;
+        this.controller = controller;
+        this.interactable = _interactable;
+        this.isCloseGrab = closeGrab;
+        // if (interactable.canGrab) {
+        //     this.didReparent = true;
+        //     this.device.controller.attach(take);
+        // }
+        // else 
+        this.didReparent = false;
+        this.sync = sync;
+        this.grabTime = controller.context.time.time;
+        this.grabUUID = Date.now().toString();
+        this.usageMarker = GameObject.addNewComponent(this.selected, UsageMarker);
+        this.rigidbodies = GameObject.getComponentsInChildren(this.selected, Rigidbody);
+        getWorldPosition(this.positionSource, this.lastControllerWorldPos);
+        const getGrabPoint = () => closeGrab ? this.lastControllerWorldPos.clone() : intersection.point.clone();
+        this.grabDistance = getGrabPoint().distanceTo(this.lastControllerWorldPos);
+        this.totalChangeAlongDirection = 0.0;
+        // we're storing position relative to the grab point
+        // we're storing rotation relative to the ray
+        this.localPositionOffsetToGrab = this.selected.worldToLocal(getGrabPoint());
+        const rot = controller.isUsingHands && closeGrab ? this.controller.getWristQuaternion().clone() : controller.rayRotation.clone();
+        getWorldQuaternion(this.selected, this.localQuaternionToGrab).premultiply(rot.invert());
+        const rig = this.controller.webXR.Rig;
+        if (rig)
+            this.rigPositionLastFrame.copy(getWorldPosition(rig));
+        Avatar_POI.Add(controller.context, this.selected);
+        AttachedObject.Register(this);
+        if (this.sync) {
+            this.sync.fastMode = true;
+        }
+        AttachedObject.Events.DidTake?.forEach(x => x(this, args));
+        return this;
+    }
+    free() {
+        if (!this.selected)
+            return;
+        const args = { controller: this.controller, take: this.selected, hit: this.selected, sync: this.sync, interactable: null };
+        AttachedObject.Events.WillFree?.forEach(x => x(this, args));
+        Avatar_POI.Remove(this.controller.context, this.selected);
+        AttachedObject.Remove(this);
+        if (this.sync) {
+            this.sync.fastMode = false;
+        }
+        const mesh = this.selectedMesh;
+        if (mesh && this.originalMaterial && mesh.material) {
+            mesh.material = this.originalMaterial;
+        }
+        const object = this.selected;
+        // only attach the object back if it has a parent
+        // no parent means it was destroyed while holding it!
+        if (this.didReparent && object.parent) {
+            const prevParent = this.selectedParent;
+            if (prevParent)
+                prevParent.attach(object);
+            else
+                this.controller?.context.scene.attach(object);
+        }
+        this.usageMarker?.destroy();
+        if (this.controller)
+            this.controller.grabbed = null;
+        this.selected = null;
+        this.selectedParent = null;
+        this.selectedMesh = null;
+        this.sync = null;
+        // TODO: make throwing work again
+        if (this.rigidbodies) {
+            for (const rb of this.rigidbodies) {
+                rb.wakeUp();
+                rb.setVelocity(rb.smoothedVelocity);
+            }
+        }
+        this.rigidbodies = null;
+        this.localPositionOffsetToGrab = null;
+        this.quaternionLerp = null;
+        AttachedObject.Events.DidFree?.forEach(x => x(this, args));
+    }
+    grabPoint = new Vector3();
+    localPositionOffsetToGrab = null;
+    localPositionOffsetToGrab_worldSpace = new Vector3();
+    localQuaternionToGrab = new Quaternion(0, 0, 0, 1);
+    targetDir = null;
+    quaternionLerp = null;
+    controllerDir = new Vector3();
+    controllerWorldPos = new Vector3();
+    lastControllerWorldPos = new Vector3();
+    controllerPosDelta = new Vector3();
+    totalChangeAlongDirection = 0.0;
+    rigPositionLastFrame = new Vector3();
+    controllerMovementSinceLastFrame() {
+        if (!this.positionSource || !this.controller)
+            return 0.0;
+        // controller direction
+        this.controllerDir.set(0, 0, -1);
+        this.controllerDir.applyQuaternion(this.controller.rayRotation);
+        // controller delta
+        getWorldPosition(this.positionSource, this.controllerWorldPos);
+        this.controllerPosDelta.copy(this.controllerWorldPos);
+        this.controllerPosDelta.sub(this.lastControllerWorldPos);
+        this.lastControllerWorldPos.copy(this.controllerWorldPos);
+        const rig = this.controller.webXR.Rig;
+        if (rig) {
+            const rigPos = getWorldPosition(rig);
+            const rigDelta = this.rigPositionLastFrame.sub(rigPos);
+            this.controllerPosDelta.add(rigDelta);
+            this.rigPositionLastFrame.copy(rigPos);
+        }
+        // calculate delta along direction
+        const changeAlongControllerDirection = this.controllerDir.dot(this.controllerPosDelta);
+        return changeAlongControllerDirection;
+    }
+    update() {
+        if (this.rigidbodies)
+            for (const rb of this.rigidbodies)
+                rb.resetVelocities();
+        // TODO: add/use sync lost ownership event
+        if (this.sync && this.controller && this.controller.context.connection.isInRoom) {
+            const td = this.controller.context.time.time - this.grabTime;
+            // if (time.frameCount % 60 === 0) {
+            //     console.log("ownership?", this.selected.name, this.sync.hasOwnership(), td)
+            // }
+            if (td > 3) {
+                // if (time.frameCount % 60 === 0) {
+                //     console.log(this.sync.hasOwnership())
+                // }
+                if (this.sync.hasOwnership() === false) {
+                    console.log("no ownership, will leave", this.sync.guid);
+                    this.free();
+                }
+            }
+        }
+        if (this.interactable && !this.interactable.canGrab)
+            return;
+        if (!this.didReparent && this.selected && this.controller) {
+            const rigScale = this.controller.webXR.Rig?.scale.x ?? 1.0;
+            this.totalChangeAlongDirection += this.controllerMovementSinceLastFrame();
+            // console.log(this.totalChangeAlongDirection);
+            // alert("yo: " + this.controller.webXR.Rig?.scale.x); // this is 0.1 on Hololens
+            let currentDist = 1.0;
+            if (this.controller.type === ControllerType.PhysicalDevice) // only for controllers and not on touch (AR touches are controllers)
+             {
+                currentDist = Math.max(0.0, 1 + this.totalChangeAlongDirection * 2.0 / rigScale);
+                currentDist = currentDist * currentDist * currentDist;
+            }
+            if (this.grabDistance / rigScale < 0.8)
+                currentDist = 1.0; // don't accelerate if this is a close grab, want full control
+            if (!this.targetDir) {
+                this.targetDir = new Vector3();
+            }
+            this.targetDir.set(0, 0, -this.grabDistance * currentDist);
+            const target = this.targetDir.applyQuaternion(this.controller.rayRotation).add(this.controllerWorldPos);
+            // apply rotation
+            const targetQuat = this.controller.rayRotation.clone().multiplyQuaternions(this.controller.rayRotation, this.localQuaternionToGrab);
+            if (!this.quaternionLerp) {
+                this.quaternionLerp = targetQuat.clone();
+            }
+            this.quaternionLerp.slerp(targetQuat, this.controller.useSmoothing ? this.controller.context.time.deltaTime / .03 : 1.0);
+            setWorldQuaternion(this.selected, this.quaternionLerp);
+            this.selected.updateWorldMatrix(false, false); // necessary so that rotation is correct for the following position update
+            // apply position
+            this.grabPoint.copy(target);
+            // apply local grab offset
+            if (this.localPositionOffsetToGrab) {
+                this.localPositionOffsetToGrab_worldSpace.copy(this.localPositionOffsetToGrab);
+                this.selected.localToWorld(this.localPositionOffsetToGrab_worldSpace).sub(getWorldPosition(this.selected));
+                target.sub(this.localPositionOffsetToGrab_worldSpace);
+            }
+            setWorldPosition(this.selected, target);
+        }
+        if (this.rigidbodies != null) {
+            for (const rb of this.rigidbodies) {
+                rb.wakeUp();
+            }
+        }
+        InstancingUtil.markDirty(this.selected, true);
+    }
+}
 //# sourceMappingURL=WebXRController.js.map