@needle-tools/engine 2.24.0-pre

package/src/engine-components/SpatialTrigger.ts

@@ -0,0 +1,142 @@
+import { BoxHelper, Layers } from "three";
+import { Behaviour, GameObject } from "./Component";
+import { BoxHelperComponent } from "./BoxHelperComponent"
+import { EventList } from "./EventList";
+import { serializeable } from "../engine/engine_serialization_decorator";
+import { getParam } from "../engine/engine_utils";
+
+const debug = getParam("debugspatialtrigger");
+
+const layer1 = new Layers();
+const layer2 = new Layers();
+function testMask(mask1, mask2) {
+    layer1.mask = mask1;
+    layer2.mask = mask2;
+    return layer1.test(layer2);
+}
+
+export class SpatialTriggerReceiver extends Behaviour {
+
+    // currently Layers in unity but maybe this should be a string or plane number? Or should it be a bitmask to allow receivers use multiple triggers?
+    @serializeable()
+    triggerMask: number = 0;
+    @serializeable(EventList)
+    onEnter?: EventList;
+    @serializeable(EventList)
+    onStay?: EventList;
+    @serializeable(EventList)
+    onExit?: EventList;
+
+    start() {
+        if (debug) console.log(this.name, this.triggerMask, this);
+    }
+
+    update(): void {
+        this.currentIntersected.length = 0;
+        for (const trigger of SpatialTrigger.triggers) {
+            if (testMask(trigger.triggerMask, this.triggerMask)) {
+                if (trigger.test(this.gameObject)) {
+                    this.currentIntersected.push(trigger);
+                }
+            }
+        }
+        for (let i = this.lastIntersected.length - 1; i >= 0; i--) {
+            const last = this.lastIntersected[i]
+            if (this.currentIntersected.indexOf(last) < 0) {
+                this.onExitTrigger(last);
+                this.lastIntersected.splice(i, 1);
+            }
+        }
+        for (const cur of this.currentIntersected) {
+            if (this.lastIntersected.indexOf(cur) < 0)
+                this.onEnterTrigger(cur);
+            this.onStayTrigger(cur);
+        }
+        this.lastIntersected.length = 0;
+        this.lastIntersected.push(...this.currentIntersected);
+
+    }
+
+    currentIntersected: SpatialTrigger[] = [];
+    lastIntersected: SpatialTrigger[] = [];
+
+    onEnterTrigger(trigger: SpatialTrigger): void {
+        if(debug) console.log("ENTER TRIGGER", this.name, trigger.name, this, trigger);
+        trigger.raiseOnEnterEvent(this);
+        this.onEnter?.invoke(this, trigger);
+    }
+    onExitTrigger(trigger: SpatialTrigger): void {
+        if(debug) console.log("EXIT TRIGGER", this.name, trigger.name, this, trigger);
+        trigger.raiseOnExitEvent(this);
+        this.onExit?.invoke(this, trigger);
+    }
+
+    onStayTrigger(trigger: SpatialTrigger): void {
+        trigger.raiseOnStayEvent(this);
+        this.onStay?.invoke(this, trigger);
+    }
+}
+
+export class SpatialTrigger extends Behaviour {
+
+    static triggers: SpatialTrigger[] = [];
+
+    @serializeable()
+    triggerMask?: number;
+
+    private boxHelper?: BoxHelperComponent;
+
+    start() {
+        if (debug)
+            console.log(this.name, this.triggerMask, this);
+    }
+
+    onEnable(): void {
+        SpatialTrigger.triggers.push(this);
+        if (!this.boxHelper) {
+            this.boxHelper = GameObject.addNewComponent(this.gameObject, BoxHelperComponent);
+            this.boxHelper?.showHelper();
+        }
+    }
+    onDisable(): void {
+        SpatialTrigger.triggers.splice(SpatialTrigger.triggers.indexOf(this), 1);
+    }
+
+    test(obj: THREE.Object3D): boolean {
+        if (!this.boxHelper) return false;
+        return this.boxHelper.isInBox(obj) ?? false;
+    }
+
+    // private args: SpatialTriggerEventArgs = new SpatialTriggerEventArgs();
+
+    raiseOnEnterEvent(rec: SpatialTriggerReceiver) {
+        // this.args.trigger = this;
+        // this.args.source = rec;
+        GameObject.foreachComponent(this.gameObject, c => {
+            if (c === rec) return;
+            if(c instanceof SpatialTriggerReceiver) {
+                c.onEnterTrigger(this);
+            }
+        }, false);
+    }
+
+    raiseOnStayEvent(rec: SpatialTriggerReceiver) {
+        // this.args.trigger = this;
+        // this.args.source = rec;
+        GameObject.foreachComponent(this.gameObject, c => {
+            if (c === rec) return;
+            if(c instanceof SpatialTriggerReceiver) {
+                c.onStayTrigger(this);
+            }
+        }, false);
+    }
+
+    raiseOnExitEvent(rec: SpatialTriggerReceiver) {
+        GameObject.foreachComponent(this.gameObject, c => {
+            if (c === rec) return;
+            if(c instanceof SpatialTriggerReceiver) {
+                c.onExitTrigger(this);
+            }
+        }, false);
+    }
+}

