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

package/src/engine-components/RigidBody.ts

@@ -1,234 +1,343 @@
 import { Behaviour } from "./Component";
-import { BodyOptions } from '../engine/engine_physics'
-import * as CANNON from 'cannon-es'
 import * as THREE from 'three'
 import { getWorldPosition } from "../engine/engine_three_utils";
 import { serializeable } from "../engine/engine_serialization_decorator";
 import { Watch } from "../engine/engine_utils";
-import { Vector3 } from "three";
+import { Object3D, Vector3 } from "three";
 import { IRigidbody } from "../engine/engine_types";
+import { CollisionDetectionMode, RigidbodyConstraints } from "../engine/engine_physics.types";
+import { validate } from "../engine/engine_util_decorator";
+import { Context } from "../engine/engine_setup";
+
+class TransformWatch {
+
+    get isDirty(): boolean {
+        return this.positionChanged || this.rotationChanged;
+    }
+    positionChanged: boolean = false;
+    rotationChanged: boolean = false;
+    position?: Vector3;
+    quaternion?: THREE.Quaternion;
+
+    reset() {
+        this.positionChanged = false;
+        this.rotationChanged = false;
+        this.mute = false;
+    }
+
+    mute: boolean = false;
+
+    applyValues() {
+        if (this.positionChanged) {
+            this.obj.position.copy(this.position!)
+        }
+        if (this.rotationChanged) {
+            this.obj.quaternion.copy(this.quaternion!)
+        }
+    }
+
+    readonly context: Context;
+    readonly obj: Object3D;
+    private _positionWatch?: Watch;
+    private _rotationWatch?: Watch;
+
+    constructor(obj: Object3D, context: Context) {
+        this.context = context;
+        this.obj = obj;
+    }
+
+    start(position: boolean, rotation: boolean) {
+        this.reset();
+        if (position) {
+            if (!this._positionWatch)
+                this._positionWatch = new Watch(this.obj.position, ["x", "y", "z"]);
+            this._positionWatch.apply();
+            this.position = this.obj.position.clone();
+            this._positionWatch.subscribeWrite((val, prop) => {
+                if (this.context.physics.isUpdating || this.mute) return;
+                // if (this.position![prop] !== val) {
+                this.position![prop] = val;
+                this.positionChanged = true;
+                // }
+            })
+        }
+        if (rotation) {
+            if (!this._rotationWatch)
+                this._rotationWatch = new Watch(this.obj.quaternion, ["_x", "_y", "_z", "_w"]);
+            this._rotationWatch.apply();
+            this.quaternion = this.obj.quaternion.clone();
+            this._rotationWatch.subscribeWrite((val, prop) => {
+                if (this.context.physics.isUpdating || this.mute) return;
+                // if (this.quaternion![prop] !== val) {
+                this.quaternion![prop] = val;
+                this.rotationChanged = true;
+                // }
+            })
+        }
+    }
+
+    stop() {
+        this._positionWatch?.revoke();
+        this._rotationWatch?.revoke();
+    }
+}
+
 
 export class Rigidbody extends Behaviour implements IRigidbody {
 
+    @validate()
     @serializeable()
     mass: number = 1;
 
+    @validate()
     @serializeable()
-    public set isKinematic(kinematic: boolean) {
-        this._isKinematic = kinematic;
-        if (this._body) {
-            this._body.type = kinematic ? CANNON.Body.KINEMATIC : CANNON.Body.DYNAMIC;
-        }
-    }
+    useGravity: boolean = true;
 
-    public get isKinematic(): boolean {
-        return this._isKinematic;
-    }
-    private _isKinematic: boolean = false;
+    @validate()
+    @serializeable()
+    constraints: RigidbodyConstraints = RigidbodyConstraints.None;
+
+    @validate()
+    @serializeable()
+    isKinematic: boolean = false;
 
+    @validate()
     @serializeable()
     drag: number = 0;
+
+    @validate()
     @serializeable()
     angularDrag: number = 1;
+
+    @validate()
     @serializeable()
     detectCollisions: boolean = true;
+
+    @validate()
     @serializeable()
     sleepThreshold: number = 0.01;
 
+    @validate()
+    @serializeable()
+    collisionDetectionMode: CollisionDetectionMode = CollisionDetectionMode.Discrete;
+
+    get lockPositionX() {
+        return (this.constraints & RigidbodyConstraints.FreezePositionX) !== 0;
+    }
+    get lockPositionY() {
+        return (this.constraints & RigidbodyConstraints.FreezePositionY) !== 0;
+    }
+    get lockPositionZ() {
+        return (this.constraints & RigidbodyConstraints.FreezePositionZ) !== 0;
+    }
+    get lockRotationX() {
+        return (this.constraints & RigidbodyConstraints.FreezeRotationX) !== 0;
+    }
+    get lockRotationY() {
+        return (this.constraints & RigidbodyConstraints.FreezeRotationY) !== 0;
+    }
+    get lockRotationZ() {
+        return (this.constraints & RigidbodyConstraints.FreezeRotationZ) !== 0;
+    }
 
-    get body(): CANNON.Body | null {
-        if (this._body === null) {
-            this.initialize();
-        }
-        return this._body;
+    set lockPositionX(v: boolean) {
+        if (v) this.constraints |= RigidbodyConstraints.FreezePositionX;
+        else this.constraints &= ~RigidbodyConstraints.FreezePositionX;
+    }
+    set lockPositionY(v: boolean) {
+        if (v) this.constraints |= RigidbodyConstraints.FreezePositionY;
+        else this.constraints &= ~RigidbodyConstraints.FreezePositionY;
+    }
+    set lockPositionZ(v: boolean) {
+        if (v) this.constraints |= RigidbodyConstraints.FreezePositionZ;
+        else this.constraints &= ~RigidbodyConstraints.FreezePositionZ;
+    }
+    set lockRotationX(v: boolean) {
+        if (v) this.constraints |= RigidbodyConstraints.FreezeRotationX;
+        else this.constraints &= ~RigidbodyConstraints.FreezeRotationX;
+    }
+    set lockRotationY(v: boolean) {
+        if (v) this.constraints |= RigidbodyConstraints.FreezeRotationY;
+        else this.constraints &= ~RigidbodyConstraints.FreezeRotationY;
+    }
+    set lockRotationZ(v: boolean) {
+        if (v) this.constraints |= RigidbodyConstraints.FreezeRotationZ;
+        else this.constraints &= ~RigidbodyConstraints.FreezeRotationZ;
     }
 
+    private _propertiesChanged: boolean = false;
     private static tempPosition: THREE.Vector3 = new THREE.Vector3();
-    private _body: CANNON.Body | null = null;
-    private currentVelocity!: THREE.Vector3;
+    private _currentVelocity!: THREE.Vector3;
     private _smoothedVelocity!: THREE.Vector3;
-    private lastWorldPosition!: THREE.Vector3;
+    private _smoothedVelocityGetter!: THREE.Vector3;
+    private _lastPosition!: THREE.Vector3;
 
-    private _ignoreChange: boolean = false;
-    private _dirty: boolean = false;
-
-    private _positionWatch?: Watch;
-    private _matrixWatch?: Watch;
-    private _setMatrix: THREE.Matrix4;
+    private _watch?: TransformWatch;
 
-    constructor() {
-        super();
-        this._setMatrix = new THREE.Matrix4();
-    }
 
     awake() {
-        this._body = null;
-        this.currentVelocity = new THREE.Vector3();
+        this._watch = undefined;
+        this._currentVelocity = new THREE.Vector3();
         this._smoothedVelocity = new THREE.Vector3();
-        this.lastWorldPosition = getWorldPosition(this.gameObject).clone();
-        this._matrixWatch = undefined;
-        this._positionWatch = undefined;
+        this._smoothedVelocityGetter = new THREE.Vector3();
+        this._lastPosition = new THREE.Vector3();
     }
 
-    // start() {
-    //     this.setBodyFromGameObject();
-    // }
-
     onEnable() {
-        if (this._body) {
-            this.context.physics.addBody(this.gameObject, this._body);
-        }
-        else
-            this.initialize();
-
-        if (this.body) {
-            this.body.wakeUp();
-            this.gameObject.updateWorldMatrix(true, false);
-            this.setBodyFromGameObject();
+        if (!this._watch) {
+            this._watch = new TransformWatch(this.gameObject, this.context);
         }
-
-        if (!this._positionWatch)
-            this._positionWatch = new Watch(this.gameObject.position, ["x", "y", "z"]);
-        this._positionWatch.subscribeWrite(_ => {
-            if (!this.context.physics.isUpdating && !this._ignoreChange) {
-                this._dirty = true;
-                this._setMatrix.copy(this.gameObject.matrix);
-                this._setMatrix.setPosition(this.gameObject.position);
-            }
-        })
+        this._watch.start(true, true);
     }
 
-    onDisable(): void {
-        if (this._body)
-            this.context.physics.removeBody(this.gameObject, this._body, false);
+    onDisable() {
+        this._watch?.stop();
+        this.context.physics.removeBody(this);
     }
 
     onDestroy(): void {
-        if (this._body)
-            this.context.physics.removeBody(this.gameObject, this._body);
+        this.context.physics.removeBody(this);
     }
 
-    onBeforeRender() {
-        this._ignoreChange = true;
-        this.updateVelocity();
+    onValidate() {
+        this._propertiesChanged = true;
+    }
 
-        if (this._dirty) {
-            this._dirty = false;
-            this._setMatrix.decompose(this.gameObject.position, this.gameObject.quaternion, this.gameObject.scale);
-            this.setBodyFromGameObject();
+    earlyUpdate() {
+        if (this._propertiesChanged) {
+            this._propertiesChanged = false;
+            this.context.physics.updateProperties(this);
+        }
+        if (this._watch?.isDirty) {
+            this._watch.mute = true;
+            this._watch.applyValues();
+            this.context.physics.updateBody(this, this._watch.positionChanged, this._watch.rotationChanged);
+            this._watch.reset();
         }
 
-        this._ignoreChange = false;
+        this.captureVelocity();
     }
 
-    initialize() {
-        if (this._body) {
-            return;
-        }
-        const options = new BodyOptions();
-        options.drag = this.drag;
-        options.angularDrag = this.angularDrag;
-        options.mass = this.mass;
-        options.kinematic = this.isKinematic;
-        options.physicsEvents = this.detectCollisions;
-        options.sleepThreshold = this.sleepThreshold;
-        this._body = this.context.physics.createBody(this.gameObject, options);
+    private get body() {
+        return this.context.physics.internal_getRigidbody(this);
+    }
+
+    // TODO: we need to differentiate between setting a physics body to a new position and moving it where we also want to affect the velocity
+    // public teleport(){
+    //     this.context.physics.updateBody(this);
+    // }
+
+    public resetForces() {
+        this.body?.resetForces(true);
     }
 
+    public resetTorques() {
+        this.body?.resetTorques(true);
+    }
+
+    public resetVelocities() {
+        this.setVelocity(0, 0, 0);
+        this.setAngularVelocity(0, 0, 0);
+    }
+
+    public resetForcesAndTorques() {
+        this.resetForces();
+        this.resetTorques();
+    }
 
     public wakeUp() {
         this.body?.wakeUp();
     }
 
-    public applyForce(vec: THREE.Vector3, rel?: THREE.Vector3) {
-        const force = new CANNON.Vec3(vec.x, vec.y, vec.z);
-        force.scale(1 / this.context.time.deltaTime, force);
-        this.body?.applyForce(force, rel ? new CANNON.Vec3(rel.x, rel.y, rel.z) : undefined);
+    public applyForce(vec: Vector3, _rel?: THREE.Vector3) {
+        this.body?.addForce(vec, true);
+    }
+
+    public applyImpulse(vec: Vector3) {
+        this.body?.applyImpulse(vec, true);
     }
 
     public setForce(x: number, y: number, z: number) {
-        this.body?.force.set(x, y, z);
+        this.body?.resetForces(true);
+        this.body?.addForce({ x, y, z }, true);
     }
 
-    public getVelocity(): THREE.Vector3 {
-        if (this.body)
-            return Rigidbody.tempPosition.set(this.body?.velocity.x, this.body?.velocity.y, this.body?.velocity.z);
-        return Rigidbody.tempPosition.set(0, 0, 0);
+    public getVelocity(): Vector3 {
+        const vel = this.body?.linvel();
+        if (!vel) return this._currentVelocity.set(0, 0, 0);
+        this._currentVelocity.x = vel.x;
+        this._currentVelocity.y = vel.y;
+        this._currentVelocity.z = vel.z;
+        return this._currentVelocity;
     }
 
-    public setVelocity(x: number | Vector3, y: number, z: number) {
-        if (!this.body) return;
+    public setVelocity(x: number | Vector3, y?: number, z?: number) {
         if (x instanceof Vector3) {
             const vec = x;
-            x = vec.x;
-            y = vec.y;
-            z = vec.z;
+            this.body?.setLinvel(vec, true);
+            return;
         }
-        this.body.velocity.x = x / this.context.time.deltaTime;
-        this.body.velocity.y = y / this.context.time.deltaTime;
-        this.body.velocity.z = z / this.context.time.deltaTime;
-    }
-
-    public getTorque(): THREE.Vector3 {
-        if (this.body)
-            return Rigidbody.tempPosition.set(this.body?.torque.x, this.body?.torque.y, this.body?.torque.z);
-        return Rigidbody.tempPosition.set(0, 0, 0);
+        if (y === undefined || z === undefined) return;
+        this.body?.setLinvel({ x: x, y: y, z: z }, true);
     }
 
-    public setTorque(x: number | Vector3, y: number, z: number) {
-        if (!this.body) return;
+    public setAngularVelocity(x: number | Vector3, y?: number, z?: number) {
         if (x instanceof Vector3) {
             const vec = x;
-            x = vec.x;
-            y = vec.y;
-            z = vec.z;
+            this.body?.setAngvel(vec, true);
+            return;
         }
-        this.body.torque.x = x / this.context.time.deltaTime;
-        this.body.torque.y = y / this.context.time.deltaTime;
-        this.body.torque.z = z / this.context.time.deltaTime;
-
+        if (y === undefined || z === undefined) return;
+        this.body?.setAngvel({ x: x, y: y, z: z }, true);
     }
 
-    public get smoothedVelocity() { return this._smoothedVelocity; }
-
-    public setAngularVelocity(x: number, y: number, z: number) {
-        if (!this.body) return;
-        this.body.angularVelocity.x = x / this.context.time.deltaTime;
-        this.body.angularVelocity.y = y / this.context.time.deltaTime;
-        this.body.angularVelocity.z = z / this.context.time.deltaTime;
+    public setTorque(x: number | Vector3, y: number, z: number) {
+        this.setAngularVelocity(x, y, z);
     }
 
-    private static copyVector3: THREE.Vector3 = new THREE.Vector3();
-
-
-    public setBodyFromGameObject(velocity: THREE.Vector3 | null | { x: number, y: number, z: number } = null) {
-        if (this.body && this.gameObject && !this.destroyed) {
-            this._ignoreChange = true;
-            const wp = this.worldPosition;
-            this.body.position.set(wp.x, wp.y, wp.z);
-            const wr = this.worldQuaternion;
-            this.body.quaternion.set(wr.x, wr.y, wr.z, wr.w);
+    public get smoothedVelocity(): Vector3 {
+        this._smoothedVelocityGetter.copy(this._smoothedVelocity);
+        return this._smoothedVelocityGetter.multiplyScalar(1 / this.context.time.deltaTime);
+    }
 
-            if (velocity) {
-                Rigidbody.copyVector3.set(velocity.x, velocity.y, velocity.z);
-                this._smoothedVelocity.lerp(Rigidbody.copyVector3, this.context.time.deltaTime / .1);
-                const sm = this._smoothedVelocity;
-                this.body.velocity.x = sm.x;
-                this.body.velocity.y = sm.y;
-                this.body.velocity.z = sm.z;
-            }
-            this._ignoreChange = false;
+    // public get smoothedVelocity() { return this._smoothedVelocity; }
+
+
+
+    /**d
+     * @deprecated not used anymore
+     */
+    public setBodyFromGameObject(_velocity: THREE.Vector3 | null | { x: number, y: number, z: number } = null) {
+        if (this.gameObject && !this.destroyed) {
+            // this.context.physics.updateBody(this);
+            // this._ignoreChange = true;
+            // const wp = this.worldPosition;
+            // this.body.position.set(wp.x, wp.y, wp.z);
+            // const wr = this.worldQuaternion;
+            // this.body.quaternion.set(wr.x, wr.y, wr.z, wr.w);
+
+            // if (velocity) {
+            //     Rigidbody.copyVector3.set(velocity.x, velocity.y, velocity.z);
+            //     this._smoothedVelocity.lerp(Rigidbody.copyVector3, this.context.time.deltaTime / .1);
+            //     const sm = this._smoothedVelocity;
+            //     this.body.velocity.x = sm.x;
+            //     this.body.velocity.y = sm.y;
+            //     this.body.velocity.z = sm.z;
+            // }
+            // this._ignoreChange = false;
         }
     }
 
 
-    private updateVelocity() {
-        if (!this.currentVelocity) return;
-        if (this.body && this.gameObject) {
+
+    private captureVelocity() {
+        if (this.body) {
             const wp = getWorldPosition(this.gameObject);
-            this.currentVelocity.subVectors(wp, this.lastWorldPosition);
-            this.lastWorldPosition.copy(wp);
-            this._smoothedVelocity.lerp(this.currentVelocity, this.context.time.deltaTime / .1);
+            Rigidbody.tempPosition.copy(wp);
+            const vel = wp.sub(this._lastPosition);
+            this._lastPosition.copy(Rigidbody.tempPosition);
+            this._smoothedVelocity.lerp(vel, this.context.time.deltaTime / .1);
+            // this._smoothedVelocity.set(0, 1 / this.context.time.deltaTime, 0);
         }
     }
 }

package/src/engine-components/SpatialTrigger.ts

@@ -95,7 +95,7 @@ export class SpatialTrigger extends Behaviour {
         SpatialTrigger.triggers.push(this);
         if (!this.boxHelper) {
             this.boxHelper = GameObject.addNewComponent(this.gameObject, BoxHelperComponent);
-            this.boxHelper?.showHelper();
+            this.boxHelper?.showHelper(null, debug as boolean);
         }
     }
     onDisable(): void {

package/src/engine-components/SpectatorCamera.ts

@@ -61,6 +61,10 @@ export class SpectatorCamera extends Behaviour {
         this.target = undefined;
     }
 
+    private get localId() : string {
+        return this.context.connection.connectionId ?? "local";
+    }
+
     /** player view to follow */
     set target(target: PlayerView | undefined) {
         if (this._handler) {
@@ -74,7 +78,7 @@ export class SpectatorCamera extends Behaviour {
             // }
 
             const prev = this._handler.currentTarget?.userId;
-            const self = this.context.players.getPlayerView(this.context.connection.connectionId);
+            const self = this.context.players.getPlayerView(this.localId);
 
             // if user is in XR and sets target to self disable it
             if (target === undefined || (this.context.isInXR === false && self?.currentObject === target.currentObject)) {
@@ -103,7 +107,7 @@ export class SpectatorCamera extends Behaviour {
     }
 
     private get isSpectatingSelf() {
-        return this.isSpectating && this.target?.currentObject === this.context.players.getPlayerView(this.context.connection.connectionId)?.currentObject;
+        return this.isSpectating && this.target?.currentObject === this.context.players.getPlayerView(this.localId)?.currentObject;
     }
 
     // private currentViewport : THREE.Vector4 = new THREE.Vector4();
@@ -191,6 +195,10 @@ export class SpectatorCamera extends Behaviour {
 
     private followSelf() {
         this.target = this.context.players.getPlayerView(this.context.connection.connectionId);
+        if (!this.target) {
+            this.context.players.setPlayerView(this.localId, this.context.mainCamera, ViewDevice.Headset);
+            this.target = this.context.players.getPlayerView(this.localId);
+        }
         if (debug) console.log("Follow self", this.target);
     }
 

package/src/engine-components/SpringJoint.ts

@@ -1,45 +1,45 @@
-import { Behaviour, GameObject } from "./Component";
-import { Rigidbody } from "./RigidBody";
-import * as CANNON from 'cannon-es'
-import { Vector3 } from "three";
+// import { Behaviour, GameObject } from "./Component";
+// import { Rigidbody } from "./RigidBody";
+// import * as CANNON from 'cannon-es'
+// import { Vector3 } from "three";
 
-export class SpringJoint extends Behaviour {
-    anchor: Vector3 | null = null;
-    connectedBody: Rigidbody | null = null;
-    connectedAnchor: Vector3 | null = null;
-    spring: number = 10;
-    damper: number = .2;
+// export class SpringJoint extends Behaviour {
+//     anchor: Vector3 | null = null;
+//     connectedBody: Rigidbody | null = null;
+//     connectedAnchor: Vector3 | null = null;
+//     spring: number = 10;
+//     damper: number = .2;
 
-    private rb  : Rigidbody | null = null;
+//     private rb  : Rigidbody | null = null;
 
-    awake(): void {
-        this.rb = GameObject.getComponent(this.gameObject, Rigidbody);
-        if(!this.connectedBody || !this.connectedBody.body || !this.rb || !this.rb.body) return;
-        this.connectedBody.body.mass = Math.min(this.rb.body.mass*.99, this.connectedBody.body.mass);
-        const spring = new CANNON.Spring(this.rb.body, this.connectedBody.body, {
-            // localAnchorA: new CANNON.Vec3(-1, 1, 0),
-            // localAnchorB: new CANNON.Vec3(0, 0, 0),
-            // restLength: -.1,
-            // stiffness: 10,
-            // damping: .2,
-            restLength: 0.01,
-            stiffness: this.spring*.5,
-            damping: this.damper,
-            // localAnchorA: new CANNON.Vec3(this.anchor.x, this.anchor.y, this.anchor.z),
-            // localAnchorB: new CANNON.Vec3(
-            //     this.connectedAnchor.x,
-            //     this.connectedAnchor.y,
-            //     this.connectedAnchor.z
-            // ),
-        });
-        this.context.physics.addPostStepListener(_ => {
-            // const wp = this.connectedBody.worldPosition;
-            // console.log(wp.y, this.connectedBody.body.position.y, this.rb.body.position.y);
-            spring.applyForce();
-        });
-    }
+//     awake(): void {
+//         this.rb = GameObject.getComponent(this.gameObject, Rigidbody);
+//         if(!this.connectedBody || !this.connectedBody.body || !this.rb || !this.rb.body) return;
+//         this.connectedBody.body.mass = Math.min(this.rb.body.mass*.99, this.connectedBody.body.mass);
+//         const spring = new CANNON.Spring(this.rb.body, this.connectedBody.body, {
+//             // localAnchorA: new CANNON.Vec3(-1, 1, 0),
+//             // localAnchorB: new CANNON.Vec3(0, 0, 0),
+//             // restLength: -.1,
+//             // stiffness: 10,
+//             // damping: .2,
+//             restLength: 0.01,
+//             stiffness: this.spring*.5,
+//             damping: this.damper,
+//             // localAnchorA: new CANNON.Vec3(this.anchor.x, this.anchor.y, this.anchor.z),
+//             // localAnchorB: new CANNON.Vec3(
+//             //     this.connectedAnchor.x,
+//             //     this.connectedAnchor.y,
+//             //     this.connectedAnchor.z
+//             // ),
+//         });
+//         this.context.physics.addPostStepListener(_ => {
+//             // const wp = this.connectedBody.worldPosition;
+//             // console.log(wp.y, this.connectedBody.body.position.y, this.rb.body.position.y);
+//             spring.applyForce();
+//         });
+//     }
 
-    update(): void {
-        // console.log(this.worldPosition.y)
-    }
-}
+//     update(): void {
+//         // console.log(this.worldPosition.y)
+//     }
+// }

package/src/engine-components/VideoPlayer.ts

@@ -1,8 +1,7 @@
 import { Behaviour, GameObject } from "./Component";
 import * as THREE from "three";
-import { Material } from "material/Material";
 import { serializeable } from "../engine/engine_serialization_decorator";
-import { LinearFilter, Mesh, Object3D, RawShaderMaterial, ShaderMaterial, Texture, TextureLoader, Vector2, Vector4, VideoTexture } from "three";
+import { LinearFilter, Material, Mesh, Object3D, RawShaderMaterial, ShaderMaterial, Texture, TextureLoader, Vector2, Vector4, VideoTexture } from "three";
 import { awaitInput } from "../engine/engine_input_utils";
 import { getParam } from "../engine/engine_utils";
 import { Renderer } from "./Renderer";

package/src/engine-components/WebXR.ts

@@ -461,6 +461,7 @@ export class WebAR {
     private _webxr: WebXR;
 
     private reticle: Object3D | null = null;
+    private reticleParent: Object3D | null = null;
     private hitTestSource: XRHitTestSource | null = null;
     private reticleActive: boolean = true;
 
@@ -535,9 +536,18 @@ export class WebAR {
             this.reticle.name = "AR Placement reticle";
             this.reticle.matrixAutoUpdate = false;
             this.reticle.visible = false;
+
+            // create AR reticle parent to allow WebXRSessionRoot to be translated, rotated or scaled
+            this.reticleParent = new Object3D();
+            this.reticleParent.name = "AR Reticle Parent";
+            this.reticleParent.matrixAutoUpdate = false;
+            this.reticleParent.add(this.reticle);
+            this.reticleParent.matrix.copy(this.sessionRoot.gameObject.matrixWorld);
+            
             if (this.webxr.scene) {
-                this.webxr.scene.add(this.reticle);
-                this.webxr.scene.visible = true;
+                this.context.scene.add(this.reticleParent);
+                // this.context.scene.add(this.reticle);
+                this.context.scene.visible = true;
             }
             else console.warn("Could not found WebXR Rig");
         }