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

package/src/engine-components/Renderer.ts

@@ -5,11 +5,12 @@ import { RendererLightmap } from "./RendererLightmap";
 import { Context } from "../engine/engine_setup";
 import { getParam } from "../engine/engine_utils";
 import { serializeable } from "../engine/engine_serialization_decorator";
-import { Material, Mesh, Texture, Vector4 } from "three";
+import { AxesHelper, Material, Mesh, Object3D, Texture, Vector4 } from "three";
 import { NEEDLE_render_objects } from "../engine/extensions/NEEDLE_render_objects";
 import { NEEDLE_deferred_texture } from "../engine/extensions/NEEDLE_deferred_texture";
 import { NEED_UPDATE_INSTANCE_KEY } from "../engine/engine_instancing";
-import { IRenderer } from "../engine/engine_types";
+import { IRenderer, ISharedMaterials } from "../engine/engine_types";
+import { debug, ReflectionProbe } from "./ReflectionProbe";
 
 // for staying compatible with old code
 export { InstancingUtil } from "../engine/engine_instancing";
@@ -20,6 +21,15 @@ const debugInstancing = getParam("debuginstancing");
 const debugProgressiveLoading = getParam("debugprogressive");
 const suppressProgressiveLoading = getParam("noprogressive");
 
+
+export enum ReflectionProbeUsage {
+    Off = 0,
+    BlendProbes = 1,
+    BlendProbesAndSkybox = 2,
+    Simple = 3,
+}
+
+
 export class FieldWithDefault {
     public path: string | null = null;
     public asset: object | null = null;
@@ -34,11 +44,14 @@ export enum RenderState {
 
 
 // support sharedMaterials[index] assigning materials directly to the objects
-class SharedMaterialArray {
+class SharedMaterialArray implements ISharedMaterials {
+
+    [num: number]: THREE.Material;
 
     private _renderer: Renderer;
     private _targets: THREE.Object3D[] = [];
 
+
     is(renderer: Renderer) {
         return this._renderer === renderer;
     }
@@ -88,7 +101,7 @@ class SharedMaterialArray {
     private setMaterial(mat: Material, index: number) {
         if (index < 0 || index >= this._targets.length) return;
         const target = this._targets[index];
-        if (!target) return;
+        if (!target || target["material"] === undefined) return;
         target["material"] = mat;
     }
 
@@ -120,6 +133,11 @@ export class Renderer extends Behaviour implements IRenderer {
     @serializeable()
     allowOcclusionWhenDynamic: boolean = true;
 
+    @serializeable(Object3D)
+    probeAnchor?: Object3D;
+    @serializeable()
+    reflectionProbeUsage: ReflectionProbeUsage = ReflectionProbeUsage.Off;
+
     // custom shader
     // get materialProperties(): Array<MaterialProperties> | undefined {
     //     return this._materialProperties;
@@ -200,6 +218,10 @@ export class Renderer extends Behaviour implements IRenderer {
     awake() {
         this.clearInstancingState();
 
+        if(this.probeAnchor && debug) this.probeAnchor.add(new AxesHelper(.2));
+
+        this._reflectionProbe = null;
+
         const type = this.gameObject.type;
         if (type === "Group") {
             for (const child of this.gameObject.children) {
@@ -344,6 +366,8 @@ export class Renderer extends Behaviour implements IRenderer {
             this.gameObject.visible = true;
             this.applyStencil();
         }
+
+        this.updateReflectionProbe();
     }
 
     onDisable() {
@@ -368,60 +392,15 @@ export class Renderer extends Behaviour implements IRenderer {
         NEEDLE_render_objects.applyStencil(this);
     }
 
-    onBeforeRenderThree(_renderer, _scene, _camera, _geometry, material, _group) {
-
-        // progressive load before rendering so we only load textures for visible materials
-        if (!suppressProgressiveLoading && material._didRequestTextureLOD === undefined) {
-            material._didRequestTextureLOD = 0;
-            if (debugProgressiveLoading) {
-                console.log("Load material LOD (with delay)", material.name);
-                setTimeout(() => {
-                    NEEDLE_deferred_texture.assignTextureLOD(this.context, this.sourceId, material);
-                }, 2000);
-            }
-            else {
-                NEEDLE_deferred_texture.assignTextureLOD(this.context, this.sourceId, material);
-            }
-        }
-
-        if (material.envMapIntensity !== undefined) {
-            const factor = this.hasLightmap ? Math.PI : 1;
-            material.envMapIntensity = Math.max(0, this.context.rendererData.environmentIntensity / factor);
-        }
-
-        // if (!camera) {
-        //     let isXRCamera = false;
-        //     if (this.context.isInXR) {
-        //         // @ts-ignore
-        //         const arr = this.context.renderer.xr.getCamera() as ArrayCamera;
-        //         if (arr.cameras?.length > 0) {
-        //             camera = arr;
-        //             isXRCamera = true;
-        //         }
-        //     }
-        // }
-
-        // if (this.customShaderHandler) {
-        //     this.customShaderHandler.onBeforeRender(renderer, scene, camera, geometry, material, group);
-        // }
-        // else if (this.rawShaderHandler) {
-        //     for (const h of this.rawShaderHandler) {
-        //         h.onBeforeRender(this.gameObject, camera);
-        //     }
-        // }
-
-        if (this._lightmaps) {
-            for (const lm of this._lightmaps) {
-                lm.onBeforeRenderThree(material);
-            }
-        }
-    }
+    static envmap: THREE.Texture | null = null;
 
     onBeforeRender() {
         if (!this.gameObject) {
             return;
         }
 
+        Renderer.envmap = this.scene.environment;
+
         const needsUpdate: boolean = this.gameObject[NEED_UPDATE_INSTANCE_KEY] === true || this.gameObject.matrixWorldNeedsUpdate;
 
         if (this.gameObject.type === "Group" && this.gameObject.children?.length > 0) {
@@ -464,6 +443,73 @@ export class Renderer extends Behaviour implements IRenderer {
                 handle.object.layers.disableAll();
             }
         }
+
+        if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off && this._reflectionProbe) {
+            this._reflectionProbe.onSet(this);
+        }
+
+    }
+
+    onBeforeRenderThree(_renderer, _scene, _camera, _geometry, material, _group) {
+
+        // progressive load before rendering so we only load textures for visible materials
+        if (!suppressProgressiveLoading && material._didRequestTextureLOD === undefined) {
+            material._didRequestTextureLOD = 0;
+            if (debugProgressiveLoading) {
+                console.log("Load material LOD (with delay)", material.name);
+                setTimeout(() => {
+                    NEEDLE_deferred_texture.assignTextureLOD(this.context, this.sourceId, material);
+                }, 2000);
+            }
+            else {
+                NEEDLE_deferred_texture.assignTextureLOD(this.context, this.sourceId, material);
+            }
+        }
+
+        if (material.envMapIntensity !== undefined) {
+            const factor = this.hasLightmap ? Math.PI : 1;
+            material.envMapIntensity = Math.max(0, this.context.rendererData.environmentIntensity / factor);
+        }
+        // if (this._reflectionProbe?.texture) {
+        //     material.envMap = this._reflectionProbe.texture;
+        //     // this.context.renderer.prop
+        //     // console.log(material.name);
+        //     // this.context.renderer.properties.get(material);
+        //     // this.context.renderer.properties.update(material, "environment", this._reflectionProbe.texture);
+        // }
+
+        //     _scene.environment = null;
+        // else _scene.environment = Renderer.envmap;
+        // if (!material.envmap)
+        //     material.envMap = Renderer.envmap;
+        // material.needsUpdate = true;
+
+        // if (!camera) {
+        //     let isXRCamera = false;
+        //     if (this.context.isInXR) {
+        //         // @ts-ignore
+        //         const arr = this.context.renderer.xr.getCamera() as ArrayCamera;
+        //         if (arr.cameras?.length > 0) {
+        //             camera = arr;
+        //             isXRCamera = true;
+        //         }
+        //     }
+        // }
+
+        // if (this.customShaderHandler) {
+        //     this.customShaderHandler.onBeforeRender(renderer, scene, camera, geometry, material, group);
+        // }
+        // else if (this.rawShaderHandler) {
+        //     for (const h of this.rawShaderHandler) {
+        //         h.onBeforeRender(this.gameObject, camera);
+        //     }
+        // }
+
+        if (this._lightmaps) {
+            for (const lm of this._lightmaps) {
+                lm.onBeforeRenderThree(material);
+            }
+        }
     }
 
     onAfterRender() {
@@ -473,6 +519,10 @@ export class Renderer extends Behaviour implements IRenderer {
                 handle.object.layers.mask = this.prevLayers[i];
             }
         }
+
+        if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off && this._reflectionProbe) {
+            this._reflectionProbe.onUnset(this)
+        }
     }
 
     private applySettings(go: THREE.Object3D) {
@@ -483,6 +533,18 @@ export class Renderer extends Behaviour implements IRenderer {
         else go.castShadow = false;
     }
 
+    private _reflectionProbe: ReflectionProbe | null = null;
+    private updateReflectionProbe() {
+        // handle reflection probe
+        this._reflectionProbe = null;
+        if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off) {
+            // if(this.gameObject.name.includes("Tank_Case_Jewlery") === false) return;
+            const obj = this.probeAnchor || this.gameObject;
+            const isAnchor = this.probeAnchor ? true : false;
+            this._reflectionProbe = ReflectionProbe.get(obj, this.context, isAnchor);
+        }
+    }
+
 }
 
 export class MeshRenderer extends Renderer {
@@ -637,7 +699,7 @@ class InstancedMeshRenderer {
         this.material = material;
         this.context = context;
         this.maxCount = count;
-        if(debugInstancing){
+        if (debugInstancing) {
             material = new THREE.MeshBasicMaterial({ color: this.randomColor() });
         }
         this.inst = new THREE.InstancedMesh(geo, material, count);
@@ -655,7 +717,7 @@ class InstancedMeshRenderer {
         // }, 500);
     }
 
-    private randomColor(){
+    private randomColor() {
         return new THREE.Color(Math.random(), Math.random(), Math.random());
     }
 

package/src/engine-components/WebARSessionRoot.ts

@@ -1,17 +1,17 @@
 import { Behaviour, GameObject } from "./Component";
-import * as THREE from 'three'
+import { XRSession } from 'three'
 import { Matrix4, Object3D, XRPose } from "three";
 import { WebAR, WebXR } from "./WebXR";
 import { InstancingUtil } from "../engine/engine_instancing";
 import { serializeable } from "../engine/engine_serialization_decorator";
 
-// https://github.com/takahirox/takahirox.github.io/blob/master/three.js.mmdeditor/examples/js/controls/DeviceOrientationControls.js
+// https://github.com/takahirox/takahirox.github.io/blob/master/js.mmdeditor/examples/js/controls/DeviceOrientationControls.js
 
 export class WebARSessionRoot extends Behaviour {
 
     webAR: WebAR | null = null;
 
-    get rig(): THREE.Object3D | undefined {
+    get rig(): Object3D | undefined {
         return this.webAR?.webxr.Rig;
     }
 
@@ -28,7 +28,7 @@ export class WebARSessionRoot extends Behaviour {
         this.setScale(val);
     }
 
-    private readonly _initalMatrix = new THREE.Matrix4();
+    private readonly _initalMatrix = new Matrix4();
     private readonly _selectStartFn = this.onSelectStart.bind(this);
     private readonly _selectEndFn = this.onSelectEnd.bind(this);
 
@@ -41,13 +41,13 @@ export class WebARSessionRoot extends Behaviour {
     }
 
     private _arScale: number = 5;
-    private _rig: THREE.Object3D | null = null;
-    private _startPose: THREE.Matrix4 | null = null;
-    private _placementPose: THREE.Matrix4 | null = null;
+    private _rig: Object3D | null = null;
+    private _startPose: Matrix4 | null = null;
+    private _placementPose: Matrix4 | null = null;
     private _isTouching: boolean = false;
-    private _rigStartPose: THREE.Matrix4 | undefined | null = null;
+    private _rigStartPose: Matrix4 | undefined | null = null;
 
-    onBegin(session: THREE.XRSession) {
+    onBegin(session: XRSession) {
         this._placementPose = null;
         this.gameObject.visible = false;
         this.gameObject.matrixAutoUpdate = false;
@@ -69,12 +69,12 @@ export class WebARSessionRoot extends Behaviour {
         }
     }
 
-    onUpdate(rig: THREE.Object3D | null, _session: THREE.XRSession, pose: XRPose | null | undefined): boolean {
+    onUpdate(rig: Object3D | null, _session: XRSession, pose: XRPose | null | undefined): boolean {
 
         if (pose && !this._placementPose) {
             if (this._isTouching) {
                 if (this.webAR) this.webAR.setReticleActive(false);
-                this.placeAt(rig, new THREE.Matrix4().fromArray(pose.transform.matrix).invert());
+                this.placeAt(rig, new Matrix4().fromArray(pose.transform.matrix).invert());
                 return true;
             }
         }
@@ -90,13 +90,13 @@ export class WebARSessionRoot extends Behaviour {
         // }
     }
 
-    placeAt(rig: THREE.Object3D | null, mat: Matrix4) {
-        if (!this._placementPose) this._placementPose = new THREE.Matrix4();
+    placeAt(rig: Object3D | null, mat: Matrix4) {
+        if (!this._placementPose) this._placementPose = new Matrix4();
         this._placementPose.copy(mat);
         if (rig) {
 
             if (this.invertForward) {
-                const rot = new THREE.Matrix4().makeRotationY(Math.PI);
+                const rot = new Matrix4().makeRotationY(Math.PI);
                 this._placementPose.premultiply(rot);
             }
             this._rig = rig;
@@ -111,7 +111,7 @@ export class WebARSessionRoot extends Behaviour {
         this.gameObject.visible = true;
     }
 
-    onEnd(rig: THREE.Object3D | null, _session: THREE.XRSession) {
+    onEnd(rig: Object3D | null, _session: XRSession) {
         this._placementPose = null;
         this.gameObject.visible = false;
         this.gameObject.matrixAutoUpdate = false;
@@ -151,7 +151,7 @@ export class WebARSessionRoot extends Behaviour {
             this._rigStartPose = rig.matrix.clone();
         }
         rig.matrixAutoUpdate = false;
-        rig.matrix.multiplyMatrices(new THREE.Matrix4().makeScale(scale, scale, scale), this._placementPose);
+        rig.matrix.multiplyMatrices(new Matrix4().makeScale(scale, scale, scale), this._placementPose);
         rig.matrix.decompose(rig.position, rig.quaternion, rig.scale);
         rig.updateMatrixWorld();
         console.log("Place", rig.position);

package/src/engine-components/WebXR.ts

@@ -1,23 +1,21 @@
-import { Behaviour, GameObject } from "./Component";
-
+import { ArrayCamera, Color, Euler, EventDispatcher, Group, Matrix4, Mesh, MeshBasicMaterial, Object3D, Quaternion, RingGeometry, Texture, Vector3, XRFrame, XRHitTestSource, XRRigidTransform, XRSession, XRViewerPose } from 'three';
 import { ARButton } from '../include/three/ARButton.js';
 import { VRButton } from '../include/three/VRButton.js';
 
-import * as THREE from 'three'
-import { ArrayCamera, Matrix4, Vector3, XRHitTestSource } from 'three';
+import { AssetReference } from "../engine/engine_addressables";
+import { serializeable } from "../engine/engine_serialization_decorator";
+import { XRSessionMode } from "../engine/engine_setup";
+import { getWorldPosition, getWorldQuaternion, setWorldPosition, setWorldQuaternion } from "../engine/engine_three_utils";
+import { INeedleEngineComponent } from "../engine/engine_types";
+import { getParam, setOrAddParamsToUrl } from "../engine/engine_utils";
 
-import * as utils from "../engine/engine_utils";
+import { Behaviour, GameObject } from "./Component";
 import { noVoip } from "./Voip";
-import { XRFlag, XRState, XRStateFlag } from "./XRFlag";
-import { ControllerType, WebXRController } from "./WebXRController";
 import { WebARSessionRoot } from "./WebARSessionRoot";
-import { getWorldPosition, getWorldQuaternion, setWorldPosition, setWorldQuaternion } from "../engine/engine_three_utils";
+import { ControllerType, WebXRController } from "./WebXRController";
 import { XRRig } from "./WebXRRig";
-import { AssetReference } from "../engine/engine_addressables";
-import { serializeable } from "../engine/engine_serialization_decorator";
 import { WebXRSync } from "./WebXRSync";
-import { XRSessionMode } from "../engine/engine_setup";
-import { INeedleEngineComponent } from "../engine/engine_types";
+import { XRFlag, XRState, XRStateFlag } from "./XRFlag";
 
 
 export async function detectARSupport() {
@@ -38,7 +36,6 @@ let vrSupported = false;
 detectARSupport().then(res => arSupported = res);
 detectVRSupport().then(res => vrSupported = res);
 
-
 // import TeleportVR from "teleportvr";
 
 export enum WebXREvent {
@@ -54,16 +51,23 @@ export declare type CreateButtonOptions = {
 
 export class WebXR extends Behaviour {
 
+    @serializeable()
     enableVR = true;
+    @serializeable()
     enableAR = true;
+
     @serializeable(AssetReference)
     defaultAvatar?: AssetReference;
+    @serializeable()
+    handModelPath: string = "";
 
+    @serializeable()
     createVRButton: boolean = true;
+    @serializeable()
     createARButton: boolean = true;
 
     private static _isInXr: boolean = false;
-    private static events: THREE.EventDispatcher = new THREE.EventDispatcher();
+    private static events: EventDispatcher = new EventDispatcher();
 
     public static get IsInWebXR(): boolean { return this._isInXr; }
     public static get XRSupported(): boolean { return 'xr' in navigator && (arSupported || vrSupported); }
@@ -121,7 +125,7 @@ export class WebXR extends Behaviour {
         if (session) session.end();
     }
 
-    public get Rig(): THREE.Object3D {
+    public get Rig(): Object3D {
         if(!this.rig) this.ensureRig();
         return this.rig;
     }
@@ -154,7 +158,7 @@ export class WebXR extends Behaviour {
     public get IsInVR() { return this._isInVR; }
     public get IsInAR() { return this._isInAR; }
 
-    private rig!: THREE.Object3D;
+    private rig!: Object3D;
     private isInit: boolean = false;
 
     private _requestedAR: boolean = false;
@@ -221,11 +225,11 @@ export class WebXR extends Behaviour {
         }, 1000);
     }
 
-    private _transformOrientation: THREE.Quaternion = new THREE.Quaternion();
-    public get TransformOrientation(): THREE.Quaternion { return this._transformOrientation; }
+    private _transformOrientation: Quaternion = new Quaternion();
+    public get TransformOrientation(): Quaternion { return this._transformOrientation; }
 
-    private _currentHeadPose: THREE.XRViewerPose | null = null;
-    public get HeadPose(): THREE.XRViewerPose | null { return this._currentHeadPose; }
+    private _currentHeadPose: XRViewerPose | null = null;
+    public get HeadPose(): XRViewerPose | null { return this._currentHeadPose; }
 
     onBeforeRender(frame) {
         if (!frame) return;
@@ -237,7 +241,7 @@ export class WebXR extends Behaviour {
             const pose = frame.getViewerPose(this.context.renderer.xr.getReferenceSpace());
             this._currentHeadPose = pose;
             if (!pose) return; // e.g. if user is not wearing headset
-            const transform: THREE.XRRigidTransform = pose?.transform;
+            const transform: XRRigidTransform = pose?.transform;
 
             if (transform) {
                 this._transformOrientation.set(transform.orientation.x, transform.orientation.y, transform.orientation.z, transform.orientation.w);
@@ -312,7 +316,7 @@ export class WebXR extends Behaviour {
                 // this.rig.quaternion.premultiply(existing.worldQuaternion);
             }
             else {
-                this.rig = new THREE.Group();
+                this.rig = new Group();
                 this.rig.rotateY(Math.PI);
                 this.rig.name = "XRRig";
                 this.context.scene.add(this.rig);
@@ -321,11 +325,11 @@ export class WebXR extends Behaviour {
     }
 
 
-    private _originalCameraParent: THREE.Object3D | null = null;
-    private _originalCameraPosition: THREE.Vector3 = new THREE.Vector3();
-    private _originalCameraRotation: THREE.Quaternion = new THREE.Quaternion();
+    private _originalCameraParent: Object3D | null = null;
+    private _originalCameraPosition: Vector3 = new Vector3();
+    private _originalCameraRotation: Quaternion = new Quaternion();
 
-    private onEnterXR(session: THREE.XRSession, frame: THREE.XRFrame) {
+    private onEnterXR(session: XRSession, frame: XRFrame) {
         console.log("[XR] session begin", session);
         WebXR._isInXr = true;
 
@@ -336,8 +340,8 @@ export class WebXR extends Behaviour {
             const pose = frame.getViewerPose(space);
             const rot = pose?.transform.orientation;
             if (rot) {
-                const quat = new THREE.Quaternion(rot.x, rot.y, rot.z, rot.w);
-                const eu = new THREE.Euler().setFromQuaternion(quat);
+                const quat = new Quaternion(rot.x, rot.y, rot.z, rot.w);
+                const eu = new Euler().setFromQuaternion(quat);
                 this.rig.rotateY(eu.y);
                 // this.rig.quaternion.multiply(quat);
             }
@@ -383,7 +387,7 @@ export class WebXR extends Behaviour {
         WebXR.events.dispatchEvent({ type: WebXREvent.XRStarted, session: session });
     }
 
-    private onExitXR(session: THREE.XRSession | null) {
+    private onExitXR(session: XRSession | null) {
 
         if (this._isInAR && session) {
             this.webAR?.onEnd(session);
@@ -413,7 +417,7 @@ export class WebXR extends Behaviour {
         WebXR.events.dispatchEvent({ type: WebXREvent.XRStopped, session: session });
     }
 
-    private onEnterVR(_session: THREE.XRSession) {
+    private onEnterVR(_session: XRSession) {
     }
 
     private destroyControllers() {
@@ -425,13 +429,13 @@ export class WebXR extends Behaviour {
 
     private xrMirrorWindow: Window | null = null;
 
-    private onEnterXR_HandleMirrorWindow(session: THREE.XRSession) {
-        if (!utils.getParam("mirror")) return;
+    private onEnterXR_HandleMirrorWindow(session: XRSession) {
+        if (!getParam("mirror")) return;
         setTimeout(() => {
             if (!WebXR.IsInWebXR) return;
             const url = new URL(window.location.href);
-            utils.setOrAddParamsToUrl(url.searchParams, noVoip, 1);
-            utils.setOrAddParamsToUrl(url.searchParams, "isMirror", 1);
+            setOrAddParamsToUrl(url.searchParams, noVoip, 1);
+            setOrAddParamsToUrl(url.searchParams, "isMirror", 1);
             const str = url.toString();
             this.xrMirrorWindow = window.open(str, "webxr sync", "popup=yes");
             if (this.xrMirrorWindow) {
@@ -456,20 +460,20 @@ export class WebAR {
 
     private _webxr: WebXR;
 
-    private reticle: THREE.Object3D | null = null;
+    private reticle: Object3D | null = null;
     private hitTestSource: XRHitTestSource | null = null;
     private reticleActive: boolean = true;
 
     // scene.background before entering AR
-    private previousBackground: THREE.Color | null | THREE.Texture = null;
-    private previousEnvironment: THREE.Texture | null = null;
+    private previousBackground: Color | null | Texture = null;
+    private previousEnvironment: Texture | null = null;
 
     private sessionRoot: WebARSessionRoot | null = null;
-    private _previousParent: THREE.Object3D | null = null;
+    private _previousParent: Object3D | null = null;
     // we need this in case the session root is on the same object as the webxr component
     // so if we disable the session root we attach the webxr component to this temporary object
     // to still receive updates
-    private static tempWebXRObject: THREE.Object3D;
+    private static tempWebXRObject: Object3D;
 
     private get context() { return this.webxr.context; }
 
@@ -496,13 +500,14 @@ export class WebAR {
         this.reticleActive = active;
     }
 
-    async onBegin(session: THREE.XRSession) {
+    async onBegin(session: XRSession) {
         const context = this.webxr.context;
         this.reticleActive = true;
         this.didPlaceARSessionRoot = false;
 
         const deviceType = navigator.userAgent?.includes("OculusBrowser") ? ControllerType.PhysicalDevice : ControllerType.Touch;
-        for (let i = 0; i < 4; i++) {
+        const controllerCount = deviceType === ControllerType.Touch ? 4 : 2;
+        for (let i = 0; i < controllerCount; i++) {
             WebXRController.Create(this.webxr, i, this.webxr.gameObject as GameObject, deviceType)
         }
 
@@ -523,9 +528,9 @@ export class WebAR {
         });
 
         if (!this.reticle && this.sessionRoot) {
-            this.reticle = new THREE.Mesh(
-                new THREE.RingGeometry(0.07, 0.09, 32).rotateX(- Math.PI / 2),
-                new THREE.MeshBasicMaterial()
+            this.reticle = new Mesh(
+                new RingGeometry(0.07, 0.09, 32).rotateX(- Math.PI / 2),
+                new MeshBasicMaterial()
             );
             this.reticle.name = "AR Placement reticle";
             this.reticle.matrixAutoUpdate = false;
@@ -538,7 +543,7 @@ export class WebAR {
         }
 
         this._previousParent = this.webxr.gameObject;
-        if (!WebAR.tempWebXRObject) WebAR.tempWebXRObject = new THREE.Object3D();
+        if (!WebAR.tempWebXRObject) WebAR.tempWebXRObject = new Object3D();
         this.context.scene.add(WebAR.tempWebXRObject);
         GameObject.addComponent(WebAR.tempWebXRObject as GameObject, this.webxr);
 
@@ -556,7 +561,7 @@ export class WebAR {
         this.context.mainCameraComponent?.applyClearFlagsIfIsActiveCamera();
     }
 
-    onEnd(session: THREE.XRSession) {
+    onEnd(session: XRSession) {
         if (this._previousParent) {
             console.log("ADD", this._previousParent);
             GameObject.addComponent(this._previousParent as GameObject, this.webxr);
@@ -578,7 +583,7 @@ export class WebAR {
         this.context.mainCameraComponent?.applyClearFlagsIfIsActiveCamera();
     }
 
-    onUpdate(session: THREE.XRSession, frame: THREE.XRFrame) {
+    onUpdate(session: XRSession, frame: XRFrame) {
 
         if (this.noHitTestAvailable === true) {
             if (this.reticle)
@@ -631,4 +636,4 @@ export class WebAR {
     }
 }
 
-const arPlacementWithoutHitTestMatrix = new THREE.Matrix4().identity().makeTranslation(0, -0.5, 0);
+const arPlacementWithoutHitTestMatrix = new Matrix4().identity().makeTranslation(0, -0.5, 0);