three-base 2.0.1 → 2.0.2

package/FPScontrol.js

@@ -0,0 +1,170 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-05-04 23:01:36
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2022-06-06 13:32:08
+ */
+import { Clock, EventDispatcher, Vector3 } from "three";
+import { Capsule } from "three/examples/jsm/math/Capsule";
+import { Octree } from "three/examples/jsm/math/Octree";
+import { clamp, degToRad } from "three/src/math/MathUtils";
+/**
+ * 第一人称控制器
+ *
+ * @export
+ * @class FPScontrol
+ * @extends {EventDispatcher}
+ */
+export default class FPScontrol extends EventDispatcher {
+    canvas;
+    constructor(camera, canvas) {
+        super();
+        // 相机对象
+        this.camera = camera;
+        this.camera.rotation.order = 'YXZ';
+        this.canvas = canvas;
+        this.init(canvas);
+    }
+    // 是否启用
+    enable = false;
+    GRAVITY = 30; // 重力
+    STEPS_PER_FRAME = 5; // 速度
+    camera;
+    // 世界八叉树对象
+    worldOctree = new Octree();
+    // 用户自己的碰撞体积
+    playerCollider = new Capsule(new Vector3(0, 0.35, 0), new Vector3(0, 1, 0), 0.35);
+    // 时钟对象
+    clock = new Clock();
+    playerVelocity = new Vector3();
+    playerDirection = new Vector3();
+    playerOnFloor = false;
+    mouseTime = 0;
+    isMousedown = false;
+    keyStates = {};
+    init(canvas) {
+        this.playerCollider.end.set(0, 1, 0);
+        document.addEventListener('keydown', this.keydown);
+        document.addEventListener('keyup', this.keyup);
+        canvas.addEventListener('pointerdown', this.mousedown);
+        document.addEventListener('pointerup', this.mouseup);
+        document.body.addEventListener('pointermove', this.mousemove);
+        this.enable = true;
+    }
+    keydown = (event) => {
+        this.keyStates[event.code] = true;
+    };
+    keyup = (event) => {
+        this.keyStates[event.code] = false;
+    };
+    mousedown = () => {
+        this.isMousedown = true;
+        this.mouseTime = performance.now();
+    };
+    mouseup = () => {
+        this.isMousedown = false;
+    };
+    mousemove = (event) => {
+        if (this.enable && this.isMousedown) {
+            this.camera.rotation.y -= event.movementX / 500;
+            this.camera.rotation.x -= event.movementY / 500;
+        }
+    };
+    // 设置 八叉树 节点
+    fromGraphNode(object3d) {
+        this.worldOctree.fromGraphNode(object3d);
+    }
+    // 获取前进的向量
+    getForwardVector = () => {
+        this.camera.getWorldDirection(this.playerDirection);
+        this.playerDirection.y = 0;
+        this.playerDirection.normalize();
+        return this.playerDirection;
+    };
+    // 获取 后退的向量
+    getSideVector = () => {
+        this.camera.getWorldDirection(this.playerDirection);
+        this.playerDirection.y = 0;
+        this.playerDirection.normalize();
+        this.playerDirection.cross(this.camera.up);
+        return this.playerDirection;
+    };
+    // 玩家移动控制器
+    controls = (deltaTime) => {
+        const speedDelta = deltaTime * (this.playerOnFloor ? 25 : 8);
+        if (this.keyStates['KeyW']) {
+            this.playerVelocity.add(this.getForwardVector().multiplyScalar(speedDelta));
+        }
+        if (this.keyStates['KeyS']) {
+            this.playerVelocity.add(this.getForwardVector().multiplyScalar(-speedDelta));
+        }
+        if (this.keyStates['KeyA']) {
+            this.playerVelocity.add(this.getSideVector().multiplyScalar(-speedDelta));
+        }
+        if (this.keyStates['KeyD']) {
+            this.playerVelocity.add(this.getSideVector().multiplyScalar(speedDelta));
+        }
+        if (this.playerOnFloor) {
+            if (this.keyStates['Space']) {
+                this.playerVelocity.y = 15;
+            }
+        }
+    };
+    // 更新玩家的位置
+    updatePlayer = (deltaTime) => {
+        let damping = Math.exp(-4 * deltaTime) - 1;
+        if (!this.playerOnFloor) {
+            this.playerVelocity.y -= this.GRAVITY * deltaTime;
+            damping *= 0.1;
+        }
+        this.playerVelocity.addScaledVector(this.playerVelocity, damping);
+        const deltaPosition = this.playerVelocity.clone().multiplyScalar(deltaTime);
+        this.playerCollider.translate(deltaPosition);
+        this.playerCollisions();
+        this.camera.position.copy(this.playerCollider.end);
+        this.camera.position.y += 1;
+        this.camera.rotation.x = clamp(this.camera.rotation.x, degToRad(-20), degToRad(20));
+    };
+    // 玩家的碰撞检测
+    playerCollisions() {
+        const result = this.worldOctree.capsuleIntersect(this.playerCollider);
+        this.playerOnFloor = false;
+        if (result) {
+            this.playerOnFloor = result.normal.y > 0;
+            if (!this.playerOnFloor) {
+                this.playerVelocity.addScaledVector(result.normal, -result.normal.dot(this.playerVelocity));
+            }
+            this.playerCollider.translate(result.normal.multiplyScalar(result.depth));
+        }
+    }
+    // 更新控制器的位置
+    teleportPlayerIfOob = () => {
+        if (this.camera.position.y <= -10) {
+            this.playerCollider.start.set(0, 0.35, 0);
+            this.playerCollider.end.set(0, 1, 10);
+            this.playerCollider.radius = 0.35;
+            this.camera.position.copy(this.playerCollider.end);
+            // this.camera.position.set(0, 3, 0);
+        }
+    };
+    // 更新
+    update() {
+        if (this.enable) {
+            const deltaTime = Math.min(0.05, this.clock.getDelta()) / this.STEPS_PER_FRAME;
+            for (let i = 0; i < this.STEPS_PER_FRAME; i++) {
+                this.controls(deltaTime);
+                this.updatePlayer(deltaTime);
+                this.teleportPlayerIfOob();
+            }
+        }
+    }
+    // 销毁事件
+    disposer() {
+        this.enable = false;
+        document.removeEventListener('keydown', this.keydown);
+        document.removeEventListener('keyup', this.keyup);
+        this.canvas.removeEventListener('pointerdown', this.mousedown);
+        document.removeEventListener('pointerup', this.mouseup);
+        document.body.removeEventListener('pointermove', this.mousemove);
+    }
+}