package/src/engine-components/SpectatorCamera.ts

@@ -0,0 +1,350 @@
+import { Behaviour, GameObject } from "./Component";
+import { Camera } from "./Camera";
+import * as THREE from "three";
+import { OrbitControls } from "./OrbitControls";
+import { WebXR, WebXREvent } from "./WebXR";
+import { AvatarMarker } from "./WebXRAvatar";
+import { XRFlag, XRStateFlag } from "./XRFlag";
+import { SmoothFollow } from "./SmoothFollow";
+import { setWorldPosition, setWorldQuaternion, getWorldPosition, getWorldQuaternion } from "../engine/engine_three_utils";
+
+export class SpectatorCamera extends Behaviour {
+
+    cam: Camera | null = null;
+
+    private _firstPersonMode: boolean | undefined = false;
+    get firstPersonMode(): boolean {
+        return true;
+        return this._firstPersonMode ?? false;
+    }
+    set firstPersonMode(_val: boolean) {
+        // this._firstPersonMode = val;
+        // if (this._firstPersonMode) this.enableFirstPersonMode();
+        // else this.enableThirdPersonMode();
+    }
+
+    enableFirstPersonMode() {
+        this._firstPersonMode = true;
+        this.updateUI();
+        if (this.cam) {
+            if (this.firstPersonFollow) {
+                this.firstPersonFollow.enabled = true;
+                this.firstPersonFollow.updateNow(true);
+            }
+            if (this.orbit) {
+                this.orbit.enabled = false;
+            }
+        }
+    }
+
+    enableThirdPersonMode() {
+        this._firstPersonMode = false;
+        this.updateUI();
+        if (this.firstPersonFollow) {
+            this.firstPersonFollow.enabled = false;
+        }
+        if (!this.cam) return;
+        setWorldPosition(this.cam.cam, this._orbitStartPos);
+        setWorldQuaternion(this.cam.cam, this._orbitStartRot);
+        setWorldPosition(this.cam.gameObject, this._orbitStartPos2);
+        setWorldQuaternion(this.cam.gameObject, this._orbitStartRot2);
+
+        if (this.orbit) {
+            this.orbit.enabled = true;
+            this.orbit.setFromTargetPosition();
+        }
+    }
+
+    // private currentViewport : THREE.Vector4 = new THREE.Vector4();
+    // private currentScissor : THREE.Vector4 = new THREE.Vector4();
+    // private currentScissorTest : boolean = false;
+
+    private orbit: OrbitControls | null = null;
+    private firstPersonFollow: SmoothFollow | null = null;
+    private spectatorUIDomElement: HTMLElement | null = null;
+    private _avatar: AvatarMarker | null = null;
+
+    private eventSub_WebXRRequestStartEvent: Function | null = null;
+    private eventSub_WebXRStartEvent: Function | null = null;
+    private eventSub_WebXREndEvent: Function | null = null;
+
+    awake(): void {
+
+        GameObject.setActive(this.gameObject, false);
+
+        const uiQuery = "#spectator-camera-ui";
+        this.spectatorUIDomElement = this.context.domElement.querySelector(uiQuery);
+        if (!this.spectatorUIDomElement) {
+            console.warn("Could not find spectator camera UI element", uiQuery);
+        }
+        this.spectatorUIDomElement?.classList.add("hidden");
+
+
+        if (!this.isSupportedPlatform()) {
+            console.log("Disable spectator cam", window.navigator.userAgent, this);
+            return;
+        }
+
+        this.cam = GameObject.getComponent(this.gameObject, Camera);
+        if (!this.cam) {
+            // TODO: adding camera component does currently not work properly
+            console.error("Spectator camera needs camera component", this);
+            return;
+            // this.cam = GameObject.addNewComponent(this.gameObject, Camera) as Camera;
+        }
+
+        if (this.cam) {
+            this.cam.enabled = true;
+            this._orbitStartPos.copy(getWorldPosition(this.cam.cam));
+            this._orbitStartRot.copy(getWorldQuaternion(this.cam.cam));
+            this._orbitStartPos2.copy(getWorldPosition(this.cam.gameObject));
+            this._orbitStartRot2.copy(getWorldQuaternion(this.cam.gameObject));
+        }
+
+        this.eventSub_WebXRRequestStartEvent = this.onXRSessionRequestStart.bind(this);
+        this.eventSub_WebXRStartEvent = this.onXRSessionStart.bind(this);
+        this.eventSub_WebXREndEvent = this.onXRSessionEnded.bind(this);
+
+        WebXR.addEventListener(WebXREvent.RequestVRSession, this.eventSub_WebXRRequestStartEvent);
+        WebXR.addEventListener(WebXREvent.XRStarted, this.eventSub_WebXRStartEvent);
+        WebXR.addEventListener(WebXREvent.XRStopped, this.eventSub_WebXREndEvent);
+
+        this.context.domElement.querySelector("button#toggle-spectator-view")?.addEventListener("click", this.toggleView.bind(this));
+        this.updateUI();
+    }
+
+    onDestroy(): void {
+        WebXR.removeEventListener(WebXREvent.RequestVRSession, this.eventSub_WebXRStartEvent);
+        WebXR.removeEventListener(WebXREvent.XRStarted, this.eventSub_WebXRStartEvent);
+        WebXR.removeEventListener(WebXREvent.XRStopped, this.eventSub_WebXREndEvent);
+    }
+
+    private toggleView() {
+        this.firstPersonMode = !this.firstPersonMode;
+    }
+
+    private updateUI() {
+        const el: any = this.context.domElement.querySelector("button#toggle-spectator-view");
+        if (!el) return;
+        el.disabled = true;// !this._sessionHasStarted;
+        if (el.firstChild) {
+            if (!this._sessionHasStarted) {
+                el.firstChild.textContent = "Waiting for VR session";
+            }
+            else
+                el.firstChild.textContent = this.firstPersonMode ? "👁️" : "📷";
+        }
+
+        if (el.children?.length > 1) {
+            const tooltipElement = el.children[1];
+            tooltipElement.style.display = !this._sessionHasStarted ? "none" : "block";
+            if (this.firstPersonMode) {
+                tooltipElement.textContent = "First-Person View. See what the person in VR sees";
+            }
+            else {
+                tooltipElement.textContent = "Third-Person View. Freely move the camera around"
+            }
+        }
+    }
+
+    private isSupportedPlatform() {
+        const ua = window.navigator.userAgent;
+        const standalone = /Windows|MacOS/.test(ua);
+        const isHololens = /Windows NT/.test(ua) && /Edg/.test(ua) && !/Win64/.test(ua);
+        return standalone && !isHololens;
+    }
+
+    private onXRSessionRequestStart(_evt) {
+        this._sessionHasStarted = false;
+        this.spectatorUIDomElement?.classList.remove("hidden");
+
+        GameObject.setActive(this.gameObject, true);
+
+        // if (!this.orbit && this.cam) {
+        //     const lookAt = GameObject.addNewComponent(this.gameObject, LookAtConstraint);
+        //     lookAt.constraintActive = true;
+        //     const center = new THREE.Object3D();
+        //     this.context.scene.add(center);
+        //     lookAt.sources = [center];
+        //     this.orbit = GameObject.addNewComponent(this.cam?.gameObject, OrbitControls);
+        //     this.orbit.lookAtConstraint = lookAt;
+        //     this.orbit.debugLog = true;
+        //     this.orbit.enabled = !this.firstPersonMode;
+        // }
+
+        if (this.cam && this.cam.cam) {
+            setWorldPosition(this.cam.cam, this._orbitStartPos);
+            setWorldQuaternion(this.cam.cam, this._orbitStartRot);
+            setWorldPosition(this.cam.gameObject, this._orbitStartPos2);
+            setWorldQuaternion(this.cam.gameObject, this._orbitStartRot2);
+        }
+
+        if (this.firstPersonMode) {
+            this.enableFirstPersonMode();
+        }
+        else this.enableThirdPersonMode();
+    }
+
+
+    private onXRSessionStart(_evt) {
+        this._sessionHasStarted = true;
+        this.updateUI();
+    }
+
+    private onXRSessionEnded(_evt) {
+        this._sessionHasStarted = false;
+        this.spectatorUIDomElement?.classList.add("hidden");
+        GameObject.setActive(this.gameObject, false);
+    }
+
+    private _sessionHasStarted: boolean = false;
+    private _isFirstStart = true;
+    private _firstPersonIsSetup: boolean = false;
+    private _orbitStartPos: THREE.Vector3 = new THREE.Vector3();
+    private _orbitStartRot: THREE.Quaternion = new THREE.Quaternion();
+    private _orbitStartPos2: THREE.Vector3 = new THREE.Vector3();
+    private _orbitStartRot2: THREE.Quaternion = new THREE.Quaternion();
+
+
+    // TODO: only show Spectator cam for DesktopVR;
+    // don't show for AR, don't show on Quest
+    // TODO: properly align cameras on enter/exit VR, seems currently spectator cam breaks alignment
+    onAfterRender(): void {
+        if (!this.cam) return;
+
+        // if (this.context.time.frameCount % 120 === 0) {
+        //     this.firstPersonMode = !this.firstPersonMode;
+        // }
+
+        if (this.firstPersonMode) {
+            if (!this._firstPersonIsSetup) {
+                if (!this._avatar || this._avatar?.destroyed) {
+                    for (const av of AvatarMarker.instances) {
+                        if (av.avatar && "isLocalAvatar" in av.avatar && av.avatar?.isLocalAvatar) {
+                            this._avatar = av;
+                            const head = av.avatar.head;
+                            if (!head) continue;
+                            this.setupFollowMode(head);
+                        }
+                    }
+                }
+                // else {
+                //     if (this.context.mainCamera) {
+                //         this.setupFollowMode(this.context.mainCamera, true);
+                //     }
+                // }
+            }
+        }
+
+
+        const renderer = this.context.renderer;
+        const xrWasEnabled = renderer.xr.enabled;
+        // these should not be needed if we don't override viewport/scissor
+        // renderer.getViewport(this.currentViewport);
+        // renderer.getScissor(this.currentScissor);
+        // this.currentScissorTest = renderer.getScissorTest();
+
+        if (!renderer.xr.isPresenting) return;
+
+        // remember XR render target so we can restore later
+        const previousRenderTarget = renderer.getRenderTarget();
+        let oldFramebuffer: WebGLFramebuffer | null = null;
+
+        // seems that in some cases, renderer.getRenderTarget returns null
+        // even when we're rendering to a headset.
+        if (!previousRenderTarget) {
+            if (!renderer.state.bindFramebuffer || !renderer.state.bindXRFramebuffer)
+                return;
+
+            oldFramebuffer = renderer["_framebuffer"];
+            renderer.state.bindXRFramebuffer(null);
+        }
+
+        this.setAvatarFlagsBeforeRender();
+
+        // for scissor rendering (e.g. just a part of the screen / viewport, multiplayer split view)
+        // let left = 0;
+        // let bottom = 100;
+        // let width = 300;
+        // let height = 300;
+        // renderer.setViewport(left, bottom, width, height);
+        // renderer.setScissor(left, bottom, width, height);
+        // renderer.setScissorTest(true);
+        renderer.setClearColor(new THREE.Color(1, 1, 1));
+        renderer.setRenderTarget(null); // null: direct to Canvas
+        renderer.xr.enabled = false;
+        const cam = this.cam?.cam;
+        this.context.updateAspect(cam as THREE.PerspectiveCamera);
+        const wasPresenting = renderer.xr.isPresenting;
+        renderer.xr.isPresenting = false;
+        renderer.setSize(this.context.domWidth, this.context.domHeight);
+        renderer.render(this.context.scene, cam);
+        renderer.xr.isPresenting = wasPresenting;
+
+        // restore previous settings so we can continue to render XR
+        renderer.xr.enabled = xrWasEnabled;
+        //renderer.setViewport(this.currentViewport);
+        //renderer.setScissor(this.currentScissor);
+        //renderer.setScissorTest(this.currentScissorTest);
+
+        if (previousRenderTarget)
+            renderer.setRenderTarget(previousRenderTarget);
+        else
+            renderer.state.bindXRFramebuffer(oldFramebuffer);
+
+        this.resetAvatarFlags();
+    }
+
+    private setupFollowMode(object: THREE.Object3D, flipForward: boolean = true) {
+        if (!object) return;
+        if (!this.cam) return;
+        if (this._firstPersonIsSetup) return;
+        this._firstPersonIsSetup = true;
+
+        const target = object.add(new THREE.Object3D());
+        target.add(new THREE.AxesHelper());
+        this.firstPersonFollow = GameObject.addNewComponent(this.cam.gameObject, SmoothFollow);
+        this.firstPersonFollow.target = target;
+        this.firstPersonFollow.followFactor = 12;
+        this.firstPersonFollow.rotateFactor = 5;
+        // TODO: figure out why this needs flipping when we use the spectator cam without an Avatar
+        if (flipForward) this.firstPersonFollow.flipForward = true;
+        const perspectiveCamera = this.context.mainCamera as THREE.PerspectiveCamera;
+        if (perspectiveCamera) {
+            this.cam.cam.near = perspectiveCamera.near;
+            this.cam.cam.far = perspectiveCamera.far;
+            this.cam.cam.updateProjectionMatrix();
+        }
+        if (this.orbit) this.orbit.enabled = false;
+    }
+
+    private setAvatarFlagsBeforeRender() {
+        for (const av of AvatarMarker.instances) {
+            if (av.avatar && "isLocalAvatar" in av.avatar) {
+                const mask = this.firstPersonMode && this._firstPersonIsSetup && av.avatar.isLocalAvatar ? XRStateFlag.FirstPerson : XRStateFlag.ThirdPerson;
+                const flags = av.avatar.flags;
+                if (!flags) continue;
+                for (const flag of flags) {
+                    flag.UpdateVisible(mask);
+                }
+            }
+        }
+    }
+
+    private resetAvatarFlags() {
+        for (const av of AvatarMarker.instances) {
+            if (av.avatar && "flags" in av.avatar) {
+                const flags = av.avatar.flags;
+                if (!flags) continue;
+                for (const flag of flags) {
+                    if (av.avatar?.isLocalAvatar) {
+                        flag.UpdateVisible(XRStateFlag.FirstPerson);
+                    }
+                    else {
+                        flag.UpdateVisible(XRStateFlag.ThirdPerson);
+                    }
+                }
+            }
+        }
+    }
+}

