three-base 2.0.19 → 2.0.21

package/ThreeBase.js

@@ -5,7 +5,7 @@
  * @Last Modified time: 2023-05-23 23:54:13
  */
 import { round } from "lodash";
-import { AxesHelper, DepthFormat, DepthTexture, DisplayP3ColorSpace, EventDispatcher, GridHelper, LinearFilter, Mesh, MOUSE, NoBlending, NormalBlending, PerspectiveCamera, RGBAFormat, Scene, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
+import { AxesHelper, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, Mesh, MOUSE, NoBlending, NormalBlending, PerspectiveCamera, RGBAFormat, Scene, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { generateUUID } from "three/src/math/MathUtils";
 import { clearShader, coptyShader, fullScreenMesh, gaussBlurShader, strokeShader } from "./shaders";
@@ -31,19 +31,17 @@ export default class ThreeBase extends EventDispatcher {
     })();
     // TODO 渲染目标的颜色空间问题 还没有处理好
     // 基础纹理渲染对象
-    baseRenderTarget = new WebGLRenderTarget(128, 128, {
-        minFilter: LinearFilter,
-        magFilter: LinearFilter,
-        format: RGBAFormat,
-        stencilBuffer: false,
-        depthTexture: this.baseDepthTexture,
-        anisotropy: 16,
-        colorSpace: DisplayP3ColorSpace
-        // | typeof NoColorSpace
-        // | typeof SRGBColorSpace
-        // | typeof LinearSRGBColorSpace
-        // | typeof DisplayP3ColorSpace;
-    });
+    baseRenderTarget = (() => {
+        const baseRenderTarget = new WebGLRenderTarget(128, 128, {
+            minFilter: LinearFilter,
+            magFilter: LinearFilter,
+            format: RGBAFormat,
+            stencilBuffer: false,
+            depthTexture: this.baseDepthTexture,
+            anisotropy: 16,
+        });
+        return baseRenderTarget;
+    })();
     // 公用渲染目标1
     renderTarget = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
     // 渲染目标2
@@ -91,22 +89,17 @@ export default class ThreeBase extends EventDispatcher {
         controls.screenSpacePanning = true;
         return controls;
     })();