package/FPScontrol.ts

@@ -0,0 +1,209 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2022-05-04 23:01:36 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2022-06-06 13:32:08
+ */
+
+import { Camera, Clock, EventDispatcher, Object3D, Vector3 } from "three";
+import { Capsule } from "three/examples/jsm/math/Capsule";
+import { Octree } from "three/examples/jsm/math/Octree";
+import { clamp, degToRad } from "three/src/math/MathUtils";
+
+
+/**
+ * 第一人称控制器
+ *
+ * @export
+ * @class FPScontrol
+ * @extends {EventDispatcher}
+ */
+export default class FPScontrol extends EventDispatcher {
+
+    canvas!: HTMLCanvasElement
+
+    constructor(camera: Camera, canvas: HTMLCanvasElement) {
+        super();
+
+        // 相机对象
+        this.camera = camera;
+
+        this.camera.rotation.order = 'YXZ';
+
+        this.canvas = canvas;
+
+        this.init(canvas);
+    }
+
+    // 是否启用
+    enable = false;
+
+    GRAVITY = 30; // 重力
+    STEPS_PER_FRAME = 5; // 速度
+
+    camera!: Camera;
+
+    // 世界八叉树对象
+    worldOctree = new Octree();
+
+    // 用户自己的碰撞体积
+    playerCollider = new Capsule(new Vector3(0, 0.35, 0), new Vector3(0, 1, 0), 0.35);
+
+    // 时钟对象
+    clock = new Clock();
+
+    playerVelocity = new Vector3();
+    playerDirection = new Vector3();
+
+    playerOnFloor = false;
+    mouseTime = 0;
+    isMousedown = false;
+    keyStates: { [key: string]: boolean } = {};
+
+
+    init(canvas: HTMLCanvasElement) {
+        this.playerCollider.end.set(0, 1, 0);
+        document.addEventListener('keydown', this.keydown);
+        document.addEventListener('keyup', this.keyup);
+        canvas.addEventListener('pointerdown', this.mousedown);
+        document.addEventListener('pointerup', this.mouseup);
+        document.body.addEventListener('pointermove', this.mousemove);
+        this.enable = true;
+    }
+
+
+    keydown = (event: KeyboardEvent) => {
+        this.keyStates[event.code] = true;
+    }
+
+    keyup = (event: KeyboardEvent) => {
+        this.keyStates[event.code] = false;
+    }
+
+    mousedown = () => {
+        this.isMousedown = true;
+        this.mouseTime = performance.now();
+    }
+
+    mouseup = () => {
+        this.isMousedown = false;
+    }
+
+    mousemove = (event: MouseEvent) => {
+        if (this.enable && this.isMousedown) {
+            this.camera.rotation.y -= event.movementX / 500;
+            this.camera.rotation.x -= event.movementY / 500;
+
+        }
+    }
+
+    // 设置 八叉树 节点
+    fromGraphNode(object3d: Object3D) {
+        this.worldOctree.fromGraphNode(object3d);
+    }
+
+    // 获取前进的向量
+    getForwardVector = () => {
+        this.camera.getWorldDirection(this.playerDirection);
+        this.playerDirection.y = 0;
+        this.playerDirection.normalize();
+        return this.playerDirection;
+    }
+
+    // 获取 后退的向量
+    getSideVector = () => {
+        this.camera.getWorldDirection(this.playerDirection);
+        this.playerDirection.y = 0;
+        this.playerDirection.normalize();
+        this.playerDirection.cross(this.camera.up);
+        return this.playerDirection;
+    }
+
+    // 玩家移动控制器
+    controls = (deltaTime: number) => {
+        const speedDelta = deltaTime * (this.playerOnFloor ? 25 : 8);
+        if (this.keyStates['KeyW']) {
+            this.playerVelocity.add(this.getForwardVector().multiplyScalar(speedDelta));
+        }
+        if (this.keyStates['KeyS']) {
+            this.playerVelocity.add(this.getForwardVector().multiplyScalar(-speedDelta));
+        }
+        if (this.keyStates['KeyA']) {
+            this.playerVelocity.add(this.getSideVector().multiplyScalar(-speedDelta));
+        }
+        if (this.keyStates['KeyD']) {
+            this.playerVelocity.add(this.getSideVector().multiplyScalar(speedDelta));
+        }
+
+        if (this.playerOnFloor) {
+            if (this.keyStates['Space']) {
+                this.playerVelocity.y = 15;
+            }
+        }
+
+    }
+
+    // 更新玩家的位置
+    updatePlayer = (deltaTime: number) => {
+        let damping = Math.exp(-4 * deltaTime) - 1;
+        if (!this.playerOnFloor) {
+            this.playerVelocity.y -= this.GRAVITY * deltaTime;
+            damping *= 0.1;
+        }
+        this.playerVelocity.addScaledVector(this.playerVelocity, damping);
+        const deltaPosition = this.playerVelocity.clone().multiplyScalar(deltaTime);
+        this.playerCollider.translate(deltaPosition);
+        this.playerCollisions();
+        this.camera.position.copy(this.playerCollider.end);
+        this.camera.position.y += 1;
+        this.camera.rotation.x = clamp(this.camera.rotation.x, degToRad(-20), degToRad(20));
+    }
+
+    // 玩家的碰撞检测
+    playerCollisions() {
+        const result = this.worldOctree.capsuleIntersect(this.playerCollider);
+        this.playerOnFloor = false;
+        if (result) {
+            this.playerOnFloor = result.normal.y > 0;
+            if (!this.playerOnFloor) {
+                this.playerVelocity.addScaledVector(result.normal, -result.normal.dot(this.playerVelocity));
+
+            }
+            this.playerCollider.translate(result.normal.multiplyScalar(result.depth));
+        }
+    }
+    // 更新控制器的位置
+    teleportPlayerIfOob = () => {
+        if (this.camera.position.y <= -10) {
+            this.playerCollider.start.set(0, 0.35, 0);
+            this.playerCollider.end.set(0, 1, 10);
+            this.playerCollider.radius = 0.35;
+            this.camera.position.copy(this.playerCollider.end);
+            // this.camera.position.set(0, 3, 0);
+        }
+    }
+
+    // 更新
+    update() {
+        if (this.enable) {
+            const deltaTime = Math.min(0.05, this.clock.getDelta()) / this.STEPS_PER_FRAME;
+            for (let i = 0; i < this.STEPS_PER_FRAME; i++) {
+                this.controls(deltaTime);
+                this.updatePlayer(deltaTime);
+                this.teleportPlayerIfOob();
+            }
+        }
+    }
+
+    // 销毁事件
+    disposer() {
+        this.enable = false;
+        document.removeEventListener('keydown', this.keydown);
+        document.removeEventListener('keyup', this.keyup);
+        this.canvas.removeEventListener('pointerdown', this.mousedown);
+        document.removeEventListener('pointerup', this.mouseup);
+        document.body.removeEventListener('pointermove', this.mousemove);
+    }
+
+
+}

