three-base 2.0.87 → 2.0.89

package/InstancedMeshBase.ts

@@ -1,316 +0,0 @@
-/*
- * @Author: xiaosihan 
- * @Date: 2024-02-05 09:31:57 
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2024-06-07 22:14:53
- */
-
-import { throttle } from "lodash";
-import { BufferAttribute, Color, Euler, InstancedBufferAttribute, InstancedMesh, Material, Matrix4, Mesh, Object3D, Quaternion, Vector3 } from "three";
-import MeshBase from "./MeshBase";
-import threeUtils from "./threeUtils";
-import threeLoader from "./threeLoader";
-
-// 实例模型组对象
-export default class InstancedMeshBase extends MeshBase {
-    constructor(url?: string) {
-        super(url);
-    }
-
-    isInstancedGroupMesh = true
-
-    count: number = 0;
-
-    size = new Vector3(1, 1, 1);
-
-    meshCollect: Record<string, Mesh[]> = {}
-
-    instanceCollect: Record<string, InstancedMesh> = {}
-
-    colorMap = new Map<String, Color>();
-
-    declare children: InstancedMesh[];
-
-    static _position: Vector3 = new Vector3();
-    static _scale: Vector3 = new Vector3(1, 1, 1);
-    static _rotation: Euler = new Euler();
-    static _Quaternion: Quaternion = new Quaternion();
-    static _matrix = new Matrix4()
-
-    instanceMatrix = new InstancedBufferAttribute(new Float32Array(0 * 16), 16);
-
-    instanceColor = new InstancedBufferAttribute(new Float32Array(0 * 3), 3);
-
-    // 重构加载模型的方法
-    async loadModel(url: string, filename: string = "") {
-        this.url = url;
-
-        if (!url) {
-            this.clear();
-            return;
-        }
-
-        this.loaded = false;
-
-        // 没有模型并且没有加载任务时就去加载模型
-        if (!MeshBase.models.get(url) && !MeshBase.loadModeling.get(url)) {
-            MeshBase.loadModeling.set(url, true);
-
-            // 万能加载器
-            let modal = await threeLoader.loadModel(url, filename);
-
-            MeshBase.models.set(url, modal);
-            MeshBase.loadModeling.set(url, false);
-        }
-
-        // 如果模型还在加载中, 就等待模型加载完成
-        do {
-            await new Promise(resolve => setTimeout(resolve, 50));
-        } while (MeshBase.loadModeling.get(url));
-
-        if (MeshBase.models.get(url)) {
-
-            this.clear();
-            const mesh = MeshBase.models.get(url)!;
-            // // 判断是否有动画
-            // this.hasAnimation = mesh.animations.length > 0;
-
-            // if (this.hasAnimation) {
-            //     const model = SkeletonUtils.clone(mesh);
-            //     this.mixer = new AnimationMixer(model);
-
-            //     this.animationActions = {};
-            //     mesh.animations.map(animation => {
-            //         const animationAction = this.mixer!.clipAction(animation).play();
-            //         animationAction.weight = 0;
-            //         this.animationActions[animation.name] = animationAction;
-            //     });
-
-            //     this.add(model);
-            // } else {
-            //     this.add(mesh.clone(true));
-            // }
-
-            this.size.copy(threeUtils.getSize(mesh));
-
-            const { meshCollect, instanceCollect } = this
-
-            mesh.updateMatrixWorld(true);
-
-            // collect all mesh counts, in case there are more than one copy of the same mesh in this group
-            mesh.traverse((obj) => {
-                const mesh = obj as 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 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 InstancedMesh(mesh.geometry, mesh.material, meshes.length * this.count)
-                instancedMesh.name = mesh.name;
-                instancedMesh.frustumCulled = false;
-                instanceCollect[uuid] = instancedMesh
-                this.add(instancedMesh)
-            })
-
-            // 加载完成事件
-            await new Promise(resolve => setTimeout(resolve, 30));
-            // 加载完成事件
-            this.loaded = true;
-            this.dispatchEvent({ type: "loaded" } as never);
-        }
-
-    }
-
-    // 更新包围盒
-    computeBoundingSphere = throttle(() => {
-        this.children.map(instancedMesh => {
-            instancedMesh.computeBoundingSphere();
-        });
-    }, 1000)
-
-    //初始实例矩阵的数量
-    async setCount(count: number = 0) {
-        if (this.count === count) {
-            return;
-        }
-        await this.awaitLoaded();
-
-        const instanceMatrix = new InstancedBufferAttribute(new Float32Array(count * 16), 16);
-        const instanceColor = new InstancedBufferAttribute(new Float32Array(count * 3).fill(1), 3);
-
-        for (let i = 0; i < count; i++) {
-            instanceMatrix.set(InstancedMeshBase._matrix.identity().toArray(), i * 16);
-            instanceColor.set([1, 1, 1], i * 3);
-        }
-
-        for (let i = 0; i < this.count; i++) {
-            instanceMatrix.copyAt(i, this.instanceMatrix, i);
-            instanceColor.copyAt(i, this.instanceColor, i);
-        }
-
-        this.instanceMatrix = instanceMatrix;
-        this.instanceColor = instanceColor;
-
-        this.count = count;
-
-        this.children.map((instanceMesh: InstancedMesh) => {
-            const instanceMatrix = new InstancedBufferAttribute(new Float32Array(count * 16), 16);
-            const instanceColor = new InstancedBufferAttribute(new Float32Array(count * 3).fill(1), 3);
-
-            for (let i = 0; i < count; i++) {
-                instanceMatrix.set(InstancedMeshBase._matrix.identity().toArray(), i * 16);
-                instanceColor.set([1, 1, 1], i * 3);
-            }
-
-            for (let i = 0; i < instanceMesh.count; i++) {
-                instanceMatrix.copyAt(i, instanceMesh.instanceMatrix, i);
-                instanceColor.copyAt(i, instanceMesh.instanceColor as BufferAttribute, i);
-            }
-
-            instanceMesh.instanceMatrix = instanceMatrix;
-            instanceMesh.instanceColor = instanceColor;
-            instanceMesh.count = count;
-        });
-
-    }
-
-    // 设置矩阵
-    async setMatrixAt(index: number, matrix: Matrix4 = new Matrix4().identity()) {
-        const new_matrix = matrix.clone(); // 把矩阵克隆一下避免对象引用问题
-        await this.awaitLoaded();
-        Object.keys(this.meshCollect).forEach(uuid => {
-            const instancedMesh = this.instanceCollect[uuid];
-            const collect = this.meshCollect[uuid]
-            collect.forEach((mesh: Mesh, i: number) => {
-                InstancedMeshBase._matrix.copy(mesh.matrix);
-                InstancedMeshBase._matrix.premultiply(new_matrix);
-
-                instancedMesh.setMatrixAt(collect.length * index + i, InstancedMeshBase._matrix);
-                instancedMesh.instanceMatrix.needsUpdate = true;
-            })
-        })
-
-        this.computeBoundingSphere();
-    }
-
-    //设置移动旋转缩放
-    async setTRS(
-        index: number,
-        {
-            position,
-            rotation,
-            scale
-        }: {
-            position?: Vector3;
-            rotation?: Euler;
-            scale?: Vector3
-        }
-    ) {
-
-        const new_position = position ? position.clone() : undefined;
-        const new_rotation = rotation ? rotation.clone() : undefined;
-        const new_scale = scale ? scale.clone() : undefined;
-
-        await this.awaitLoaded();
-
-        Object.keys(this.meshCollect).forEach(uuid => {
-            const instancedMesh = this.instanceCollect[uuid]
-            const collect = this.meshCollect[uuid]
-            collect.forEach((mesh: Mesh, i: number) => {
-
-                //获取对应的模型的矩阵
-                instancedMesh.getMatrixAt(collect.length * index + i, InstancedMeshBase._matrix);
-                InstancedMeshBase._matrix.premultiply(mesh.matrix.clone().invert());
-
-                InstancedMeshBase._matrix.decompose(
-                    InstancedMeshBase._position,
-                    InstancedMeshBase._Quaternion,
-                    InstancedMeshBase._scale
-                );
-                InstancedMeshBase._rotation.setFromQuaternion(InstancedMeshBase._Quaternion);
-                new_position && InstancedMeshBase._position.copy(new_position);
-                new_rotation && InstancedMeshBase._rotation.copy(new_rotation);
-                new_scale && InstancedMeshBase._scale.copy(new_scale);
-                InstancedMeshBase._Quaternion.setFromEuler(InstancedMeshBase._rotation);
-
-                InstancedMeshBase._matrix.compose(
-                    InstancedMeshBase._position,
-                    InstancedMeshBase._Quaternion,
-                    InstancedMeshBase._scale
-                );
-
-                InstancedMeshBase._matrix.premultiply(mesh.matrix);
-                instancedMesh.setMatrixAt(collect.length * index + i, InstancedMeshBase._matrix);
-                instancedMesh.instanceMatrix.needsUpdate = true;
-            })
-        })
-
-        this.computeBoundingSphere();
-    }
-
-    // 设置颜色
-    async setColorAt(index: number, color: (instancedMesh: InstancedMesh) => Color | undefined) {
-        await this.awaitLoaded();
-
-        Object.keys(this.meshCollect).forEach(uuid => {
-            const instancedMesh = this.instanceCollect[uuid]
-            const collect = this.meshCollect[uuid]
-            collect.forEach((mesh: Mesh, i: number) => {
-                const c = color(instancedMesh);
-                if (c) {
-                    instancedMesh.setColorAt(collect.length * index + i, c);
-                    instancedMesh.instanceColor!.needsUpdate = true;
-                }
-            })
-        })
-    }
-
-    // 同步属性
-    updateMatrixWorld(force?: boolean): void {
-        super.updateMatrixWorld(force);
-        const { cursor, enableEvent } = this.userData;
-        this.traverse(obj => {
-            Object.assign(obj.userData, { cursor, enableEvent });
-        });
-    }
-
-    // 事件监听
-    async addEventListener(name: string, callback: (e: any) => void) {
-        super.addEventListener(name, callback);
-        await this.awaitLoaded();
-        super.addEventListener(name, callback);
-        this.children.map(mesh => {
-            mesh.addEventListener(name, callback);
-        });
-    }
-
-    // 取消事件的监听
-    removeEventListener(name: string, callback: (e: any) => void) {
-        super.removeEventListener(name, callback);
-        this.children.map(mesh => {
-            mesh.removeEventListener(name, callback);
-        });
-    }
-
-}

