lythreeframe 1.0.0

package/lythreeFrame/src/Frame/Controller.ts

@@ -0,0 +1,261 @@
+import { ThreeJsApp } from "../ThreeJsApp.ts";
+import { Intersection,  OrthographicCamera, PerspectiveCamera, Raycaster, Vector2 } from "three";
+import { World } from "./World.ts";
+import { Viewport } from "./Viewport.ts";
+import { Pawn } from "../Object/PawnV2/Pawn.ts";
+import { Orbital } from "../Object/PawnV2/Oribital.ts";
+import { SceneComponent } from "../Object/Components/SceneComponent.ts";
+import { Delegate } from "../Delegate.ts";
+
+
+export class Controller
+{
+    private prepareClickComponent: SceneComponent|null = null;
+    get camera(): PerspectiveCamera | OrthographicCamera
+    {
+        return this.app.camera;
+    }
+    get world(): World
+    {
+        return this.app.world
+    }
+    get viewPort(): Viewport
+    {
+        return this.app.viewport
+    }
+
+    get pawn(): Pawn
+    {
+        if (!this._pawn)
+        {
+            throw Error("pawn is null")
+        }
+        return this._pawn
+    }
+
+    private app      : ThreeJsApp
+    private _pawn    : Pawn | null = null
+    private raycaster: Raycaster;
+
+    private onPointerMove: ((event: MouseEvent) => void)  = (event: MouseEvent) => { this.onPointerMoveEvent(event) }
+    private onPointerEnter: ((event: MouseEvent) => void) = (event: MouseEvent) => { this.onPointerEnterEvent(event) }
+    private onPointerLeave: ((event: MouseEvent) => void) = (event: MouseEvent) => { this.onPointerLeaveEvent(event) }
+    private onPointerUp: ((event: MouseEvent) => void)    = (event: MouseEvent) => { this.onPointerUpEvent(event) }
+    private onPointerDown: ((event: MouseEvent) => void)  = (event: MouseEvent) => { this.onPointerDownEvent(event) }
+
+    private pointerPosition: Vector2 = new Vector2()
+
+    private readonly doubleClickDelay: number = 250;   // 双击判定时间间隔（毫秒）
+    private leftClickTimer: number | null     = null;
+    private pointerLeftDownPosition: Vector2       = new Vector2();
+
+    private hoveringComponent: SceneComponent | null = null;
+    private _pointButtonIsDown:Set<number> = new Set()
+    get onClickNothingDelegate(): Delegate<[void]>
+    {
+        return this._onClickNothingDelegate
+    }
+    private _onClickNothingDelegate: Delegate<[void]> = new Delegate()
+    constructor(app: ThreeJsApp)
+    {
+        this.app   = app
+        this._pawn = new Orbital(this)
+        this.pawn.possess()
+        this.raycaster = new Raycaster()
+        if (!this.viewPort.canvas)
+        {
+            throw Error("canvas is null")
+        }
+        this.viewPort.canvas.addEventListener("pointermove", this.onPointerMove)
+        this.viewPort.canvas.addEventListener("pointerenter", this.onPointerEnter)
+        this.viewPort.canvas.addEventListener("pointerleave", this.onPointerLeave)
+        this.viewPort.canvas.addEventListener("pointerup", this.onPointerUp)
+        this.viewPort.canvas.addEventListener("pointerdown", this.onPointerDown)
+    }
+
+    init()
+    {
+
+    }
+
+    tick(deltaTime: number)
+    {
+        this.pawn.tick(deltaTime);
+    }
+
+    destroy()
+    {
+        if (this.leftClickTimer)
+        {
+            clearTimeout(this.leftClickTimer);
+            this.leftClickTimer = null;
+        }
+        if (this.viewPort.canvas)
+        {
+            this.viewPort.canvas.removeEventListener("pointermove", this.onPointerMove);
+            this.viewPort.canvas.removeEventListener("pointerenter", this.onPointerEnter);
+            this.viewPort.canvas.removeEventListener("pointerleave", this.onPointerLeave);
+            this.viewPort.canvas.removeEventListener("pointerup", this.onPointerUp)
+            this.viewPort.canvas.removeEventListener("pointerdown", this.onPointerDown)
+        }
+
+        this.pawn.unpossess()
+        this.pawn.destroy()
+        this._pawn = null
+    }
+
+    onPointerMoveEvent(event: MouseEvent)
+    {
+        if (!this.viewPort.canvas)
+        {
+            throw Error("canvas is null")
+        }
+        const canvasRect = this.viewPort.canvas.getBoundingClientRect();
+        const offsetX    = canvasRect.left;
+        const offsetY    = canvasRect.top;
+        const pointer    = new Vector2(((event.clientX - offsetX) / this.viewPort.canvas.clientWidth) * 2 - 1, 1 - ((event.clientY - offsetY) / this.viewPort.canvas.clientHeight) * 2)
+
+        this.pointerPosition = pointer
+
+        if (this._pointButtonIsDown.size > 0)
+        {
+            return
+        }
+
+        const hits = this.getHitResultUnderCursor()
+
+        if (hits)
+        {
+            let component = hits.object.userData["LYObject"]
+            if (component != this.hoveringComponent)
+            {
+                this.hoveringComponent?.onHorveringEnd();
+                this.hoveringComponent = null;
+                if (component instanceof SceneComponent && component.isHoverEnabled)
+                {
+                    component.onHorveringBegin();
+                    this.hoveringComponent = component;
+                }
+            }
+        }
+        else
+        {
+            this.hoveringComponent?.onHorveringEnd();
+            this.hoveringComponent = null;
+        }
+    }
+
+    onPointerUpEvent(event: MouseEvent)
+    {
+        this._pointButtonIsDown.delete(event.button)
+
+        if(event.button === 0)
+        {
+            const pointerOffset = new Vector2().subVectors(this.pointerLeftDownPosition, this.pointerPosition).length()
+            if (pointerOffset > 0.005)
+            {
+                if (this.leftClickTimer)
+                {
+                    window.clearTimeout(this.leftClickTimer);
+                    this.leftClickTimer = null;
+                }
+
+                return;
+            }
+            if(!this.leftClickTimer)
+            {
+                const hit       = this.getHitResultUnderCursor();
+                let   component = hit?hit.object.userData["LYObject"]:null;
+                if(component && component instanceof SceneComponent && component.isClickEnabled)
+                {
+                    this.prepareClickComponent = component
+                    this.leftClickTimer = window.setTimeout(()=>{
+                        this.leftClickTimer = null;
+
+                        if(this.prepareClickComponent)
+                        {
+                            this.prepareClickComponent.onClicked();
+                            this.prepareClickComponent = null;
+                        }
+                    }, this.doubleClickDelay)
+                }
+                else
+                {
+                    this._onClickNothingDelegate.broadcast()
+                }
+            }
+            else
+            {
+                console.log("up 2, ", this.prepareClickComponent)
+
+                window. clearTimeout(this.leftClickTimer);
+                this.leftClickTimer = null;
+                if (this.prepareClickComponent)
+                {
+                    this.prepareClickComponent.onDoubleClicked();
+                }
+                else
+                {
+                    this._onClickNothingDelegate.broadcast()
+                }
+                this.prepareClickComponent = null;
+            }
+        
+        }
+        
+    }
+
+    onPointerDownEvent(event: MouseEvent)
+    {
+        this._pointButtonIsDown.add(event.button)
+        if(event.button === 0)
+        {
+            this.pointerLeftDownPosition = this.pointerPosition.clone();
+
+        }
+
+
+    }
+
+    onPointerEnterEvent(event: MouseEvent)
+    {
+        if (!this.viewPort.canvas)
+        {
+            throw Error("canvas is null")
+        }
+        this.viewPort.canvas.addEventListener("pointermove", this.onPointerMove)
+        this.viewPort.canvas.addEventListener("pointerup", this.onPointerUp)
+        this.viewPort.canvas.addEventListener("pointerdown", this.onPointerDown)
+    }
+
+    onPointerLeaveEvent(event: MouseEvent)
+    {
+        if (!this.viewPort.canvas)
+        {
+            throw Error("canvas is null")
+        }
+        this.viewPort.canvas.removeEventListener("pointermove", this.onPointerMove)
+        this.viewPort.canvas.removeEventListener("pointerup", this.onPointerUp)
+        this.viewPort.canvas.removeEventListener("pointerdown", this.onPointerDown)
+    }
+
+    getHitResultUnderCursor(): Intersection | null
+    {
+        return this.getHitResultFromScreenPoint(this.pointerPosition.x, this.pointerPosition.y)
+    }
+
+    getHitResultFromScreenPoint(x: number, y: number): Intersection | null
+    {
+        this.raycaster.setFromCamera(new Vector2(x, y), this.camera);
+        let out = this.raycaster.intersectObjects(this.world.scene.children, true)
+        for (let i = 0; i < out.length; i++)
+        {
+            if (out[i].object.userData["rayIgnored"])
+            {
+                continue
+            }
+            return out[i]
+        }
+        return null
+    }
+}