package/InstancedGroupMesh.d.ts

@@ -0,0 +1,10 @@
+import * as THREE from 'three';
+export default class InstancedGroupMesh extends THREE.Mesh {
+    isInstancedGroupMesh: boolean;
+    count: number;
+    meshCollect: Record<string, THREE.Mesh[]>;
+    instanceCollect: Record<string, THREE.InstancedMesh>;
+    static matrix: THREE.Matrix4;
+    constructor(group: THREE.Group, count: number);
+    setMatrixAt(index: number, matrix: THREE.Matrix4): void;
+}

package/InstancedGroupMesh.js

@@ -0,0 +1,63 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-02-21 09:55:52
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-02-26 14:42:21
+ */
+import * as THREE from 'three';
+// 模型组转成 实例对象
+export default class InstancedGroupMesh extends THREE.Mesh {
+    isInstancedGroupMesh = true;
+    count = 0;
+    meshCollect = {};
+    instanceCollect = {};
+    static matrix = new THREE.Matrix4();
+    constructor(group, count) {
+        super();
+        this.count = count;
+        const { meshCollect, instanceCollect } = this;
+        group.updateMatrixWorld(true);
+        // collect all mesh counts, in case there are more than one copy of the same mesh in this group
+        group.traverse((obj) => {
+            const mesh = obj;
+            if (mesh.isMesh) {
+                mesh.matrixWorld.decompose(mesh.position, mesh.quaternion, mesh.scale);
+                mesh.rotation.setFromQuaternion(mesh.quaternion);
+                mesh.updateMatrix();
+                // same geometry and same material consider as the same mesh
+                const uuid = mesh.geometry.uuid + '/' + mesh.material.uuid;
+                if (meshCollect[uuid]) {
+                    meshCollect[uuid].push(mesh);
+                }
+                else {
+                    meshCollect[uuid] = [mesh];
+                }
+            }
+            else {
+                obj.position.set(0, 0, 0);
+                obj.scale.set(1, 1, 1);
+                obj.rotation.set(0, 0, 0);
+            }
+        });
+        // create all instances
+        Object.keys(meshCollect).forEach(uuid => {
+            const meshes = meshCollect[uuid];
+            const mesh = meshes[0];
+            const instancedMesh = new THREE.InstancedMesh(mesh.geometry, mesh.material, meshes.length * count);
+            instanceCollect[uuid] = instancedMesh;
+            this.add(instancedMesh);
+        });
+    }
+    setMatrixAt(index, matrix) {
+        Object.keys(this.meshCollect).forEach(uuid => {
+            const instancedMesh = this.instanceCollect[uuid];
+            const collect = this.meshCollect[uuid];
+            collect.forEach((mesh, i) => {
+                InstancedGroupMesh.matrix.copy(mesh.matrix);
+                InstancedGroupMesh.matrix.premultiply(matrix);
+                instancedMesh.setMatrixAt(collect.length * index + i, InstancedGroupMesh.matrix);
+                instancedMesh.instanceMatrix.needsUpdate = true;
+            });
+        });
+    }
+}

