lythreeframe 1.0.0

package/lythreeFrame/src/Object/Pawn/Oribital.ts

@@ -0,0 +1,276 @@
+import {Euler, Quaternion, Vector3,Vector2, PerspectiveCamera} from "three";
+import {gsap} from 'gsap';
+
+import {CameraStatus, PawnBase} from "./PawnBase";
+import {LYThreeWorld} from "../../Frame";
+import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
+import {PersepecticeCameraStatus} from "./CameraStatus.ts";
+
+
+export class LYOrbital extends PawnBase
+{
+    protected anim
+    private minAzimuthAngle: number;
+    private maxAzimuthAngle: number;
+    private minPolarAngle: number;
+    private maxPolarAngle: number;
+    override cameraStatus:PersepecticeCameraStatus
+    constructor(world: LYThreeWorld)
+    {
+        let ele    = world.Element;
+        let camera = new PerspectiveCamera(60, ele.clientWidth / ele.clientHeight, 0.5, 7000)
+        super(world, camera, new OrbitControls(camera, world.renderer.domElement));
+
+        this.Camera.updateProjectionMatrix();
+        // this.enabled = false;
+        //this.Control.maxDistance = 300;
+        this.Control.maxPolarAngle = 0.49 * Math.PI;
+        this.minAzimuthAngle       = this.Control.minAzimuthAngle
+        this.maxAzimuthAngle       = this.Control.maxAzimuthAngle
+        this.minPolarAngle         = this.Control.minPolarAngle
+        this.maxPolarAngle         = this.Control.maxPolarAngle
+        this.IsTickable            = true
+
+        this.cameraStatus = new PersepecticeCameraStatus(this.Camera, this.Camera.position)
+    }
+
+    tick(deltaTime:number)
+    {
+        super.tick(deltaTime);
+
+    }
+
+    set enabled(newEnable: boolean)
+    {
+        this.Control.panSpeed    = newEnable ? 1 : 0;
+        this.Control.rotateSpeed = newEnable ? 1 : 0;
+        this.Control.zoomSpeed   = newEnable ? 1 : 0;
+    }
+    
+    possess()
+    {
+        super.possess()
+        this.Control.addEventListener('change', this.changeEvent)
+        this.World.markRenderStateDirty();  
+    }
+
+    unpossess()
+    {
+        super.unpossess()
+        this.Control.removeEventListener("change", this.changeEvent)
+        this.onCameraMove = null
+        if (this.anim)
+        {
+            this.anim.kill();
+        }
+    }
+
+    get Camera()
+    {
+        return this.Control.object
+    }
+
+    setCamera(newCamera)
+    {
+        super.setCamera(newCamera)
+        this.Control.object = newCamera
+        this.Control.update();
+        this.World.markRenderStateDirty();
+    }
+
+    setPosition(param1, param2 = undefined, param3 = undefined)
+    {
+        super.setPosition(param1, param2, param3);
+        this.Control.update();
+        this.World.markRenderStateDirty();
+    }
+
+    setQuaternion(newQuat)
+    {
+        super.setQuaternion(newQuat);
+        this.Control.update()
+        this.World.markRenderStateDirty();
+    }
+
+    // focusTo 
+    // @targetPos  Three.Vector3                   : where your camera face to 
+    // @targetQuat Three.Quaternion or Three.Euler : rotation of your camera
+    // @distance   float                           : how far between targetPos and your camera's position
+    // @time       float                           : how long will this process finish
+    focusTo(targetPos: Vector3, targetQuat: Quaternion | Euler, distance: number, time: number = 0, onGoing: Function | null = null, onFinished: Function | null = null)
+    {
+        let finalQuat = null
+
+        if (targetQuat instanceof Euler)
+        {
+            finalQuat = new Quaternion().setFromEuler(targetQuat)
+        }
+        else
+        {
+            finalQuat = targetQuat
+        }
+        if (!targetQuat)
+        {
+            finalQuat = this.Camera.quaternion
+        }
+        finalQuat.normalize()
+        let dir = new Vector3(0, 0, 1);
+        dir.applyQuaternion(finalQuat).multiplyScalar(-1);
+        dir.normalize()
+        // quat
+        let startQuat = this.Camera.quaternion.clone();
+        // position
+        let startPos  = this.Camera.position.clone();
+        let endPos    = new Vector3(targetPos.x + dir.x * distance * -1, targetPos.y + dir.y * distance * -1, targetPos.z + dir.z * distance * -1);
+
+        let posDir       = new Vector3();
+        posDir.x         = endPos.x - startPos.x;
+        posDir.y         = endPos.y - startPos.y;
+        posDir.z         = endPos.z - startPos.z;
+        let movingLength = posDir.length();
+        posDir.normalize();
+
+        // target
+        let startTarget    = this.Control.target.clone()
+        let targetDir      = new Vector3();
+        targetDir.x        = targetPos.x - startTarget.x;
+        targetDir.y        = targetPos.y - startTarget.y;
+        targetDir.z        = targetPos.z - startTarget.z;
+        let targetDistance = targetDir.length();
+        targetDir.normalize();
+        
+        this.cameraStatus.updateTargetPosition(targetPos)
+
+        // start animation
+        if (this.anim)
+        {
+            this.anim.kill();
+        }
+        if (movingLength + targetDistance < 0.1)
+        {
+            return
+        }
+        //this.enabled = false;
+        let obj   = {alpha: 0}
+        let _this = this
+        this.anim = gsap.to(obj, {
+            duration  : time,
+            alpha     : 1,
+            onUpdate  : () =>
+                {
+                    let alpha     = obj.alpha;
+                    let camPos    = new Vector3(startPos.x + posDir.x * alpha * movingLength, startPos.y + posDir.y * alpha * movingLength, startPos.z + posDir.z * alpha * movingLength)
+                    let targetPos = new Vector3(startTarget.x + targetDir.x * alpha * targetDistance, startTarget.y + targetDir.y * alpha * targetDistance, startTarget.z + targetDir.z * alpha * targetDistance)
+                    _this.Control.object.position.copy(camPos);
+                    _this.Control.target.copy(targetPos);
+
+                    _this.Control.update();
+
+
+                    if (onGoing)
+                    {
+                        onGoing()
+                    }
+                    _this.World.markRenderStateDirty();
+                },
+            onComplete: function ()
+                {
+                    //_this.enabled = true;
+
+                    if (onFinished)
+                    {
+                        onFinished()
+                    }
+                    _this.World.markRenderStateDirty();
+                }
+        });
+    }
+
+    stopFocusing()
+    {
+        if (this.anim)
+        {
+            this.anim.kill();
+            this.anim = null
+        }
+        //this.enabled = true
+    }
+
+    startLockCameraRotation(axis: Vector2)
+    {
+        this.minAzimuthAngle = this.Control.minAzimuthAngle
+        this.maxAzimuthAngle = this.Control.maxAzimuthAngle
+        this.minPolarAngle   = this.Control.minPolarAngle
+        this.maxPolarAngle   = this.Control.maxPolarAngle
+
+        if (axis.x === 1)
+        {
+            const curAngle             = this.Control.getPolarAngle()
+            this.Control.minPolarAngle = curAngle
+            this.Control.maxPolarAngle = curAngle
+        }
+        else
+        {
+            const curAngle               = this.Control.getAzimuthalAngle()
+            this.Control.minAzimuthAngle = curAngle
+            this.Control.maxAzimuthAngle = curAngle
+        }
+    }
+
+    stopLockCameraRotation()
+    {
+        this.Control.minAzimuthAngle = this.minAzimuthAngle
+        this.Control.maxAzimuthAngle = this.maxAzimuthAngle
+        this.Control.minPolarAngle   = this.minPolarAngle
+        this.Control.maxPolarAngle   = this.maxPolarAngle
+    }
+
+    zoomIn()
+    {
+        this.focusTo(this.cameraStatus.targetPosition, this.cameraStatus.cameraQuaternion, this.cameraStatus.targetPosition.clone().sub(this.cameraStatus.cameraPosition).length() * 0.9)
+    }
+
+    zoomOut()
+    {
+        this.focusTo(this.cameraStatus.targetPosition, this.cameraStatus.cameraQuaternion, this.cameraStatus.targetPosition.clone().sub(this.cameraStatus.cameraPosition).length() * 1.1)
+    }
+    
+    restore(status: PersepecticeCameraStatus)
+    {
+        super.restore(status);
+        this.cameraStatus.copy(status)
+
+        this.focusTo(status.targetPosition, status.cameraQuaternion, status.targetPosition.clone().sub(status.cameraPosition).length())
+        this.Camera.near = status.near
+        this.Camera.far = status.far
+        this.Camera.fov = status.fov
+      
+    }
+
+    protected onChangeEvent()
+    {
+        super.onChangeEvent();
+
+        this.World.markRenderStateDirty()
+        this.onChangeOnce = []
+ 
+        this.cameraStatus.update(this.Camera, this.Control.target)
+        let camPos    = this.Control.object.position.clone()
+        let targetPos = this.Control.target.clone()
+    }
+
+    destroy()
+    {
+        if (this.anim)
+        {
+            this.anim.kill();
+            this.anim = null
+        }
+        if (this.Control)
+        {
+            this.Control.removeEventListener("change", this.changeEvent)
+            this.Control.dispose();
+        }
+        super.destroy();
+    }
+}

