three-base 1.0.61 → 1.0.64

package/lib/threeUtils.js

@@ -0,0 +1,179 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-02-24 22:49:42
+ * @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");
+    //@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();
+    requestAnimationFrame() {
+        this._accumulate += 1;
+        const timeTemp = this._timeTemp = performance.now();
+        this.dispatchEvent({
+            type: "requestAnimationFrame",
+            timeTemp,
+            accumulate: this._accumulate
+        });
+        this._computerDomZoom();
+        //执行一个计划任务
+        let work = this.workList.splice(0, 1)[0];
+        work && work();
+        setTimeout(() => {
+            this.requestAnimationFrame();
+        }, 45 - this._clock.getDelta());
+    }
+    // 需要保持宽高比的元素列表
+    _keepZoomDoms = [];
+    /**
+     *计算需要保持比例的元素
+     */
+    _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);
+            let width = parseInt(parentRact.width);
+            let height = parseInt(parentRact.height);
+            let scale = Math.min(width / item.width, height / item.height);
+            Object.assign(item.dom.style, {
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: `translate(-50%, -50%) scale(${scale})`,
+                width: `${item.width}px`,
+                height: `${item.height}px`
+            });
+        });
+    }
+    /**
+     * dom元素保持比例
+     */
+    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) {
+        if (dom === null) {
+            return false;
+        }
+        else if (dom.parentNode === null) {
+            return false;
+        }
+        else if (dom.parentNode === document) {
+            return true;
+        }
+        else {
+            return this.inDocument(dom.parentNode);
+        }
+    }
+    // 获取中心点
+    getCenter(object3d) {
+        if (object3d instanceof Object3D) {
+            this._box3.setFromObject(object3d);
+            this._box3.getCenter(this._center);
+        }
+        else if (object3d instanceof BufferGeometry) {
+            object3d.computeBoundingBox();
+            object3d.boundingBox.getCenter(this._center);
+        }
+        return this._center;
+    }
+    // 获取模型大小
+    getSize(object3d) {
+        if (object3d instanceof Object3D) {
+            this._box3.setFromObject(object3d);
+            this._box3.getSize(this._size);
+        }
+        else if (object3d instanceof BufferGeometry) {
+            object3d.computeBoundingBox();
+            object3d.boundingBox.getSize(this._size);
+        }
+        return this._size;
+    }
+    // 模型对齐底面
+    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));
+            object3d.position.y += y;
+            object3d.updateMatrixWorld(true);
+        }
+        else if (object3d instanceof BufferGeometry) {
+            object3d.computeBoundingBox();
+            object3d.translate(0, -object3d.boundingBox.min.y + y, 0);
+        }
+    }
+    // 居中对象
+    centerObject3D(object3d) {
+        if (object3d instanceof Object3D) {
+            this._box3.setFromObject(object3d);
+            this._box3.getCenter(this._center);
+            object3d.position.sub(this._center);
+            object3d.updateMatrixWorld(true);
+        }
+        else if (object3d instanceof BufferGeometry) {
+            object3d.center();
+        }
+    }
+    //居中对象
+    center(object3d) {
+        this.centerObject3D(object3d);
+    }
+    //缩放至指定大小
+    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) {
+            object3d.scale(scale, scale, scale);
+        }
+    }
+}
+const threeUtils = new ThreeUtils();
+export default threeUtils;

package/lib/type.js

@@ -0,0 +1,10 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2021-12-20 14:21:54
+ * @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.0.61",
+    "version": "1.0.64",
     "description": "three 3d three-base",
     "repository": {
         "type": "git",
@@ -42,7 +42,7 @@
         "element-resize-event": "^3",
         "lodash": "^4",
         "three": ">=0.150.0",
-        "vite": "^4",
+        "vite": ">=3",
         "dexie": "^3",
         "three-spritetext": "^1",
         "@types/three": ">=0.149.0",