@needle-tools/engine 2.35.5-pre → 2.36.0-pre

package/src/engine-components/WebXRController.ts

@@ -1,21 +1,21 @@
-import { Behaviour, GameObject } from "./Component";
-import { WebXR } from "./WebXR";
-import * as THREE from "three";
-import { SyncedTransform } from "./SyncedTransform";
-import { Physics, RaycastOptions } from "../engine/engine_physics";
-import { XRControllerModel, XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory.js';
+import { BoxHelper, BufferGeometry, Color, Euler, Group, Intersection, Layers, Line, LineBasicMaterial, Material, Mesh, MeshBasicMaterial, Object3D, PerspectiveCamera, Quaternion, Ray, SphereGeometry, Vector2, Vector3, XRInputSource, XRSession } from "three";
 import { OculusHandModel } from 'three/examples/jsm/webxr/OculusHandModel.js';
 import { OculusHandPointerModel } from 'three/examples/jsm/webxr/OculusHandPointerModel.js';
-import { Avatar_POI } from "./avatar/Avatar_Brain_LookAt";
-import { XRInputSource, XRSession } from "three";
+import { XRControllerModel, XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory.js';
+
+import { InstancingUtil } from "../engine/engine_instancing";
 import { Mathf } from "../engine/engine_math";
-import * as utils from "../engine/engine_three_utils"
+import { RaycastOptions } from "../engine/engine_physics";
+import { getWorldPosition, getWorldQuaternion, setWorldPosition, setWorldQuaternion } from "../engine/engine_three_utils";
+import { getParam, getPath } from "../engine/engine_utils";
+
+import { Avatar_POI } from "./avatar/Avatar_Brain_LookAt";
+import { Behaviour, GameObject } from "./Component";
 import { Interactable, UsageMarker } from "./Interactable";
-import { InstancingUtil } from "../engine/engine_instancing";
 import { Rigidbody } from "./RigidBody";
-import { delay, getParam, getPath } from "../engine/engine_utils";
+import { SyncedTransform } from "./SyncedTransform";
 import { UIRaycastUtils } from "./ui/RaycastUtils";
-import { RaycastResult } from "cannon-es";
+import { WebXR } from "./WebXR";
 
 const debug = getParam("debugwebxrcontroller");
 
@@ -38,28 +38,28 @@ export class WebXRController extends Behaviour {
 
     public static Factory: XRControllerModelFactory = new XRControllerModelFactory();
 
-    private static raycastColor: THREE.Color = new THREE.Color(.9, .3, .3);
-    private static raycastNoHitColor: THREE.Color = new THREE.Color(.6, .6, .6);
-    private static geometry = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, -1)]);
+    private static raycastColor: Color = new Color(.9, .3, .3);
+    private static raycastNoHitColor: Color = new Color(.6, .6, .6);
+    private static geometry = new BufferGeometry().setFromPoints([new Vector3(0, 0, 0), new Vector3(0, 0, -1)]);
     private static handModels: { [index: number]: OculusHandPointerModel } = {};
 