package/lythreeFrame/src/Object/Pawn/PawnBase.ts

@@ -0,0 +1,189 @@
+import {BaseObject} from "../BaseObject.js";
+import {Quaternion, Vector3, Camera, Euler, Vector2} from "three";
+import {LYThreeWorld} from "../../Frame";
+import {ICameraStatus, CameraStatus} from "./CameraStatus";
+
+
+// Base class for control method, should not be used directly
+export class PawnBase extends BaseObject implements ICameraStatus
+{
+    protected control
+    protected world: LYThreeWorld
+    protected camera: Camera
+    protected cameraStatus:CameraStatus
+    protected onCameraMove:Function|null = null
+
+    protected onChangeOnce:Function[] = []
+    protected onChange:Function[] = []
+
+    protected changeEvent:Function
+
+    constructor(world: LYThreeWorld, camera: Camera, control)
+    {
+        super();
+        this.control = control;
+        this.world   = world
+        this.camera = camera
+        // this.cameraStatus = new CameraStatus(this.Camera.position, this.Camera.quaternion, this.Camera.position, 1)
+        
+        this.onChange     = []
+        this.onChangeOnce = []
+        this.changeEvent = ()=>{
+            this.onChangeEvent()
+        }
+    }
+    
+    get CameraStatus():CameraStatus
+    {
+        return this.cameraStatus
+    }
+    
+    tick(deltaTime)
+    {
+        super.tick(deltaTime)
+    }
+
+    possess()
+    {
+       
+    }
+
+    unpossess()
+    {
+        this.onChange     = []
+        this.onChangeOnce = []
+    }
+
+    set enabled(newEnable:boolean)
+    {
+
+    }
+    
+    startLockCameraRotation(axis: Vector2)
+    {
+        
+    }
+    restore(status: CameraStatus) {}
+
+    stopLockCameraRotation()
+    {
+        
+    }
+    
+    setPosition(param1, param2 = undefined, param3 = undefined)
+    {
+        if (param1 instanceof Vector3)
+        {
+            this.Camera.position.set(param1.x, param1.y, param1.z);
+        }
+        if (typeof (param1) === "number" && typeof (param2) === "number" && typeof (param3) === "number")
+        {
+            this.Camera.position.set(param1, param2, param3);
+        }
+
+        if (this.world)
+        {
+            this.world.markRenderStateDirty();
+        }
+    }
+
+    setQuaternion(newQuat)
+    {
+        if (newQuat instanceof Quaternion)
+        {
+            this.Camera.rotation.setFromQuaternion(newQuat);
+            if (this.world)
+            {
+                this.world.markRenderStateDirty();
+            }
+        }
+    }
+
+    get Camera()
+    {
+        return this.camera
+    }
+
+    setCamera(newCamera)
+    {
+
+    }
+
+    get Control()
+    {
+        return this.control
+    }
+
+    get World()
+    {
+        return this.world;
+    }
+
+    focusTo(targetPos: Vector3, targetQuat: Quaternion | Euler, distance: number, time: number, onGoing: Function | null = null, onFinished: Function | null = null)
+    {
+
+    }
+
+    moveTo(targetPos: Vector3)
+    {
+
+    }
+    
+    stopFocusing()
+    {
+     
+    }
+    destroy()
+    {
+        this.unpossess()
+        if (this.control)
+        {
+            this.control = null;
+        }
+        super.destroy();
+    }
+
+    zoomIn()
+    {
+        
+    }
+    
+    zoomOut()
+    {
+        
+    }
+    
+    protected onChangeEvent()
+    {
+        for (let i = 0; i < this.onChange.length; ++i)
+        {
+            this.onChange[i]();
+        }
+        for (let i = 0; i < this.onChangeOnce.length; ++i)
+        {
+            this.onChangeOnce[i]();
+        }
+        this.onChangeOnce = []
+    }
+
+    addOnChangeEvent(event, bOnce = false)
+    {
+        if (bOnce)
+        {
+            this.onChangeOnce.push(event)
+        }
+        else
+        {
+            this.onChange.push(event)
+        }
+    }
+
+    removeOnChangeEvent(event)
+    {
+        let index = this.onChange.indexOf(event)
+        if (index >= 0)
+        {
+            this.onChange.splice(index, 1);
+        }
+    }
+}