package/src/engine-components/SphereCollider.ts

@@ -0,0 +1,2 @@
+import { SphereCollider } from "./Collider";
+export default SphereCollider;

package/src/engine-components/SpringJoint.ts

@@ -0,0 +1,45 @@
+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;
+
+    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();
+        });
+    }
+
+    update(): void {
+        // console.log(this.worldPosition.y)
+    }
+}

package/src/engine-components/SpriteRenderer.ts

@@ -0,0 +1,143 @@
+import { Behaviour } from "./Component";
+import * as THREE from "three";
+import { serializeable } from "../engine/engine_serialization_decorator";
+import { Color, Material, Texture } from "three";
+import { RGBAColor } from "./js-extensions/RGBAColor";
+
+
+/// <summary>
+///   <para>SpriteRenderer draw mode.</para>
+/// </summary>
+export enum SpriteDrawMode {
+    /// <summary>
+    ///   <para>Displays the full sprite.</para>
+    /// </summary>
+    Simple = 0,
+    /// <summary>
+    ///   <para>The SpriteRenderer will render the sprite as a 9-slice image where the corners will remain constant and the other sections will scale.</para>
+    /// </summary>
+    Sliced = 1,
+    /// <summary>
+    ///   <para>The SpriteRenderer will render the sprite as a 9-slice image where the corners will remain constant and the other sections will tile.</para>
+    /// </summary>
+    Tiled = 2,
+}
+
+class Vec2 {
+    x!: number;
+    y!: number;
+}
+
+export class Sprite {
+
+    @serializeable(Texture)
+    texture?: THREE.Texture;
+
+    triangles!: Array<number>;
+    uv!: Array<Vec2>;
+    vertices!: Array<Vec2>;
+
+    _geometry?: THREE.BufferGeometry;
+}
+
+class SpriteUtils {
+
+    static getOrCreateGeometry(sprite: Sprite): THREE.BufferGeometry {
+        if (sprite._geometry) return sprite._geometry;
+        const geo = new THREE.BufferGeometry();
+        sprite._geometry = geo;
+        const vertices = new Float32Array(sprite.triangles.length * 3);
+        const uvs = new Float32Array(sprite.triangles.length * 2);
+        for (let i = 0; i < sprite.triangles.length; i += 1) {
+            const index = sprite.triangles[i];
+
+            vertices[i * 3] = -sprite.vertices[index].x;
+            vertices[i * 3 + 1] = sprite.vertices[index].y;
+
+            vertices[i * 3 + 2] = 0;
+            const uv = sprite.uv[index];
+            uvs[i * 2] = uv.x;
+            uvs[i * 2 + 1] = 1 - uv.y;
+        }
+        // console.log(vertices);
+        geo.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
+        geo.setAttribute("uv", new THREE.BufferAttribute(uvs, 2));
+        return geo;
+    }
+}
+
+export class SpriteRenderer extends Behaviour {
+
+    @serializeable()
+    drawMode: SpriteDrawMode = SpriteDrawMode.Simple;
+
+    size: Vec2 = { x: 1, y: 1 };
+
+    @serializeable(RGBAColor)
+    color?: RGBAColor;
+
+    @serializeable(Material)
+    sharedMaterial?: THREE.Material;
+
+    get sprite(): Sprite | undefined {
+        return this._sprite;
+    }
+    set sprite(value: Sprite | undefined) {
+        if(value === this._sprite) return;
+        this._sprite = value;
+        this.updateSprite();
+    }
+
+    private _sprite?: Sprite;
+    private _currentSprite?: THREE.Mesh;
+
+    awake(): void {
+        this._currentSprite = undefined;
+    }
+
+    start() {
+        if (this.drawMode === SpriteDrawMode.Tiled) {
+            console.warn("Tiled draw mode is not supported yet", this);
+        }
+        if (!this._currentSprite)
+            this.updateSprite();
+        else if (this.gameObject)
+            this.gameObject.add(this._currentSprite);
+    }
+
+    private updateSprite() {
+        if (!this.__didAwake) return;
+        if (!this.sprite) return;
+        if (!this.sharedMaterial) return;
+
+        if (!this._currentSprite) {
+            const mat = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide });
+            if (!mat) return;
+            if (this.color) {
+                if (!mat["color"]) mat["color"] = new THREE.Color();
+                mat["color"].copy(this.color);
+                mat["opacity"] = this.color.alpha;
+            }
+            mat.alphaTest = 0.5;
+
+            if (this.sprite.texture && !mat.wireframe) {
+                const t = this.sprite.texture;
+                // t.wrapS = THREE.RepeatWrapping;
+                mat["map"] = t;
+            }
+
+            this._currentSprite = new THREE.Mesh(SpriteUtils.getOrCreateGeometry(this.sprite), mat);
+        }
+        else {
+            this._currentSprite.geometry = SpriteUtils.getOrCreateGeometry(this.sprite);
+            this._currentSprite.material["map"] = this.sprite.texture;
+        }
+
+        if (this._currentSprite.parent !== this.gameObject) {
+            if (this.drawMode === SpriteDrawMode.Tiled)
+                this._currentSprite.scale.set(this.size.x, this.size.y, 1);
+            if (this.gameObject)
+                this.gameObject.add(this._currentSprite);
+        }
+    }
+}