three-base 1.129.1 → 1.129.4

package/lib/{threeUtils.ts → threeUtils.js}

@@ -4,61 +4,49 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-03-16 14:34:49
  */
-
 import { Box3, BufferGeometry, Clock, EventDispatcher, Object3D, Vector3 } from "three";
-
 class ThreeUtils extends EventDispatcher {
-
     constructor() {
         super();
-
         this.requestAnimationFrame();
     }
     //@ts-ignore
-    isProd = process.env.NODE_ENV === "production";
-
+    isProd = (process.env.NODE_ENV === "production");
     //@ts-ignore
-    isDev = process.env.NODE_ENV === "development";
-
-    timeTemp = performance.now();
-
-    accumulate = 0;// 事件分发次数
-
-    box3 = new Box3();
-    size = new Vector3();
-    center = new Vector3();
-
-    clock = new Clock();
-
+    isDev = (process.env.NODE_ENV === "development");
+    _timeTemp = performance.now();
+    _accumulate = 0; // 事件分发次数
+    _box3 = new Box3();
+    _size = new Vector3();
+    _center = new Vector3();
+    _clock = new Clock();
     requestAnimationFrame() {
-        this.accumulate += 1;
-        const timeTemp = this.timeTemp = performance.now();
+        this._accumulate += 1;
+        const timeTemp = this._timeTemp = performance.now();
         this.dispatchEvent({
             type: "requestAnimationFrame",
             timeTemp,
-            accumulate: this.accumulate
+            accumulate: this._accumulate
         });
-
         this._computerDomZoom();
-
+        //执行一个计划任务
+        let work = this.workList.splice(0, 1)[0];
+        work && work();
         setTimeout(() => {
             this.requestAnimationFrame();
-        }, 45 - this.clock.getDelta());
+        }, 45 - this._clock.getDelta());
     }
-
     // 需要保持宽高比的元素列表
-    private _keepZoomDoms: Array<{ dom: HTMLElement, width: number, height: number }> = [];
-
+    _keepZoomDoms = [];
     /**
      *计算需要保持比例的元素
      */
-    private _computerDomZoom() {
+    _computerDomZoom() {
         //1. 踢除没有出现在页面上的 dom 元素
         this._keepZoomDoms = this._keepZoomDoms.filter(l => this.inDocument(l.dom));
-
         //2.设置dom的缩放值样式
         this._keepZoomDoms.map((item, i) => {
-            let parentRact = window.getComputedStyle(item.dom.parentNode as Element);
+            let parentRact = window.getComputedStyle(item.dom.parentNode);
             let width = parseInt(parentRact.width);
             let height = parseInt(parentRact.height);
             let scale = Math.min(width / item.width, height / item.height);
@@ -70,111 +58,122 @@ class ThreeUtils extends EventDispatcher {
                 width: `${item.width}px`,
                 height: `${item.height}px`
             });
-
         });
     }
-
     /**
      * dom元素保持比例
      */