package/InstancedGroupMesh.ts

@@ -0,0 +1,80 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2023-02-21 09:55:52 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-02-26 14:42:21
+ */
+
+import * as THREE from 'three'
+
+// 模型组转成 实例对象
+export default class InstancedGroupMesh extends THREE.Mesh {
+    isInstancedGroupMesh = true
+
+    count: number = 0
+
+    meshCollect: Record<string, THREE.Mesh[]> = {}
+
+    instanceCollect: Record<string, THREE.InstancedMesh> = {}
+
+    static matrix = new THREE.Matrix4()
+
+    constructor(group: THREE.Group, count: number) {
+        super()
+
+        this.count = count
+
+        const { meshCollect, instanceCollect } = this
+
+        group.updateMatrixWorld(true);
+
+        // collect all mesh counts, in case there are more than one copy of the same mesh in this group
+        group.traverse((obj) => {
+            const mesh = obj as THREE.Mesh
+            if (mesh.isMesh) {
+
+                mesh.matrixWorld.decompose(mesh.position, mesh.quaternion, mesh.scale);
+                mesh.rotation.setFromQuaternion(mesh.quaternion);
+                mesh.updateMatrix();
+
+                // same geometry and same material consider as the same mesh
+                const uuid = mesh.geometry.uuid + '/' + (mesh.material as THREE.Material).uuid
+
+                if (meshCollect[uuid]) {
+                    meshCollect[uuid].push(mesh)
+                } else {
+                    meshCollect[uuid] = [mesh]
+                }
+            } else {
+                obj.position.set(0, 0, 0);
+                obj.scale.set(1, 1, 1);
+                obj.rotation.set(0, 0, 0);
+            }
+
+        })
+
+        // create all instances
+        Object.keys(meshCollect).forEach(uuid => {
+            const meshes = meshCollect[uuid]
+            const mesh = meshes[0]
+
+            const instancedMesh = new THREE.InstancedMesh(mesh.geometry, mesh.material, meshes.length * count)
+            instanceCollect[uuid] = instancedMesh
+            this.add(instancedMesh)
+        })
+    }
+
+    setMatrixAt(index: number, matrix: THREE.Matrix4) {
+        Object.keys(this.meshCollect).forEach(uuid => {
+            const instancedMesh = this.instanceCollect[uuid]
+            const collect = this.meshCollect[uuid]
+            collect.forEach((mesh: THREE.Mesh, i: number) => {
+                InstancedGroupMesh.matrix.copy(mesh.matrix)
+                InstancedGroupMesh.matrix.premultiply(matrix)
+
+                instancedMesh.setMatrixAt(collect.length * index + i, InstancedGroupMesh.matrix);
+                instancedMesh.instanceMatrix.needsUpdate = true;
+            })
+        })
+    }
+}