-    // 上下文是否被销毁了
-    isRendererContextLost = false;
     // 设置 dom 容器
     async setContainer(div) {
         if (div) {
             div.style.overflow = "hidden";
             div.innerHTML = "";
             div.append(this.renderer.domElement);
-            // 如果上下文被销毁了,  就恢复上下文
-            if (this.isRendererContextLost) {
-                this.isRendererContextLost = false;
-                this.renderer.forceContextRestore();
-                await new Promise(resolve => requestAnimationFrame(resolve));
-                await new Promise(resolve => requestAnimationFrame(resolve));
-                this.renderer.domElement.style.opacity = "1";
-            }
+            // this.renderer.forceContextLoss();
+            // await new Promise(resolve => requestAnimationFrame(resolve));
+            // await new Promise(resolve => requestAnimationFrame(resolve));
+            this.renderer.forceContextRestore();
+            this.renderer.domElement.style.opacity = "1";
             this.setSize(div.clientWidth, div.clientHeight);
             // 开启时时渲染
             threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
@@ -121,7 +114,7 @@ export default class ThreeBase extends EventDispatcher {
         }
         this.renderer.setPixelRatio(window.devicePixelRatio);
         this.renderer.setSize(width, height);
-        this.baseRenderTarget.setSize(width, height);
+        this.baseRenderTarget.setSize(width * window.devicePixelRatio, height * window.devicePixelRatio);
         this.size.set(width, height);
         // 渲染场景
         // this.renderer.clear();
@@ -149,11 +142,24 @@ export default class ThreeBase extends EventDispatcher {
         const controlsPosition = new Transition({ x: 100, y: 100, z: 100 });
         controlsPosition.setDuration(1000);
         controlsPosition.onChange(({ x, y, z }) => {
-            // const distance = this.controlsDistance.get("distance");
-            this.camera.position.set(x, y, z);
-            // .sub(this.controls.target)
-            // .setLength(distance)
-            // .add(this.controls.target);
+            const distance = this.controlsDistance.get("distance");
+            this.camera.position.set(x + 0.01, y, z + 0.01)
+                .sub(this.controls.target)
+                .setLength(distance)
+                .add(this.controls.target);
+            // // 创建初始方向向量
+            // const directionVecA = new THREE.Vector3(1, 0, 0); // 需要旋转的初始方向向量
+            // const referenceVecB = new THREE.Vector3(0, 1, 0); // 参考方向向量，用于确定旋转轴
+            // // 归一化参考方向向量
+            // referenceVecB.normalize();
+            // // 计算旋转轴
+            // const axis = new THREE.Vector3().crossVectors(directionVecA, referenceVecB).normalize();
+            // // 计算旋转角度（弧度）
+            // const angle = Math.PI / 36; // 旋转角度为5度，Math.PI / 36为弧度
+            // // 使用applyAxisAngle方法进行旋转
+            // directionVecA.applyAxisAngle(axis, angle);
+            // // 输出旋转后的方向向量
+            // console.log(directionVecA);
             this.camera.lookAt(this.controls.target);
             this.needRender = true;
         });
@@ -162,15 +168,17 @@ export default class ThreeBase extends EventDispatcher {
     // 网格辅助线
     gridHelper = (() => {
         const gridHelper = new GridHelper(1000, 100, 0x303030, 0x303030);
-        gridHelper.visible = threeUtils.isDev;
-        this.scene.add(gridHelper);
+        if (threeUtils.isDev) {
+            this.scene.add(gridHelper);
+        }
         return gridHelper;
     })();
     //坐标轴线
     axesHelper = (() => {
         const axesHelper = new AxesHelper(10000);
-        axesHelper.visible = threeUtils.isDev;
-        this.scene.add(axesHelper);
+        if (threeUtils.isDev) {
+            this.scene.add(axesHelper);
+        }
         return axesHelper;
     })();
     init() {
@@ -266,8 +274,6 @@ export default class ThreeBase extends EventDispatcher {
     stopRender() {
         threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
         this.renderer.forceContextLoss();
-        // 标记上下文被销毁了
-        this.isRendererContextLost = true;
         this.setSize(100, 100);
         this.renderer.domElement.style.opacity = "0";
     }
@@ -297,17 +303,17 @@ export default class ThreeBase extends EventDispatcher {
         }
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" });
-        this.renderer.setRenderTarget(this.baseRenderTarget);
+        // this.renderer.setRenderTarget(this.baseRenderTarget);
         this.renderer.clear();
         this.renderer.render(this.scene, this.camera);
-        this.renderer.setRenderTarget(null);
-        this.renderer.clear();
+        // this.renderer.setRenderTarget(null);
+        // this.renderer.clear();
         //TODO 渲染了2次, 还有优化空间
         // this.renderer.setScissorTest(false);
         // this.renderRendererTarget(this.baseRenderTarget);
         // this.renderer.setScissorTest(true);
-        // this.renderer.setScissor(0, 0, 512, 1000);
-        this.renderer.render(this.scene, this.camera);
+        // this.renderer.setScissor(0, 0, 800, 1000);
+        // this.renderer.render(this.scene, this.camera);
         // 查找需要绘制描边的对象,并且绘制描边
         this.scene.traverse(obj => {
             stroke_pass(this.renderer, this.camera, obj, this.baseDepthTexture);

package/ThreeBase.ts

@@ -36,19 +36,17 @@ export default class ThreeBase extends EventDispatcher {
 
     // TODO 渲染目标的颜色空间问题 还没有处理好
     // 基础纹理渲染对象
-    baseRenderTarget = new WebGLRenderTarget(128, 128, {
-        minFilter: LinearFilter,
-        magFilter: LinearFilter,
-        format: RGBAFormat,
-        stencilBuffer: false,
-        depthTexture: this.baseDepthTexture,
-        anisotropy: 16,
-        colorSpace: DisplayP3ColorSpace
-        // | typeof NoColorSpace
-        // | typeof SRGBColorSpace
-        // | typeof LinearSRGBColorSpace
-        // | typeof DisplayP3ColorSpace;
-    });
+    baseRenderTarget = (() => {
+        const baseRenderTarget = new WebGLRenderTarget(128, 128, {
+            minFilter: LinearFilter,
+            magFilter: LinearFilter,
+            format: RGBAFormat,
+            stencilBuffer: false,
+            depthTexture: this.baseDepthTexture,
+            anisotropy: 16,
+        });
+        return baseRenderTarget;
+    })();
 
     // 公用渲染目标1
     renderTarget = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
@@ -108,9 +106,6 @@ export default class ThreeBase extends EventDispatcher {
         return controls;
     })();
 
-    // 上下文是否被销毁了
-    isRendererContextLost = false;
-
     // 设置 dom 容器
     async setContainer(div: HTMLDivElement | null) {
         if (div) {
@@ -118,14 +113,11 @@ export default class ThreeBase extends EventDispatcher {
             div.innerHTML = "";
             div.append(this.renderer.domElement);
 
-            // 如果上下文被销毁了,  就恢复上下文
-            if (this.isRendererContextLost) {
-                this.isRendererContextLost = false;
-                this.renderer.forceContextRestore();
-                await new Promise(resolve => requestAnimationFrame(resolve));
-                await new Promise(resolve => requestAnimationFrame(resolve));
-                this.renderer.domElement.style.opacity = "1";
-            }
+            // this.renderer.forceContextLoss();
+            // await new Promise(resolve => requestAnimationFrame(resolve));
+            // await new Promise(resolve => requestAnimationFrame(resolve));
+            this.renderer.forceContextRestore();
+            this.renderer.domElement.style.opacity = "1";
 
             this.setSize(div.clientWidth, div.clientHeight);
 
@@ -145,7 +137,7 @@ export default class ThreeBase extends EventDispatcher {
         this.renderer.setPixelRatio(window.devicePixelRatio);
         this.renderer.setSize(width, height);
 
-        this.baseRenderTarget.setSize(width, height);
+        this.baseRenderTarget.setSize(width * window.devicePixelRatio, height * window.devicePixelRatio);
 
         this.size.set(width, height);
         // 渲染场景
@@ -177,11 +169,31 @@ export default class ThreeBase extends EventDispatcher {
         const controlsPosition = new Transition({ x: 100, y: 100, z: 100 });
         controlsPosition.setDuration(1000);
         controlsPosition.onChange(({ x, y, z }) => {
-            // const distance = this.controlsDistance.get("distance");
-            this.camera.position.set(x, y, z)
-                // .sub(this.controls.target)
-                // .setLength(distance)
-                // .add(this.controls.target);
+            const distance = this.controlsDistance.get("distance");
+            this.camera.position.set(x + 0.01, y, z + 0.01)
+                .sub(this.controls.target)
+                .setLength(distance)
+                .add(this.controls.target);
+
+            // // 创建初始方向向量
+            // const directionVecA = new THREE.Vector3(1, 0, 0); // 需要旋转的初始方向向量
+            // const referenceVecB = new THREE.Vector3(0, 1, 0); // 参考方向向量，用于确定旋转轴
+
+            // // 归一化参考方向向量
+            // referenceVecB.normalize();
+
+            // // 计算旋转轴
+            // const axis = new THREE.Vector3().crossVectors(directionVecA, referenceVecB).normalize();
+
+            // // 计算旋转角度（弧度）
+            // const angle = Math.PI / 36; // 旋转角度为5度，Math.PI / 36为弧度
+
+            // // 使用applyAxisAngle方法进行旋转
+            // directionVecA.applyAxisAngle(axis, angle);
+
+            // // 输出旋转后的方向向量
+            // console.log(directionVecA);
+
 
             this.camera.lookAt(this.controls.target);
             this.needRender = true;
@@ -192,16 +204,18 @@ export default class ThreeBase extends EventDispatcher {
     // 网格辅助线
     gridHelper = (() => {
         const gridHelper = new GridHelper(1000, 100, 0x303030, 0x303030);
-        gridHelper.visible = threeUtils.isDev;
-        this.scene.add(gridHelper);
+        if (threeUtils.isDev) {
+            this.scene.add(gridHelper);
+        }
         return gridHelper;
     })();
 
     //坐标轴线
     axesHelper = (() => {
         const axesHelper = new AxesHelper(10000);
-        axesHelper.visible = threeUtils.isDev;
-        this.scene.add(axesHelper);
+        if (threeUtils.isDev) {
+            this.scene.add(axesHelper);
+        }
         return axesHelper;
     })();
 
@@ -323,8 +337,6 @@ export default class ThreeBase extends EventDispatcher {
     stopRender() {
         threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
         this.renderer.forceContextLoss();
-        // 标记上下文被销毁了
-        this.isRendererContextLost = true;
         this.setSize(100, 100);
         this.renderer.domElement.style.opacity = "0";
     }
@@ -361,23 +373,21 @@ export default class ThreeBase extends EventDispatcher {
         }
 
         // 渲染场景
-        this.dispatchEvent({ type: "beforeRender" });
+        this.dispatchEvent({ type: "beforeRender" } as never);
 
-        this.renderer.setRenderTarget(this.baseRenderTarget);
+        // this.renderer.setRenderTarget(this.baseRenderTarget);
         this.renderer.clear();
         this.renderer.render(this.scene, this.camera);
 
-        this.renderer.setRenderTarget(null);
-        this.renderer.clear();
+        // this.renderer.setRenderTarget(null);
+        // this.renderer.clear();
 
         //TODO 渲染了2次, 还有优化空间
         // this.renderer.setScissorTest(false);
         // this.renderRendererTarget(this.baseRenderTarget);
         // this.renderer.setScissorTest(true);
-        // this.renderer.setScissor(0, 0, 512, 1000);
-        this.renderer.render(this.scene, this.camera);
-
-
+        // this.renderer.setScissor(0, 0, 800, 1000);
+        // this.renderer.render(this.scene, this.camera);
 
         // 查找需要绘制描边的对象,并且绘制描边
         this.scene.traverse(obj => {
@@ -385,7 +395,7 @@ export default class ThreeBase extends EventDispatcher {
             glow_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
         });
 
-        this.dispatchEvent({ type: "afterRender" });
+        this.dispatchEvent({ type: "afterRender" } as never);
     }
 
     private renderBindThis = this.render.bind(this);

package/ThreeMouse.ts

@@ -168,7 +168,7 @@ export default class ThreeMouse {
             if (this._mesh_on === MouseEvent.object) {
                 if (this.hasEvent(MouseEvent.object, ["mousemove"])) {
                     MouseEvent.type = "mousemove";
-                    MouseEvent.object.dispatchEvent(MouseEvent);
+                    MouseEvent.object.dispatchEvent(MouseEvent as never);
                 }
 
                 // 鼠标划入滑出事件
@@ -176,12 +176,12 @@ export default class ThreeMouse {
 
                 if (this.hasEvent(this._mesh_on, ["mouseleave"])) {
                     MouseEvent.type = "mouseleave";
-                    this._mesh_on!.dispatchEvent(MouseEvent);
+                    this._mesh_on!.dispatchEvent(MouseEvent as never);
                 }
 
                 if (this.hasEvent(MouseEvent.object, ["mouseenter"])) {
                     MouseEvent.type = "mouseenter";
-                    MouseEvent.object.dispatchEvent(MouseEvent);
+                    MouseEvent.object.dispatchEvent(MouseEvent as never);
                 }
 
             }
@@ -208,7 +208,7 @@ export default class ThreeMouse {
                     offsetY: this._mousemoveEvent.offsetY,
                     x: this._mousemoveEvent.x,
                     y: this._mousemoveEvent.y
-                });
+                } as never);
             }
 
 
@@ -235,7 +235,7 @@ export default class ThreeMouse {
                 offsetY: this._mousemoveEvent.offsetY,
                 x: this._mousemoveEvent.x,
                 y: this._mousemoveEvent.y
-            });
+            } as never);
         }
 
         // 置空当前鼠标上面的对象
@@ -292,7 +292,7 @@ export default class ThreeMouse {
                 offsetY: this._mousemoveEvent.offsetY,
                 x: this._mousemoveEvent.x,
                 y: this._mousemoveEvent.y
-            });
+            } as never);
 
         }
 
@@ -324,7 +324,7 @@ export default class ThreeMouse {
                 offsetY: this._mousemoveEvent.offsetY,
                 x: this._mousemoveEvent.x,
                 y: this._mousemoveEvent.y
-            });
+            } as never);
         }
 
         // 触发鼠标弹起事件
@@ -356,7 +356,7 @@ export default class ThreeMouse {
                             offsetY: this._mousemoveEvent.offsetY,
                             x: this._mousemoveEvent.x,
                             y: this._mousemoveEvent.y
-                        });
+                        } as never);
                     }
 
                     if (this.hasEvent(this._mesh_Down, ["leftclick"]) && (e.button === 0)) {
@@ -370,7 +370,7 @@ export default class ThreeMouse {
                             offsetY: this._mousemoveEvent.offsetY,
                             x: this._mousemoveEvent.x,
                             y: this._mousemoveEvent.y
-                        });
+                        } as never);
                     }
 
                     if (this.hasEvent(this._mesh_Down, ["rightclick"]) && (e.button === 2)) {
@@ -384,7 +384,7 @@ export default class ThreeMouse {
                             offsetY: this._mousemoveEvent.offsetY,
                             x: this._mousemoveEvent.x,
                             y: this._mousemoveEvent.y
-                        });
+                        } as never);
                     }
 
                 } else if (this._click_num > 1) {
@@ -401,7 +401,7 @@ export default class ThreeMouse {
                             offsetY: this._mousemoveEvent.offsetY,
                             x: this._mousemoveEvent.x,
                             y: this._mousemoveEvent.y
-                        });
+                        } as never);
 
                     }
 