package/KeyFrameAnimation.ts

@@ -1,122 +0,0 @@
-/*
- * @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, Euler, Line, LineBasicMaterial, Object3D, Vector3 } from "three";
-import threeUtils from "./threeUtils";
-
-
-// 关键帧类型
-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) {
-        super();
-
-        // 速度调整
-        this.speedScale = props.speedScale || 1;
-
-        // 设置关键帧对象数组
-        this.setKeyframes(props.keyframes);
-
-
-        // 设置对象
-        this.setObject3D(props.object3d);
-
-    }
-
-    // 速度调整
-    speedScale = 1;
-
-    // 需要需要移动的对象
-    object3d!: Object3D;
-
-    //路径辅助线
-    halperLine = new Line(undefined, new LineBasicMaterial({ color: "#f00" }));
-
-    // 关键帧数组
-    keyframes: Array<Keyframe> = [];
-
-    // 设置需要移动的对象
-    setObject3D(object3d: Object3D) {
-        this.object3d = object3d;
-        if (threeUtils.isDev) {
-            this.children = [object3d, this.halperLine];
-        } else {
-            this.children = [object3d];
-        }
-    }
-
-    // 获取单个关键帧
-    getKeyframe(i: number) {
-        return this.keyframes[i];
-    }
-
-    // 设置单个关键帧
-    setKeyframe(i: number, keyframe: Keyframe) {
-        this.keyframes[i] = keyframe;
-        this.setKeyframes(this.keyframes);
-    }
-
-    //设置全部关键帧
-    setKeyframes(keyframes: Array<Keyframe>) {
-        this.keyframes = keyframes;
-        const position: Array<number> = [];
-        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" } as never);
-    }
-
-    //更新关键帧的实例矩阵
-    updateMatrix(): void {
-        this.update();
-        super.updateMatrix();
-    }
-
-
-}

package/MeshBase.ts

@@ -1,236 +0,0 @@
-
-import { AnimationAction, AnimationMixer, Clock, DoubleSide, Group, Material, Mesh, MeshStandardMaterial, Object3D, Vector3 } from "three";
-import threeUtils from "./threeUtils";
-import threeLoader from "./threeLoader";
-import * as SkeletonUtils from 'three/examples/jsm/utils/SkeletonUtils';
-import { get, includes } from "lodash";
-
-// 模型基类
-export default class MeshBase extends Group {
-    constructor(url?: string) {
-        super();
-        url && this.loadModel(url);
-    }
-
-    url = "";
-
-    // 模型对象
-    static models: Map<string, Object3D> = new Map();
-
-    // 模型是否在加载中
-    static loadModeling: Map<string, boolean> = new Map();
-
-    // 加载完成
-    loaded = false;
-
-    // 是否有动画
-    hasAnimation = false;
-
-    //动画混合器
-    mixer?: AnimationMixer;
-
-    //动画剪辑对象数组
-    animationActions: { [key: string]: AnimationAction } = {};
-
-    // 获取文件名的后缀
-    getSuffix(filename: string) {
-        const match = filename.match(/\.([^\.]+)$/);
-        return match ? match[1].toLowerCase() : '';
-    }
-
-    // 如果url 是blob地址的话,就用suffix字段来制定模型的类型
-    async loadModel(url: string, filename: string = "") {
-
-        this.url = url;
-
-        if (!url) {
-            this.clear();
-            return;
-        }
-
-        this.loaded = false;
-
-        // 没有模型并且没有加载任务时就去加载模型
-        if (!MeshBase.models.get(url) && !MeshBase.loadModeling.get(url)) {
-            MeshBase.loadModeling.set(url, true);
-
-            // 万能加载器
-            let modal = await threeLoader.loadModel(url, filename);
-
-            MeshBase.models.set(url, modal);
-            MeshBase.loadModeling.set(url, false);
-        }
-
-        // 如果模型还在加载中, 就等待模型加载完成
-        do {
-            await new Promise(resolve => setTimeout(resolve, 50));
-        } while (MeshBase.loadModeling.get(url));
-
-        if (MeshBase.models.get(url)) {
-
-            this.clear();
-            const mesh = MeshBase.models.get(url)!;
-            // 判断是否有动画
-            this.hasAnimation = mesh.animations.length > 0;
-
-            if (this.hasAnimation) {
-                const model = SkeletonUtils.clone(mesh);
-                this.mixer = new AnimationMixer(model);
-
-                this.animationActions = {};
-                mesh.animations.map(animation => {
-                    const animationAction = this.mixer!.clipAction(animation).play();
-                    animationAction.weight = 0;
-                    this.animationActions[animation.name] = animationAction;
-                });
-
-                this.add(model);
-            } else {
-                this.add(mesh.clone(true));
-            }
-
-        }
-
-        await new Promise(resolve => requestAnimationFrame(resolve));
-
-        this.loaded = true;
-
-        // 加载完成事件
-        this.dispatchEvent({ type: "loaded" } as never);
-    }
-
-    // 超出绘制区域时不绘制
-    frustumCulled = false;
-
-    // 创建阴影
-    castShadow: boolean = false;
-
-    // 接受阴影
-    receiveShadow: boolean = false;
-
-    // promise.resole 队列
-    resoles: Array<(value: void | PromiseLike<void>) => void> = [];
-    // 等待加载加载完成
-    async awaitLoaded() {
-        if (!this.loaded) {
-            await new Promise<void>((resolve) => {
-                if (this.resoles.length === 0) {
-                    (async () => {
-                        while (!this.loaded) {
-                            await new Promise(resolve => requestAnimationFrame(resolve));
-                        }
-                        while (this.resoles.length > 0) {
-                            const resole = this.resoles.pop();
-                            resole && resole();
-                        }
-                    })();
-                }
-                this.resoles.unshift(resolve);
-            });
-        }
-    }
-
-    //遍历模型
-    async traverseMesh(callback: (mesh: Mesh) => void) {
-        // 等待加载完成
-        await this.awaitLoaded();
-
-        this.traverse(obj => {
-            const mesh = obj as Mesh;
-            if (mesh.isMesh) {
-                callback(mesh);
-            }
-        });
-    }
-
-    clock = new Clock();
-
-    //设置动画的权重
-    async setClipActionWeight(weights: { [key: string]: number } = {}) {
-        // 等待加载完成
-        await this.awaitLoaded();
-        for (let key in this.animationActions) {
-            this.animationActions[key].weight = weights[key] || 0;
-        }
-    }
-
-    //获取动画列表
-    getAnimas() {
-        return Object.keys(this.animationActions);
-    }
-
-    //播放指定动画
-    setAnimas(anima: string = "") {
-        this.setClipActionWeight({ [anima]: 1 });
-    }
-
-    //停止所有动画
-    stop() {
-        this.setClipActionWeight();
-    }
-
-    updateMatrix(): void {
-        //播放动画
-        if (this.mixer) {
-            this.mixer.update(this.clock.getDelta());
-        }
-        // 深度应用属性
-        this.traverse(obj => {
-            const mesh = obj as Mesh;
-            if (mesh.isMesh) {
-                mesh.frustumCulled = this.frustumCulled;
-                mesh.castShadow = this.castShadow;
-                mesh.receiveShadow = this.receiveShadow;
-            }
-        });
-
-        super.updateMatrix();
-    }
-
-    // 获取模型的尺寸
-    async getSize() {
-        await this.awaitLoaded();
-        return threeUtils.getSize(this);
-    }
-
-    // 居中
-    async center() {
-        await this.awaitLoaded();
-        threeUtils.center(this);
-    }
-
-    //底对齐
-    async alignBottom(y: number = 0) {
-        await this.awaitLoaded();
-        threeUtils.alignBottom(this, y);
-    }
-
-    // 放大到指定尺寸
-    async scaleTo(size: number = 1, key: Array<"x" | "y" | "z"> = ["x", "y", "z"]) {
-        await this.awaitLoaded();
-        threeUtils.scaleTo(this, size, key);
-    }
-
-    //按照法线拓展
-    expandBynormal(length: number) {
-        this.traverseMesh(mesh => {
-            // 没有法线就计算法线
-            mesh.geometry = mesh.geometry.clone();
-            if (!mesh.geometry.getAttribute("normal")) {
-                mesh.geometry.computeVertexNormals();
-            }
-
-            const normal = mesh.geometry.getAttribute("normal");
-            const position = mesh.geometry.getAttribute("position");
-            const v3 = new Vector3(0, 0, 0);
-            for (let i = 0; i < position.count; i++) {
-                v3.set(normal.getX(i), normal.getY(i), normal.getZ(i));
-                v3.setLength(length);
-                position.setXYZ(i, position.getX(i) + v3.x, position.getY(i) + v3.y, position.getZ(i) + v3.z);
-            }
-            position.needsUpdate = true;
-
-        })
-    }
-
-}