-    private static CreateRaycastLine(): THREE.Line {
-        const line = new THREE.Line(this.geometry);
-        const mat = line.material as THREE.LineBasicMaterial;
+    private static CreateRaycastLine(): Line {
+        const line = new Line(this.geometry);
+        const mat = line.material as LineBasicMaterial;
         mat.color = this.raycastColor;
         // mat.linewidth = 10;
-        line.layers.set(1);
+        line.layers.set(2);
         line.name = 'line';
         line.scale.z = 1;
         return line;
     }
 
-    private static CreateRaycastHitPoint(): THREE.Mesh {
-        const geometry = new THREE.SphereGeometry(.5, 22, 22);
-        const material = new THREE.MeshBasicMaterial({ color: this.raycastColor });
-        const sphere = new THREE.Mesh(geometry, material);
+    private static CreateRaycastHitPoint(): Mesh {
+        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(1);
+        sphere.layers.set(2);
         return sphere;
     }
 
@@ -71,7 +71,7 @@ export class WebXRController extends Behaviour {
         ctrl.type = type;
 
         const context = owner.context;
-        // from https://github.com/mrdoob/three.js/blob/master/examples/webxr_vr_dragging.html
+        // 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);
@@ -80,24 +80,28 @@ export class WebXRController extends Behaviour {
 
         ctrl.hand = context.renderer.xr.getHand(index);
         const hand = new OculusHandModel(ctrl.hand);
-        hand["path"] = "/" + getPath(owner.sourceId, "/assets/");
+        if (ctrl.webXR.handModelPath && ctrl.webXR.handModelPath !== "")
+            hand["path"] = "/" + getPath(owner.sourceId, ctrl.webXR.handModelPath);
         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/three.js/pull/23279 lands
+        // 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/three.js/pull/23279 lands
+        // 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) {
@@ -144,12 +148,12 @@ export class WebXRController extends Behaviour {
     public webXR!: WebXR;
     public index: number = -1;
     public controllerModel!: XRControllerModel;
-    public controller!: THREE.Group;
-    public controllerGrip!: THREE.Group;
-    public hand!: THREE.Group;
+    public controller!: Group;
+    public controllerGrip!: Group;
+    public hand!: Group;
     public handPointerModel!: OculusHandPointerModel;
     public grabbed: AttachedObject | null = null;
-    public input: THREE.XRInputSource | null = null;
+    public input: XRInputSource | null = null;
     public type: ControllerType = ControllerType.PhysicalDevice;
 
     get isUsingHands(): boolean {
@@ -157,35 +161,35 @@ export class WebXRController extends Behaviour {
         return r !== null && r !== undefined;
     }
 
-    get wrist(): THREE.Object3D | null {
+    get wrist(): Object3D | null {
         if (!this.hand) return null;
         const jnts = this.hand["joints"];
         if (!jnts) return null;
         return jnts["wrist"];
     }
 
-    private _wristQuaternion: THREE.Quaternion | null = null;
-    getWristQuaternion(): THREE.Quaternion | null {
+    private _wristQuaternion: Quaternion | null = null;
+    getWristQuaternion(): Quaternion | null {
         const wrist = this.wrist;
         if (!wrist) return null;
-        if (!this._wristQuaternion) this._wristQuaternion = new THREE.Quaternion();
-        const wr = utils.getWorldQuaternion(wrist).multiply(this._wristQuaternion.setFromEuler(new THREE.Euler(-Math.PI / 4, 0, 0)));
+        if (!this._wristQuaternion) this._wristQuaternion = new Quaternion();
+        const wr = getWorldQuaternion(wrist).multiply(this._wristQuaternion.setFromEuler(new Euler(-Math.PI / 4, 0, 0)));
         return wr;
     }
 
-    private movementVector: THREE.Vector3 = new THREE.Vector3();
-    private worldRot: THREE.Quaternion = new THREE.Quaternion();
-    private joystick: THREE.Vector2 = new THREE.Vector2();
+    private movementVector: Vector3 = new Vector3();
+    private worldRot: Quaternion = new Quaternion();
+    private joystick: Vector2 = new Vector2();
     private didRotate: boolean = false;
     private didTeleport: boolean = false;
     private didChangeScale: boolean = false;
     private static PreviousCameraFarDistance: number | undefined = undefined;
     private static MovementSpeedFactor: number = 1;
 
-    private lastHit: THREE.Intersection | null = null;
+    private lastHit: Intersection | null = null;
 
-    private raycastLine: THREE.Line | null = null;
-    private _raycastHitPoint: THREE.Object3D | null = null;
+    private raycastLine: Line | null = null;
+    private _raycastHitPoint: Object3D | null = null;
     private _connnectedCallback: any | null = null;
     private _disconnectedCallback: any | null = null;
     private _selectStartEvt: any | null = null;
@@ -195,7 +199,7 @@ export class WebXRController extends Behaviour {
     public get selectionUp(): boolean { return !this._selectionPressed && this._selectionPressedLastFrame; }
     public get selectionPressed(): boolean { return this._selectionPressed; }
     public get selectionClick(): boolean { return this._selectionEndTime - this._selectionStartTime < 0.3; }
-    public get raycastHitPoint(): THREE.Object3D | null { return this._raycastHitPoint; }
+    public get raycastHitPoint(): Object3D | null { return this._raycastHitPoint; }
 
     private _selectionPressed: boolean = false;
     private _selectionPressedLastFrame: boolean = false;
@@ -336,7 +340,7 @@ export class WebXRController extends Behaviour {
         }
     }
 
-    rayRotation: THREE.Quaternion = new THREE.Quaternion();
+    rayRotation: Quaternion = new Quaternion();
 
     update(): void {
 
@@ -357,8 +361,13 @@ export class WebXRController extends Behaviour {
         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(utils.getWorldQuaternion(this.controller), this.useSmoothing ? t : 1.0);
-        const wp = utils.getWorldPosition(this.controller);
+        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;
+        }
 
         if (this.raycastLine) {
             if (this.type === ControllerType.Touch) {
@@ -366,7 +375,7 @@ export class WebXRController extends Behaviour {
             }
             else if (this.isUsingHands) {
                 this.raycastLine.visible = !this.grabbed;
-                utils.setWorldPosition(this.raycastLine, wp);
+                setWorldPosition(this.raycastLine, wp);
                 const jnts = this.hand!['joints'];
                 if (jnts) {
                     const wrist = jnts['wrist'];
@@ -377,12 +386,12 @@ export class WebXRController extends Behaviour {
                         // this.rayRotation.slerp(wr, this.useSmoothing ? t * 2 : 1);
                     }
                 }
-                utils.setWorldQuaternion(this.raycastLine, this.rayRotation);
+                setWorldQuaternion(this.raycastLine, this.rayRotation);
             }
             else {
                 this.raycastLine.visible = true;
-                utils.setWorldQuaternion(this.raycastLine, this.rayRotation);
-                utils.setWorldPosition(this.raycastLine, wp);
+                setWorldQuaternion(this.raycastLine, this.rayRotation);
+                setWorldPosition(this.raycastLine, wp);
             }
         }
 
@@ -480,8 +489,8 @@ export class WebXRController extends Behaviour {
             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 THREE.Vector3();
-                // const worldQuaternion = new THREE.Quaternion();
+                // 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);
@@ -510,7 +519,7 @@ export class WebXRController extends Behaviour {
                                 doTeleport = true;
                                 newRigScale = .1;
                                 WebXRController.MovementSpeedFactor = newRigScale * 2;
-                                const cam = this.context.mainCamera as THREE.PerspectiveCamera;
+                                const cam = this.context.mainCamera as PerspectiveCamera;
                                 WebXRController.PreviousCameraFarDistance = cam.far;
                                 cam.far /= newRigScale;
                             }
@@ -519,7 +528,7 @@ export class WebXRController extends Behaviour {
                                 rig.scale.set(1, 1, 1);
                                 newRigScale = 1;
                                 WebXRController.MovementSpeedFactor = 1;
-                                const cam = this.context.mainCamera as THREE.PerspectiveCamera;
+                                const cam = this.context.mainCamera as PerspectiveCamera;
                                 if (WebXRController.PreviousCameraFarDistance)
                                     cam.far = WebXRController.PreviousCameraFarDistance;
                             }
@@ -539,7 +548,7 @@ export class WebXRController extends Behaviour {
                     const hit = rc[0];
                     if (isInMiniatureMode || this.isValidTeleportTarget(hit.object)) {
                         const point = hit.point;
-                        utils.setWorldPosition(rig, point);
+                        setWorldPosition(rig, point);
                     }
                 }
             }
@@ -554,17 +563,17 @@ export class WebXRController extends Behaviour {
         }
     }
 
-    private isValidTeleportTarget(obj: THREE.Object3D): boolean {
+    private isValidTeleportTarget(obj: Object3D): boolean {
         return GameObject.getComponentInParent(obj, TeleportTarget) != null;
     }
 
-    private updateStick(inputSource: THREE.XRInputSource) {
+    private updateStick(inputSource: XRInputSource) {
         if (!inputSource || !inputSource.gamepad || inputSource.gamepad.axes?.length < 4) return;
         this.joystick.x = inputSource.gamepad.axes[2];
         this.joystick.y = inputSource.gamepad.axes[3];
     }
 
-    private updateLastHit(): THREE.Intersection | null {
+    private updateLastHit(): Intersection | null {
         const rc = this.raycast();
         const hit = rc ? rc[0] : null;
         this.lastHit = hit;
@@ -576,7 +585,7 @@ export class WebXRController extends Behaviour {
 
         if (this.raycastLine) {
             this.raycastLine.scale.z = factor * (this.lastHit?.distance ?? 9999);
-            const mat = this.raycastLine.material as THREE.LineBasicMaterial;
+            const mat = this.raycastLine.material as LineBasicMaterial;
             if (hit != null) mat.color = WebXRController.raycastColor;
             else mat.color = WebXRController.raycastNoHitColor;
         }
@@ -603,7 +612,7 @@ export class WebXRController extends Behaviour {
     }
 
     private selectStartCallback: Function | null = null;
-    private lastSelectStartObject: THREE.Object3D | null = null;;
+    private lastSelectStartObject: Object3D | null = null;;
 
     private onHandleSelectStart() {
         this.selectStartCallback = null;
@@ -613,7 +622,7 @@ export class WebXRController extends Behaviour {
         // console.log("DOWN", this.index, WebXRController.eventSubs);
 
         // let maxDistance = this.isUsingHands ? .1 : undefined;
-        let intersections: THREE.Intersection[] | null = null;
+        let intersections: Intersection[] | null = null;
         let closeGrab: boolean = false;
         if (this.isUsingHands) {
             intersections = this.overlap();
@@ -627,14 +636,12 @@ export class WebXRController extends Behaviour {
         }
         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;
-                // if (!this.testIsVisible(object)) {
-                //     if (debug)
-                //         console.log("not visible");
-                //     continue;
-                // }
                 this.lastSelectStartObject = object;
                 const args = { selected: object, grab: object };
                 const subs = WebXRController.eventSubs[ControllerEvents.SelectStart];
@@ -691,7 +698,7 @@ export class WebXRController extends Behaviour {
         }
     }
 
-    private testIsVisible(obj: THREE.Object3D | null): boolean {
+    private testIsVisible(obj: Object3D | null): boolean {
         if (!obj) return false;
         if (GameObject.isActiveInHierarchy(obj) === false) return false;
         if (UIRaycastUtils.isInteractable(obj) === false) {
@@ -702,7 +709,7 @@ export class WebXRController extends Behaviour {
         // return this.testIsVisible(obj.parent);
     }
 
-    private setControllerLayers(obj: THREE.Object3D, layer: number) {
+    private setControllerLayers(obj: Object3D, layer: number) {
         if (!obj) return;
         obj.layers.set(layer);
         if (obj.children) {
@@ -715,28 +722,43 @@ export class WebXRController extends Behaviour {
         }
     }
 
-    public getRay(): THREE.Ray {
-        const ray = new THREE.Ray();
+    public getRay(): Ray {
+        const ray = new Ray();
         // this.tempMatrix.identity().extractRotation(this.controller.matrixWorld);
         // ray.origin.setFromMatrixPosition(this.controller.matrixWorld);
-        ray.origin.copy(utils.getWorldPosition(this.controller));
+        ray.origin.copy(getWorldPosition(this.controller));
         ray.direction.set(0, 0, -1).applyQuaternion(this.rayRotation);
         return ray;
     }
 
-    public overlap(): THREE.Intersection[] {
+    private closeGrabBoundingBoxHelper?: BoxHelper;
+
+    public overlap(): Intersection[] {
         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<THREE.Intersection>();
+            return new Array<Intersection>();
 
-        const wp = utils.getWorldPosition(overlapCenter).clone();
+        const wp = getWorldPosition(overlapCenter).clone();
         return this.context.physics.sphereOverlap(wp, .02);
     }
 
-    public raycast(): THREE.Intersection[] {
+    public raycast(): Intersection[] {
         const opts = new RaycastOptions();
-        opts.layerMask = new THREE.Layers();
+        opts.layerMask = new Layers();
         opts.layerMask.set(0);
+        opts.layerMask.disable(2);
         opts.ray = this.getRay();
         const hits = this.context.physics.raycast(opts);
         for (let i = 0; i < hits.length; i++) {
@@ -795,7 +817,7 @@ export class AttachedObject {
         }
     }
 
-    public static TryTake(controller: WebXRController, candidate: THREE.Object3D, intersection: THREE.Intersection, closeGrab: boolean): AttachedObject | null {
+    public static TryTake(controller: WebXRController, candidate: Object3D, intersection: Intersection, closeGrab: boolean): AttachedObject | null {
         const interactable = GameObject.getComponentInParent(candidate, Interactable);
         if (!interactable) {
             if (debug)
@@ -828,24 +850,24 @@ export class AttachedObject {
 
 
     public sync: SyncedTransform | null = null;
-    public selected: THREE.Object3D | null = null;
-    public selectedParent: THREE.Object3D | null = null;
-    public selectedMesh: THREE.Mesh | null = null;
+    public selected: Object3D | null = null;
+    public selectedParent: Object3D | null = null;
+    public selectedMesh: Mesh | null = null;
     public controller: WebXRController | null = null;
     public grabTime: number = 0;
     public grabUUID: string = "";
     public isCloseGrab: boolean = false; // when taken via sphere cast with hands
 
-    private originalMaterial: THREE.Material | THREE.Material[] | null = null;
+    private originalMaterial: Material | Material[] | null = null;
     private usageMarker: UsageMarker | null = null;
     private rigidbodies: Rigidbody[] | null = null;
     private didReparent: boolean = false;
     private grabDistance: number = 0;
     private interactable: Interactable | null = null;
-    private positionSource: THREE.Object3D | null = null;
+    private positionSource: Object3D | null = null;
 
-    private Take(controller: WebXRController, take: THREE.Object3D, hit: THREE.Object3D, sync: SyncedTransform | null, _interactable: Interactable,
-        intersection: THREE.Intersection, closeGrab: boolean)
+    private Take(controller: WebXRController, take: Object3D, hit: Object3D, sync: SyncedTransform | null, _interactable: Interactable,
+        intersection: Intersection, closeGrab: boolean)
         : AttachedObject {
         console.assert(take !== null, "Expected object to be taken but was", take);
 
@@ -864,11 +886,11 @@ export class AttachedObject {
         AttachedObject.Events.WillTake?.forEach(x => x(this, args));
 
 
-        const mesh = hit as THREE.Mesh;
+        const mesh = hit as Mesh;
         if (mesh?.material) {
             this.originalMaterial = mesh.material;
             if (!Array.isArray(mesh.material)) {
-                mesh.material = (mesh.material as THREE.Material).clone();
+                mesh.material = (mesh.material as Material).clone();
                 if (mesh.material && mesh.material["emissive"])
                     mesh.material["emissive"].b = .2;
             }
@@ -895,7 +917,7 @@ export class AttachedObject {
         this.grabUUID = Date.now().toString();
         this.usageMarker = GameObject.addNewComponent(this.selected, UsageMarker);
         this.rigidbodies = GameObject.getComponentsInChildren(this.selected, Rigidbody);
-        utils.getWorldPosition(this.positionSource, this.lastControllerWorldPos);
+        getWorldPosition(this.positionSource, this.lastControllerWorldPos);
         const getGrabPoint = () => closeGrab ? this.lastControllerWorldPos.clone() : intersection.point.clone();
         this.grabDistance = getGrabPoint().distanceTo(this.lastControllerWorldPos);
         this.totalChangeAlongDirection = 0.0;
@@ -904,11 +926,11 @@ export class AttachedObject {
         // 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();
-        utils.getWorldQuaternion(this.selected, this.localQuaternionToGrab).premultiply(rot.invert());
+        getWorldQuaternion(this.selected, this.localQuaternionToGrab).premultiply(rot.invert());
 
         const rig = this.controller.webXR.Rig;
         if (rig)
-            this.rigPositionLastFrame.copy(utils.getWorldPosition(rig))
+            this.rigPositionLastFrame.copy(getWorldPosition(rig))
 
         Avatar_POI.Add(controller.context, this.selected);
         AttachedObject.Register(this);
@@ -975,20 +997,20 @@ export class AttachedObject {
         AttachedObject.Events.DidFree?.forEach(x => x(this, args));
     }
 
-    public grabPoint: THREE.Vector3 = new THREE.Vector3();
+    public grabPoint: Vector3 = new Vector3();
 
-    private localPositionOffsetToGrab: THREE.Vector3 | null = null;
-    private localPositionOffsetToGrab_worldSpace: THREE.Vector3 = new THREE.Vector3();
-    private localQuaternionToGrab: THREE.Quaternion = new THREE.Quaternion(0, 0, 0, 1);
-    private targetDir: THREE.Vector3 | null = null;
-    private quaternionLerp: THREE.Quaternion | null = null;
+    private localPositionOffsetToGrab: Vector3 | null = null;
+    private localPositionOffsetToGrab_worldSpace: Vector3 = new Vector3();
+    private localQuaternionToGrab: Quaternion = new Quaternion(0, 0, 0, 1);
+    private targetDir: Vector3 | null = null;
+    private quaternionLerp: Quaternion | null = null;
 
-    private controllerDir = new THREE.Vector3();
-    private controllerWorldPos = new THREE.Vector3();
-    private lastControllerWorldPos = new THREE.Vector3();
-    private controllerPosDelta = new THREE.Vector3();
+    private controllerDir = new Vector3();
+    private controllerWorldPos = new Vector3();
+    private lastControllerWorldPos = new Vector3();
+    private controllerPosDelta = new Vector3();
     private totalChangeAlongDirection = 0.0;
-    private rigPositionLastFrame = new THREE.Vector3();
+    private rigPositionLastFrame = new Vector3();
 
     private controllerMovementSinceLastFrame() {
         if (!this.positionSource || !this.controller) return 0.0;
@@ -998,13 +1020,13 @@ export class AttachedObject {
         this.controllerDir.applyQuaternion(this.controller.rayRotation);
 
         // controller delta
-        utils.getWorldPosition(this.positionSource, this.controllerWorldPos);
+        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 = utils.getWorldPosition(rig);
+            const rigPos = getWorldPosition(rig);
             const rigDelta = this.rigPositionLastFrame.sub(rigPos);
             this.controllerPosDelta.add(rigDelta);
             this.rigPositionLastFrame.copy(rigPos);
@@ -1052,7 +1074,7 @@ export class AttachedObject {
             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 THREE.Vector3();
+                this.targetDir = new Vector3();
             }
             this.targetDir.set(0, 0, -this.grabDistance * currentDist);
             const target = this.targetDir.applyQuaternion(this.controller.rayRotation).add(this.controllerWorldPos);
@@ -1063,7 +1085,7 @@ export class AttachedObject {
                 this.quaternionLerp = targetQuat.clone();
             }
             this.quaternionLerp.slerp(targetQuat, this.controller.useSmoothing ? this.controller.context.time.deltaTime / .03 : 1.0);
-            utils.setWorldQuaternion(this.selected, this.quaternionLerp);
+            setWorldQuaternion(this.selected, this.quaternionLerp);
             this.selected.updateWorldMatrix(false, false); // necessary so that rotation is correct for the following position update
 
             // apply position
@@ -1071,10 +1093,10 @@ export class AttachedObject {
             // apply local grab offset
             if (this.localPositionOffsetToGrab) {
                 this.localPositionOffsetToGrab_worldSpace.copy(this.localPositionOffsetToGrab);
-                this.selected.localToWorld(this.localPositionOffsetToGrab_worldSpace).sub(utils.getWorldPosition(this.selected));
+                this.selected.localToWorld(this.localPositionOffsetToGrab_worldSpace).sub(getWorldPosition(this.selected));
                 target.sub(this.localPositionOffsetToGrab_worldSpace);
             }
-            utils.setWorldPosition(this.selected, target);
+            setWorldPosition(this.selected, target);
         }
 
 

package/src/engine-components/WebXRGrabRendering.ts

@@ -1,7 +1,7 @@
 import { getWorldPosition, setWorldPosition, setWorldPositionXYZ } from "../engine/engine_three_utils";
 import { Behaviour, GameObject } from "./Component";
 import { AttachedObject, AttachedObjectEvents } from "./WebXRController";
-import * as THREE from "three";
+import { Object3D, Vector3 } from "three";
 import { PlayerColor } from "./PlayerColor";
 import { Context } from "../engine/engine_setup";
 import { IModel, SendQueue } from "../engine/engine_networking_types";
@@ -20,7 +20,7 @@ export class XRGrabModel implements IModel {
     source: { x: number, y: number, z: number } = { x: 0, y: 0, z: 0 };
     target: string | undefined;
 
-    update(context : Context, point: THREE.Vector3, source: THREE.Vector3, target: string | undefined = undefined) {
+    update(context : Context, point: Vector3, source: Vector3, target: string | undefined = undefined) {
         this.userId = context.connection.connectionId;
         this.point.x = point.x;
         this.point.y = point.y;
@@ -34,14 +34,14 @@ export class XRGrabModel implements IModel {
 
 // sends grab info to other users and creates rendering instances
 export class XRGrabRendering extends Behaviour {
-    prefab: THREE.Object3D | null = null;
+    prefab: Object3D | null = null;
 
     private _grabModels: Array<XRGrabModel> = [];
     private _grabModelsUpdateTime: Array<number> = [];
     private _addOrUpdateSub: Function | null = null;
     private _endSub: Function | null = null;
     private _freeSub: Function | null = null;
-    private _instances: { [key: string]: {instance:THREE.Object3D, model:XRGrabModel} } = {};
+    private _instances: { [key: string]: {instance:Object3D, model:XRGrabModel} } = {};
 
     awake(): void {
         if(this.prefab) this.prefab.visible = false;
@@ -72,7 +72,7 @@ export class XRGrabRendering extends Behaviour {
         const inst = this._instances[data.guid];
         if(!inst)
         {
-            const instance = GameObject.instantiate(this.prefab) as THREE.Object3D;
+            const instance = GameObject.instantiate(this.prefab) as Object3D;
             instance.visible = true;
             this._instances[data.guid] = {instance, model:data};
             if(data.userId){
@@ -135,7 +135,7 @@ export class XRGrabRendering extends Behaviour {
         model.update(this.context, att.grabPoint, att.controller.worldPosition, targetObject);
     }
 
-    private temp : THREE.Vector3 = new THREE.Vector3();
+    private temp : Vector3 = new Vector3();
     private updateRendering() {
         const step = this.context.time.deltaTime / .5;
         for(const key in this._instances){