-    keepZoom(dom: HTMLElement | null, width: number = 1920, height: number = 1080) {
+    keepZoom(dom, width = 1920, height = 1080) {
         if (dom) {
             // 去掉相同的dom存储的信息
             this._keepZoomDoms = this._keepZoomDoms.filter(l => l.dom !== dom);
-
             // 把配置加入到列表中
             this._keepZoomDoms.push({ dom, width, height });
-
             dom.dataset.a = "这个元素缩放比例由 threeUtils.keepZoom 方法设置";
         }
     }
-
+    workList = [];
+    // 时钟对象
+    clock = new Clock();
+    // 按照任务队列依次执行计划任务 性能优化
+    /**
+     * @param {() => void} [callback]
+     * @param {boolean} [first=true] 需要优先执行
+     */
+    addWork(work, first = false) {
+        // 加入任务队列
+        if (work && !this.workList.includes(work)) {
+            if (first) {
+                this.workList.splice(1, 0, work); // 优先执行的任务回调
+            }
+            else {
+                this.workList.push(work);
+            }
+        }
+    }
     /**
      *判断一个元素是否在页面上
      */
-    inDocument(dom: ParentNode | null): boolean {
+    inDocument(dom) {
         if (dom === null) {
             return false;
-        } else if (dom.parentNode === null) {
+        }
+        else if (dom.parentNode === null) {
             return false;
-        } else if (dom.parentNode === document) {
+        }
+        else if (dom.parentNode === document) {
             return true;
-        } else {
+        }
+        else {
             return this.inDocument(dom.parentNode);
         }
     }
-
     // 获取中心点
-    getCenter(object3d: Object3D | BufferGeometry) {
+    getCenter(object3d) {
         if (object3d instanceof Object3D) {
-            this.box3.setFromObject(object3d);
-            this.box3.getCenter(this.center);
-        } else if (object3d instanceof BufferGeometry) {
+            this._box3.setFromObject(object3d);
+            this._box3.getCenter(this._center);
+        }
+        else if (object3d instanceof BufferGeometry) {
             object3d.computeBoundingBox();
-            object3d.boundingBox!.getCenter(this.center);
+            object3d.boundingBox.getCenter(this._center);
         }
-
-        return this.center;
+        return this._center;
     }
-
     // 获取模型大小
-    getSize(object3d: Object3D | BufferGeometry) {
+    getSize(object3d) {
         if (object3d instanceof Object3D) {
-            this.box3.setFromObject(object3d);
-            this.box3.getSize(this.size);
-        } else if (object3d instanceof BufferGeometry) {
+            this._box3.setFromObject(object3d);
+            this._box3.getSize(this._size);
+        }
+        else if (object3d instanceof BufferGeometry) {
             object3d.computeBoundingBox();
-            object3d.boundingBox!.getSize(this.size);
+            object3d.boundingBox.getSize(this._size);
         }
-
-        return this.size;
+        return this._size;
     }
-
     // 模型对齐底面
-    alignBottom(object3d: Object3D | BufferGeometry, y = 0) {
+    alignBottom(object3d, y = 0) {
         if (object3d instanceof Object3D) {
-            this.box3.setFromObject(object3d);
-            this.box3.getCenter(this.center);
-            this.box3.getSize(this.size);
-            object3d.position.y -= (this.center.y - (this.size.y * 0.5));
+            this._box3.setFromObject(object3d);
+            this._box3.getCenter(this._center);
+            this._box3.getSize(this._size);
+            object3d.position.y -= (this._center.y - (this._size.y * 0.5));
             object3d.position.y += y;
             object3d.updateMatrixWorld(true);
-        } else if (object3d instanceof BufferGeometry) {
+        }
+        else if (object3d instanceof BufferGeometry) {
             object3d.computeBoundingBox();
-            object3d.translate(0, -object3d.boundingBox!.min.y, 0);
+            object3d.translate(0, -object3d.boundingBox.min.y + y, 0);
         }
     }
-
     // 居中对象
-    centerObject3D(object3d: Object3D | BufferGeometry) {
+    centerObject3D(object3d) {
         if (object3d instanceof Object3D) {
-            this.box3.setFromObject(object3d);
-            this.box3.getCenter(this.center);
-            object3d.position.sub(this.center);
+            this._box3.setFromObject(object3d);
+            this._box3.getCenter(this._center);
+            object3d.position.sub(this._center);
             object3d.updateMatrixWorld(true);
-        } else if (object3d instanceof BufferGeometry) {
+        }
+        else if (object3d instanceof BufferGeometry) {
             object3d.center();
         }
     }
-
+    //居中对象
+    center(object3d) {
+        this.centerObject3D(object3d);
+    }
     //缩放至指定大小
-    scaleTo(object3d: Object3D | BufferGeometry, size: number = 1) {
+    scaleTo(object3d, size = 1) {
         const originSize = this.getSize(object3d);
         const scale = size / Math.max(originSize.x, originSize.y, originSize.z);
         if (object3d instanceof Object3D) {
             object3d.scale.multiplyScalar(scale);
-        } else if (object3d instanceof BufferGeometry) {
+        }
+        else if (object3d instanceof BufferGeometry) {
             object3d.scale(scale, scale, scale);
         }
     }
-
-    //TODO 导出gltf文件
-    // exportGltf(object3d: Object3D) {
-
-    // }
-
 }
-
 const threeUtils = new ThreeUtils();
-
-export default threeUtils;
+export default threeUtils;

package/lib/{type.ts → type.js}

@@ -4,10 +4,7 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2022-01-05 14:21:42
  */
-
-
-
 // declare module '*?url' {
 //     const src: string
 //     export default src
-// }
+// }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "three-base",
-    "version": "1.129.1",
+    "version": "1.129.4",
     "description": "three 3d three-base",
     "repository": {
         "type": "git",
@@ -12,15 +12,15 @@
         "three-base",
         "three-spritetext"
     ],
-    "main": "index.ts",
-    "module": "index.ts",
-    "types": "index.ts",
+    "main": "index.js",
+    "module": "index.js",
+    "types": "",
     "files": [
         "index.ts",
         "declare.d.ts",
         "lib/*.js",
-        "lib/*.ts",
-        "lib/**/*.ts",
+        "lib/*.d.ts",
+        "lib/**/*.d.ts",
         "lib/**/*.js",
         "lib/**/*.tsx",
         "lib/**/*.css",
@@ -41,6 +41,7 @@
         "apng-js": "^1",
         "element-resize-event": "^3",
         "lodash": "^4",
+        "dexie": "^3",
         "three": "0.129.0",
         "vite": "^4",
         "three-spritetext": "^1",

package/declare.d.ts

@@ -1,5 +0,0 @@
-
-// 声明模块
-
-declare interface Window {
-}

package/lib/EventMesh.ts

@@ -1,79 +0,0 @@
-/*
- * @Author: xiaosihan 
- * @Date: 2022-03-20 12:55:37 
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-02-07 11:19:56
- */
-
-import { BoxGeometry, BufferGeometry, CylinderGeometry, DoubleSide, FrontSide, Material, Mesh, MeshBasicMaterial, MeshNormalMaterial } from "three";
-import threeUtils from "./threeUtils";
-
-// 碰撞的形状
-export enum CollisionShaere {
-  cube = "cube", // 正方体
-  cylinder = "cylinder" // 圆柱体
-}
-
-/**
- * 碰撞检测用的模型
- */
-export default class EventMesh extends Mesh<BufferGeometry, Material> {
-
-  constructor(type: CollisionShaere = CollisionShaere.cube) {
-    super();
-
-    this.material = EventMesh.material;
-
-    this.setType(type);
-
-    // 生产环境 不用渲染
-    if (threeUtils.isProd) {
-      this.material = new MeshBasicMaterial({
-        side: DoubleSide,
-        transparent: true,
-        opacity: 0.25,
-        alphaTest: 1
-      });
-    }
-  }
-
-  static type = CollisionShaere;
-
-  static material = new MeshNormalMaterial({
-    side: DoubleSide,
-    transparent: true,
-    opacity: 0.3,
-  });
-
-  renderOrder = 99;
-
-  // 正方体 网格模型
-  static cubeGeo = new BoxGeometry(1, 1, 1, 1, 1, 1);
-
-  // 圆柱体 网格模型
-  static cylinderGeo = new CylinderGeometry(1, 1, 1, 50, 1, false, 0, Math.PI * 2);
-
-  // 是否是碰撞检测专用的模型
-  isEventMesh = true;
-
-  setType(type: CollisionShaere) {
-
-    switch (type) {
-      case EventMesh.type.cube:
-        this.geometry = EventMesh.cubeGeo;
-        break;
-
-      case EventMesh.type.cylinder:
-        this.geometry = EventMesh.cylinderGeo;
-        break;
-
-      default:
-        break;
-    }
-
-    this.geometry.computeVertexNormals();
-
-
-  }
-
-}

package/lib/InstancedGroupMesh.ts

@@ -1,80 +0,0 @@
-/*
- * @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/lib/text/Text2D.ts

@@ -1,41 +0,0 @@
-/*
- * @Author: xiaosihan 
- * @Date: 2022-05-23 13:53:06 
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2022-05-23 19:38:24
- */
-
-import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from "three";
-import SpriteText from "three-spritetext";
-
-
-
-type Props = {
-    text?: string;
-    textHeight?: number;
-    color?: string;
-    backgroundColor?: string;
-    fontFace?: string;
-    fontSize?: number;
-    fontWeight?: string;
-    padding?: number | [number, number];
-    borderWidth?: number;
-    borderRadius?: number;
-    borderColor?: string;
-    strokeWidth?: number;
-    strokeColor?: string;
-}
-
-/**
- * 2d文字
- * @export
- * @class PlaneBtn
- * @extends {Mesh}
- */
-export default class Text2D extends Mesh {
-
-    constructor(text: string = "Text2D") {
-        super();
-    }
-
-}

package/lib/text/Text3D.ts

@@ -1,20 +0,0 @@
-/*
- * @Author: xiaosihan
- * @Date: 2022-06-14 09:48:00
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2022-06-14 10:01:13
- */
-
-import { Mesh } from "three";
-
-// 三维空间中的3D文字模型
-export default class Text3D extends Mesh {
-
-    constructor(text: string = "Text2D") {
-        super();
-    }
-
-    
-
-
-}