@@ -420,7 +420,7 @@ export default class ThreeMouse {
                         offsetY: this._mousemoveEvent.offsetY,
                         x: this._mousemoveEvent.x,
                         y: this._mousemoveEvent.y
-                    });
+                    } as never);
                 }
 
                 if (this.hasEvent(this._mesh_Down, ["leftclick"]) && (e.button === 0)) {
@@ -434,7 +434,7 @@ export default class ThreeMouse {
                         offsetY: this._mousemoveEvent.offsetY,
                         x: this._mousemoveEvent.x,
                         y: this._mousemoveEvent.y
-                    });
+                    } as never);
                 }
 
                 if (this.hasEvent(this._mesh_Down, ["rightclick"]) && (e.button === 2)) {
@@ -448,7 +448,7 @@ export default class ThreeMouse {
                         offsetY: this._mousemoveEvent.offsetY,
                         x: this._mousemoveEvent.x,
                         y: this._mousemoveEvent.y
-                    });
+                    } as never);
                 }
 
             }

package/keyContorls.d.ts

@@ -1,4 +1,4 @@
-import { Event, EventDispatcher, EventListener, Vector3 } from "three";
+import { EventDispatcher, EventListener, Vector3 } from "three";
 /**
  * 键盘 使用 ↑↓←→ 控制 x z 方向, 小键盘 1 0 控制 y 方向
  *
@@ -17,7 +17,7 @@ declare class KeyContorls extends EventDispatcher {
         [key: string]: Array<any>;
     };
     removeEvent: import("lodash").DebouncedFunc<(type: string) => void>;
-    addEventListener<T extends string>(type: T, listener: EventListener<Event, T, this>): void;
+    addEventListener<T extends string>(type: T, listener: EventListener<{}, T, this>): void;
     addEvent(): void;
     dispose(): void;
 }

package/keyContorls.ts

@@ -29,17 +29,17 @@ class KeyContorls extends EventDispatcher {
 
     // 添加事件需要由外部实现
     add(e: any) {
-        this.dispatchEvent({ ...e, type: "add" });
+        this.dispatchEvent({ ...e, type: "add" } as never);
     }
 
     // 删除事件
     delete(e: any) {
-        this.dispatchEvent({ ...e, type: "delete" });
+        this.dispatchEvent({ ...e, type: "delete" } as never);
     }
 
     // 回车按钮
     enter(e: any) {
-        this.dispatchEvent({ ...e, type: "enter" });
+        this.dispatchEvent({ ...e, type: "enter" } as never);
     }
 
     keyDown = (e: any) => {
@@ -96,7 +96,7 @@ class KeyContorls extends EventDispatcher {
         this.dispatchEvent({
             type: "change",
             direction: this.direction
-        });
+        } as never);
 
     }
 
@@ -107,7 +107,7 @@ class KeyContorls extends EventDispatcher {
         this._listeners = undefined;
     }, 1000, { trailing: false });
 
-    addEventListener<T extends string>(type: T, listener: EventListener<Event, T, this>): void {
+    addEventListener<T extends string>(type: T, listener: EventListener<{}, T, this>): void {
         this.removeEvent(type);
         super.addEventListener(type, listener);
     }

package/package.json

@@ -1,7 +1,10 @@
 {
     "name": "three-base",
-    "version": "2.0.19",
+    "version": "2.0.21",
     "description": "three 3d three-base",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
     "repository": {
         "type": "git",
         "url": "https://gitee.com/drm/three-base"
@@ -35,7 +38,8 @@
     "dependencies": {
         "apng-js": "^1",
         "lodash": "^4",
-        "three": "^0.154.0",
+        "@types/three": "^0.159.0",
+        "three": "^0.159.0",
         "dexie": "^3",
         "vite": "*",
         "html2canvas": "^1.4.1"

package/pass/FullScreenQuad.d.ts

@@ -1,7 +1,7 @@
 import { BufferGeometry, Material, Mesh, OrthographicCamera, Scene, WebGLRenderer } from "three";
 export default class FullScreenQuad extends Scene {
     constructor();
-    mesh: Mesh<BufferGeometry<import("three").NormalBufferAttributes>, Material>;
+    mesh: Mesh<BufferGeometry<import("three").NormalBufferAttributes>, Material, import("three").Object3DEventMap>;
     orthographicCamera: OrthographicCamera;
     render(renderer: WebGLRenderer, material: Material): void;
 }

package/pass/glow_pass.js

@@ -474,6 +474,7 @@ export default function glow_pass(renderer, camera, object3d, baseDepthTexture)
     const originRenderTarget = renderer.getRenderTarget();
     // 设置选中目标的帧缓冲区
     renderer.getSize(size);
+    size.multiplyScalar(window.devicePixelRatio);
     selectTextureTarget.setSize(size.x, size.y);
     selectDethpTestTextureTarget.setSize(size.x, size.y);
     blur1TextureTarget.setSize(size.x, size.y);

package/pass/glow_pass.ts

@@ -495,6 +495,7 @@ export default function glow_pass(renderer: WebGLRenderer, camera: Camera, objec
 
     // 设置选中目标的帧缓冲区
     renderer.getSize(size);
+    size.multiplyScalar(window.devicePixelRatio);
     selectTextureTarget.setSize(size.x, size.y);
     selectDethpTestTextureTarget.setSize(size.x, size.y);
     blur1TextureTarget.setSize(size.x, size.y);

package/pass/stroke_pass.js

@@ -470,6 +470,7 @@ export default function stroke_pass(renderer, camera, object3d, baseDepthTexture
     const originRenderTarget = renderer.getRenderTarget();
     // 设置选中目标的帧缓冲区
     renderer.getSize(size);
+    size.multiplyScalar(window.devicePixelRatio);
     selectTextureTarget.setSize(size.x, size.y);
     selectDethpTestTextureTarget.setSize(size.x, size.y);
     blur1TextureTarget.setSize(size.x, size.y);

package/pass/stroke_pass.ts

@@ -489,6 +489,7 @@ export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, obj
 
     // 设置选中目标的帧缓冲区
     renderer.getSize(size);
+    size.multiplyScalar(window.devicePixelRatio);
     selectTextureTarget.setSize(size.x, size.y);
     selectDethpTestTextureTarget.setSize(size.x, size.y);
     blur1TextureTarget.setSize(size.x, size.y);

package/threeLoader.d.ts

@@ -1,17 +1,19 @@
-import { CanvasTexture, EventDispatcher, Texture, TextureLoader } from "three";
+import { EventDispatcher, Texture, TextureLoader } from "three";
 import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
+import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
 declare class ThreeLoader extends EventDispatcher {
     constructor();
     anisotropy: number;
     setAnisotropy(v: number): void;
     textureMap: Map<string, Texture>;
     textureLoader: TextureLoader;
-    getTexture(src: string | HTMLCanvasElement): CanvasTexture | Texture;
+    getTexture(src: string | HTMLCanvasElement): Texture;
     fbxLoader: FBXLoader;
     objLoader: OBJLoader;
+    stlLoader: STLLoader;
     mtlLoader: MTLLoader;
     gltfLoader: GLTFLoader;
     onload: boolean;

package/threeLoader.js

@@ -10,6 +10,7 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
+import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
 // 引入静态资源
 //@ts-ignore
 import dracoWasmWrapperJS from "./lib/draco/draco_wasm_wrapper.js?url";
@@ -85,6 +86,8 @@ class ThreeLoader extends EventDispatcher {
     fbxLoader = new FBXLoader();
     //obj 加载器
     objLoader = new OBJLoader();
+    // stl 加载器
+    stlLoader = new STLLoader();
     // 材质加载器
     mtlLoader = new MTLLoader();
     // gltf 加载器

package/threeLoader.ts

@@ -11,6 +11,7 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
+import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
 
 // 引入静态资源
 //@ts-ignore
@@ -32,7 +33,7 @@ class ThreeLoader extends EventDispatcher {
 
         // 有资源加载完成时通知渲染器
         DefaultLoadingManager.onProgress = () => {
-            this.dispatchEvent({ type: "progress" });
+            this.dispatchEvent({ type: "progress" } as never);
         }
 
         DefaultLoadingManager.onLoad = () => {
@@ -107,6 +108,9 @@ class ThreeLoader extends EventDispatcher {
     //obj 加载器
     objLoader = new OBJLoader();
 
+    // stl 加载器
+    stlLoader = new STLLoader();
+
     // 材质加载器
     mtlLoader = new MTLLoader();
 

package/threeUtils.ts

@@ -37,7 +37,7 @@ class ThreeUtils extends EventDispatcher {
             type: "requestAnimationFrame",
             timeTemp,
             accumulate: this._accumulate
-        });
+        } as never);
 
         this._computerDomZoom();