package/KeyFrameAnimation.d.ts

@@ -0,0 +1,25 @@
+import { Euler, Line, LineBasicMaterial, Object3D, Vector3 } from "three";
+export type Keyframe = {
+    position: Vector3;
+    scale: Vector3;
+    rotation: Euler;
+    timeTemp: number;
+};
+export type KeyframeAnimationProps = {
+    speedScale?: number;
+    object3d: Object3D;
+    keyframes: Array<Keyframe>;
+};
+export default class KeyframeAnimation extends Object3D {
+    constructor(props: KeyframeAnimationProps);
+    speedScale: number;
+    object3d: Object3D;
+    halperLine: Line<any, LineBasicMaterial>;
+    keyframes: Array<Keyframe>;
+    setObject3D(object3d: Object3D): void;
+    getKeyframe(i: number): Keyframe;
+    setKeyframe(i: number, keyframe: Keyframe): void;
+    setKeyframes(keyframes: Array<Keyframe>): void;
+    update(): void;
+    updateMatrix(): void;
+}

package/KeyFrameAnimation.js

@@ -0,0 +1,78 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-02-16 00:22:31
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-02-16 19:08:55
+ */
+import { last } from "lodash";
+import { BufferAttribute, Line, LineBasicMaterial, Object3D } from "three";
+import threeUtils from "./threeUtils";
+// 关键帧动画对象
+export default class KeyframeAnimation extends Object3D {
+    constructor(props) {
+        super();
+        // 速度调整
+        this.speedScale = props.speedScale || 1;
+        // 设置关键帧对象数组
+        this.setKeyframes(props.keyframes);
+        // 设置对象
+        this.setObject3D(props.object3d);
+    }
+    // 速度调整
+    speedScale = 1;
+    // 需要需要移动的对象
+    object3d;
+    //路径辅助线
+    halperLine = new Line(undefined, new LineBasicMaterial({ color: "#f00" }));
+    // 关键帧数组
+    keyframes = [];
+    // 设置需要移动的对象
+    setObject3D(object3d) {
+        this.object3d = object3d;
+        if (threeUtils.isDev) {
+            this.children = [object3d, this.halperLine];
+        }
+        else {
+            this.children = [object3d];
+        }
+    }
+    // 获取单个关键帧
+    getKeyframe(i) {
+        return this.keyframes[i];
+    }
+    // 设置单个关键帧
+    setKeyframe(i, keyframe) {
+        this.keyframes[i] = keyframe;
+        this.setKeyframes(this.keyframes);
+    }
+    //设置全部关键帧
+    setKeyframes(keyframes) {
+        this.keyframes = keyframes;
+        const position = [];
+        keyframes.map(k => {
+            position.push(k.position.x);
+            position.push(k.position.y);
+            position.push(k.position.z);
+        });
+        this.halperLine.geometry.setAttribute("position", new BufferAttribute(new Float32Array(position), 3, false));
+    }
+    // 更具关键帧的信息更新 对象的位置
+    update() {
+        const { _timeTemp } = threeUtils;
+        const maxtimetemp = last(this.keyframes).timeTemp;
+        const currentTime = _timeTemp % maxtimetemp;
+        const currentKeyframeIndex = this.keyframes.findIndex(k => currentTime < k.timeTemp);
+        const startKeyframe = this.keyframes[currentKeyframeIndex - 1];
+        const endKeyframe = this.keyframes[currentKeyframeIndex];
+        const progress = (currentTime - startKeyframe.timeTemp) / (endKeyframe.timeTemp - startKeyframe.timeTemp);
+        this.object3d.position.copy(endKeyframe.position).sub(startKeyframe.position).multiplyScalar(progress).add(startKeyframe.position);
+        this.object3d.scale.copy(endKeyframe.scale).sub(startKeyframe.scale).multiplyScalar(progress).add(startKeyframe.scale);
+        this.object3d.rotation.set((endKeyframe.rotation.x - startKeyframe.rotation.x) * progress + startKeyframe.rotation.x, (endKeyframe.rotation.y - startKeyframe.rotation.y) * progress + startKeyframe.rotation.y, (endKeyframe.rotation.z - startKeyframe.rotation.z) * progress + startKeyframe.rotation.z);
+        this.dispatchEvent({ type: "update" });
+    }
+    //更新关键帧的实例矩阵
+    updateMatrix() {
+        this.update();
+        super.updateMatrix();
+    }
+}