package/lythreeFrame/src/Object/Pawn/TopView.ts

@@ -0,0 +1,205 @@
+import {Euler, Quaternion, Vector3,OrthographicCamera} from "three";
+
+import {PawnBase} from "./PawnBase";
+import {LYThreeWorld} from "../../Frame";
+import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
+import {OrthographicCameraStatus} from "./CameraStatus.ts";
+
+
+export class LYTopView extends PawnBase
+{
+
+    override camera :OrthographicCamera
+    override control:OrbitControls
+    override cameraStatus:OrthographicCameraStatus
+    override get Control(): any
+    {
+        return this.control;
+    }
+
+    constructor(world: LYThreeWorld)
+    {
+        let camera = new OrthographicCamera()
+        camera.near = 0.1
+        camera.far = 2000
+        
+        let control = null
+        if(world.renderer && world.renderer.domElement)
+        {
+            control = new OrbitControls(camera, world.renderer.domElement)
+            control.enableRotate = false
+        }
+    
+        super(world, camera, control);
+        this.camera = camera
+        this.control = control
+        this.control.enableRotate = false
+        this.cameraStatus = new OrthographicCameraStatus(this.Camera, this.Camera.position.clone().add(new Vector3(0,-1000,0)))
+
+
+    }
+
+   override get Camera(): OrthographicCamera
+   {
+       return this.camera
+   }
+
+    tick(deltaTime)
+    {
+        super.tick(deltaTime);
+    }
+    
+    
+    possess()
+    {
+        
+        this.Control.addEventListener('change', this.changeEvent)
+        this.World.markRenderStateDirty();
+    }
+
+    unpossess()
+    {
+        this.onCameraMove = null
+        this.Control.removeEventListener("change", this.changeEvent)
+    }
+
+
+    setCamera(newCamera)
+    {
+        super.setCamera(newCamera)
+        // this.Control.object = newCamera
+        // this.Control.update();
+        this.World.markRenderStateDirty();
+    }
+
+    setPosition(param1, param2 = undefined, param3 = undefined)
+    {
+        // super.setPosition(param1, param2, param3);
+        // this.Control.update();
+        // this.World.markRenderStateDirty();
+    }
+
+    setQuaternion(newQuat)
+    {
+        // super.setQuaternion(newQuat);
+        // this.Control.update()
+        // this.World.markRenderStateDirty();
+    }
+
+    // focusTo
+    // @targetPos 
+    focusTo(targetPos: Vector3, targetQuat: Quaternion | Euler, distance: number, time: number = 0, onGoing: Function | null = null, onFinished: Function | null = null)
+    {
+        // this.Camera.position.set(targetPos.x,targetPos.y + 1000, targetPos.z);
+        let quat1 = new Quaternion().setFromAxisAngle(new Vector3(1, 0, 0), Math.PI * 0.5).normalize();
+
+        this.Camera.quaternion.copy(quat1)
+        this.Control.object.position.set(targetPos.x, targetPos.y + distance, targetPos.z);
+        this.Control.target.copy(targetPos);
+       
+        //1.计算透视相机到场景 scene 的深度距离 depth
+        let depth  = distance;
+        let ele = this.world.OuterElement;
+        //2.得到透视相机的宽高比和垂直可视角度
+        let aspect = ele.clientWidth/ele.clientHeight;
+        let fov    = 60;
+        let top_ortho    = depth * Math.atan((Math.PI / 180) * (fov) / 2);
+        let right_ortho  = top_ortho * aspect;
+        let bottom_ortho = -top_ortho;
+        let left_ortho   = -right_ortho;
+        this.Camera.right = right_ortho
+        this.Camera.left = left_ortho
+        this.Camera.top = top_ortho
+        this.Camera.bottom = bottom_ortho
+        this.Camera.updateProjectionMatrix()
+        this.control.update()
+        if (onFinished)
+        {
+            onFinished();
+        }
+        this.World.markRenderStateDirty();
+        this.cameraStatus.updateTargetPosition(targetPos)
+        this.cameraStatus.updateCameraPosition(this.Camera.position)
+    }
+
+    stopFocusing()
+    {
+
+    }
+
+    zoomIn()
+    {
+        this.Camera.zoom *= 1.1
+        this.cameraStatus.updateCameraZoom(this.Camera.zoom)
+        this.Camera.updateProjectionMatrix()
+        this.World.markRenderStateDirty();
+    }
+
+    zoomOut()
+    {
+        this.Camera.zoom *= 0.9
+        this.cameraStatus.updateCameraZoom(this.Camera.zoom)
+        this.Camera.updateProjectionMatrix()
+        this.World.markRenderStateDirty();
+    }
+    
+    restore(status: OrthographicCameraStatus)
+    {
+        super.restore(status);
+        this.cameraStatus.copy(status)
+        
+        this.Control.object.position.copy(status.cameraPosition.clone());
+        this.Control.target.copy(status.targetPosition);
+
+        let quat1 = new Quaternion().setFromAxisAngle(new Vector3(1, 0, 0), Math.PI * 0.5).normalize();
+        this.Camera.quaternion.copy(quat1)
+
+        //1.计算透视相机到场景 scene 的深度距离 depth
+        let depth  = this.Camera.position.clone().sub(status.targetPosition).length();
+        let ele = this.world.OuterElement;
+        
+        //2.得到透视相机的宽高比和垂直可视角度
+        let aspect = ele.clientWidth/ele.clientHeight;
+        let fov    = 60;
+
+        //3.根据上述变量计算正交投影相机的视口矩形
+        let top_ortho    = depth * Math.atan((Math.PI / 180) * (fov) / 2);
+        let right_ortho  = top_ortho * aspect;
+        let bottom_ortho = -top_ortho;
+        let left_ortho   = -right_ortho;
+
+        this.Camera.right = right_ortho
+        this.Camera.left = left_ortho
+        this.Camera.top = top_ortho
+        this.Camera.bottom = bottom_ortho
+        this.Camera.zoom = status.zoom
+
+        this.Camera.updateProjectionMatrix()
+        this.Control.update()
+      
+        this.World.markRenderStateDirty();
+
+        this.cameraStatus.updateCameraZoom(this.Camera.zoom)
+        this.cameraStatus.updateTargetPosition(status.targetPosition)
+        this.cameraStatus.updateCameraPosition(this.Camera.position)
+    }
+
+    destroy()
+    {
+        if (this.Control)
+        {
+            this.Control.dispose();
+        }
+        super.destroy();
+    }
+
+    protected onChangeEvent()
+    {
+        super.onChangeEvent();
+        // this.cameraStatus.updateCameraQuaternion(this.Camera.quaternion)
+        this.cameraStatus.update(this.Camera, this.Camera.position.clone().add(new Vector3(0,-1000,0)))
+        this.World.markRenderStateDirty()
+        let camPos    = this.Control.object.position.clone()
+        let targetPos = this.Control.target.clone()
+    }
+}