three-base 1.129.14 → 1.129.17

package/lib/SpriteText2.ts

@@ -0,0 +1,236 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2023-04-24 15:31:02 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-04-24 16:18:47
+ */
+
+
+import { Intersection, LinearFilter, Raycaster, Sprite, SpriteMaterial, Texture } from 'three';
+
+// 带箭头的精灵文字
+export default class SpriteText2 extends Sprite {
+    constructor(text = '', textHeight = 10, color: `rgb(${string})` | `rgba(${string})` | `#${string}` = 'rgba(255, 255, 255, 1)') {
+        super();
+
+        this._text = `${text}`;
+        this._textHeight = textHeight;
+        this._color = color;
+        this._backgroundColor = false; // no background color
+
+        this._padding = 0;
+        this._borderWidth = 0;
+        this._borderRadius = 0;
+        this._borderColor = 'white';
+
+        this._strokeWidth = 0;
+        this._strokeColor = 'white';
+
+        this._fontFace = 'Arial';
+        this._fontSize = 90; // defines text resolution
+        this._fontWeight = 'normal';
+
+        this._genCanvas();
+    }
+
+    _text = "";
+    _textHeight = 0;
+    _color: `rgb(${string})` | `rgba(${string})` | `#${string}` = "#ffffff";
+    _backgroundColor: `rgb(${string})` | `rgba(${string})` | `#${string}` | false = false; // no background color
+
+    _padding = 0;
+    _borderWidth = 0;
+    _borderRadius = 0;
+    _borderColor = 'white';
+
+    _strokeWidth = 0;
+    _strokeColor = 'white';
+
+    _fontFace = 'Arial';
+    _fontSize = 90; // defines text resolution
+    _fontWeight = 'normal';
+    _canvas = document.createElement('canvas');
+
+    get text() { return this._text; }
+    set text(text) { this._text = text; this._genCanvas(); }
+    get textHeight() { return this._textHeight; }
+    set textHeight(textHeight) { this._textHeight = textHeight; this._genCanvas(); }
+    get color() { return this._color; }
+    set color(color) { this._color = color; this._genCanvas(); }
+    get backgroundColor() { return this._backgroundColor; }
+    set backgroundColor(color) { this._backgroundColor = color; this._genCanvas(); }
+    get padding() { return this._padding; }
+    set padding(padding) { this._padding = padding; this._genCanvas(); }
+    get borderWidth() { return this._borderWidth; }
+    set borderWidth(borderWidth) { this._borderWidth = borderWidth; this._genCanvas(); }
+    get borderRadius() { return this._borderRadius; }
+    set borderRadius(borderRadius) { this._borderRadius = borderRadius; this._genCanvas(); }
+    get borderColor() { return this._borderColor; }
+    set borderColor(borderColor) { this._borderColor = borderColor; this._genCanvas(); }
+    get fontFace() { return this._fontFace; }
+    set fontFace(fontFace) { this._fontFace = fontFace; this._genCanvas(); }
+    get fontSize() { return this._fontSize; }
+    set fontSize(fontSize) { this._fontSize = fontSize; this._genCanvas(); }
+    get fontWeight() { return this._fontWeight; }
+    set fontWeight(fontWeight) { this._fontWeight = fontWeight; this._genCanvas(); }
+    get strokeWidth() { return this._strokeWidth; }
+    set strokeWidth(strokeWidth) { this._strokeWidth = strokeWidth; this._genCanvas(); }
+    get strokeColor() { return this._strokeColor; }
+    set strokeColor(strokeColor) { this._strokeColor = strokeColor; this._genCanvas(); }
+
+    _genCanvas() {
+        const canvas = this._canvas;
+        const ctx = canvas.getContext('2d')!;
+
+        const border = Array.isArray(this.borderWidth) ? this.borderWidth : [this.borderWidth, this.borderWidth]; // x,y border
+        const relBorder: number[] = border.map(b => b * this.fontSize * 0.1); // border in canvas units
+
+        const borderRadius = Array.isArray(this.borderRadius) ? this.borderRadius : [this.borderRadius, this.borderRadius, this.borderRadius, this.borderRadius]; // tl tr br bl corners
+        const relBorderRadius = borderRadius.map(b => b * this.fontSize * 0.1); // border radius in canvas units
+
+        const padding = Array.isArray(this.padding) ? this.padding : [this.padding, this.padding]; // x,y padding
+        const relPadding = padding.map(p => p * this.fontSize * 0.1); // padding in canvas units
+
+        const lines = this.text.split('\n');
+        const font = `${this.fontWeight} ${this.fontSize}px ${this.fontFace}`;
+
+        ctx.font = font; // measure canvas with appropriate font
+        const innerWidth = Math.max(...lines.map(line => ctx.measureText(line).width));
+        const innerHeight = this.fontSize * lines.length;
+        canvas.width = innerWidth + relBorder[0] * 2 + relPadding[0] * 2;
+        canvas.height = (innerHeight + relBorder[1] * 2 + relPadding[1] * 2) * 2 + 40;
+
+        // paint border
+        if (this.borderWidth) {
+            ctx.strokeStyle = this.borderColor;
+
+            if (relBorder[0]) { // left + right borders
+                const hb = relBorder[0] / 2;
+                ctx.lineWidth = relBorder[0];
+                ctx.beginPath();
+                ctx.moveTo(hb, relBorderRadius[0]);
+                ctx.lineTo(hb, ((canvas.height - 40) / 2) - relBorderRadius[3]);
+                ctx.moveTo(canvas.width - hb, relBorderRadius[1]);
+                ctx.lineTo(canvas.width - hb, ((canvas.height - 40) / 2) - relBorderRadius[2]);
+                ctx.stroke();
+            }
+
+            if (relBorder[1]) { // top + bottom borders
+                const hb = relBorder[1] / 2;
+                ctx.lineWidth = relBorder[1];
+                ctx.beginPath();
+                ctx.moveTo(Math.max(relBorder[0], relBorderRadius[0]), hb);
+                ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[1]), hb);
+                ctx.moveTo(Math.max(relBorder[0], relBorderRadius[3]), ((canvas.height - 40) / 2) - hb);
+
+                ctx.lineTo((canvas.width / 2 - 20), ((canvas.height - 40) / 2) - hb);
+                ctx.lineTo((canvas.width / 2), ((canvas.height - 40) / 2) + 20 - hb);
+                ctx.lineTo((canvas.width / 2 + 20), ((canvas.height - 40) / 2) - hb);
+
+                ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[2]), ((canvas.height - 40) / 2) - hb);
+                ctx.stroke();
+            }
+
+            if (this.borderRadius) { // strike rounded corners
+                const cornerWidth = Math.max(...relBorder);
+                const hb = cornerWidth / 2;
+                ctx.lineWidth = cornerWidth;
+                ctx.beginPath();
+                ([
+                    !!relBorderRadius[0] && [relBorderRadius[0], hb, hb, relBorderRadius[0]],
+                    !!relBorderRadius[1] && [canvas.width - relBorderRadius[1], canvas.width - hb, hb, relBorderRadius[1]],
+                    !!relBorderRadius[2] && [canvas.width - relBorderRadius[2], canvas.width - hb, ((canvas.height - 40) / 2) - hb, ((canvas.height - 40) / 2) - relBorderRadius[2]],
+                    !!relBorderRadius[3] && [relBorderRadius[3], hb, ((canvas.height - 40) / 2) - hb, ((canvas.height - 40) / 2) - relBorderRadius[3]]
+                ].filter(d => d) as [number, number, number, number][]).forEach(([x0, x1, y0, y1]) => {
+                    ctx.moveTo(x0, y0);
+                    ctx.quadraticCurveTo(x1, y0, x1, y1);
+                });
+                ctx.stroke();
+            }
+        }
+
+        // paint background
+        if (this.backgroundColor) {
+            ctx.fillStyle = this.backgroundColor;
+            if (!this.borderRadius) {
+                ctx.fillRect(relBorder[0], relBorder[1], canvas.width - relBorder[0] * 2, ((canvas.height - 40) / 2) - relBorder[1] * 2);
+            } else { // fill with rounded corners
+                ctx.beginPath();
+                ctx.moveTo(relBorder[0], relBorderRadius[0]);
+
+                ctx.quadraticCurveTo(relBorder[0], relBorder[1], relBorderRadius[0], relBorder[1]);
+                ctx.lineTo(canvas.width - relBorderRadius[1], relBorder[1]);
+                ctx.quadraticCurveTo(canvas.width - relBorder[0], relBorder[1], canvas.width - relBorder[0], relBorderRadius[1]);
+                ctx.lineTo(canvas.width - relBorder[0], ((canvas.height - 40) / 2) - relBorderRadius[2]);
+                ctx.quadraticCurveTo(canvas.width - relBorder[0], ((canvas.height - 40) / 2) - relBorder[1], canvas.width - relBorderRadius[2], ((canvas.height - 40) / 2) - relBorder[1]);
+
+                ctx.lineTo((canvas.width / 2 + 20), ((canvas.height - 40) / 2) - relBorder[1]);
+                ctx.lineTo((canvas.width / 2), ((canvas.height - 40) / 2) + 20 - relBorder[1]);
+                ctx.lineTo((canvas.width / 2 - 20), ((canvas.height - 40) / 2) - relBorder[1]);
+
+                ctx.lineTo(relBorderRadius[3], ((canvas.height - 40) / 2) - relBorder[1]);
+                ctx.quadraticCurveTo(relBorder[0], ((canvas.height - 40) / 2) - relBorder[1], relBorder[0], ((canvas.height - 40) / 2) - relBorderRadius[3]);
+
+                ctx.closePath();
+                ctx.fill();
+            }
+        }
+
+        ctx.translate(relBorder[0], relBorder[1]);
+        ctx.translate(relPadding[0], relPadding[0]);
+
+        // paint text
+        ctx.font = font; // Set font again after canvas is resized, as context properties are reset
+        ctx.fillStyle = this.color;
+        ctx.textBaseline = 'bottom';
+
+        const drawTextStroke = this.strokeWidth > 0;
+        if (drawTextStroke) {
+            ctx.lineWidth = this.strokeWidth * this.fontSize / 10;
+            ctx.strokeStyle = this.strokeColor;
+        }
+
+        lines.forEach((line, index) => {
+            const lineX = (innerWidth - ctx.measureText(line).width) / 2;
+            const lineY = (index + 1) * this.fontSize;
+
+            drawTextStroke && ctx.strokeText(line, lineX, lineY);
+            ctx.fillText(line, lineX, lineY);
+        });
+
+        // Inject canvas into sprite
+        if (this.material.map) this.material.map.dispose(); // gc previous texture
+        const texture = this.material.map = new Texture(canvas);
+        texture.minFilter = LinearFilter;
+        texture.needsUpdate = true;
+
+        const yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2;
+        this.scale.set(yScale * canvas.width / canvas.height, yScale, 0);
+    }
+
+    //鼠标拾取计算
+    raycast(raycaster: Raycaster, intersects: Intersection[]) {
+
+        let intersect: Intersection[] = [];
+        super.raycast(raycaster, intersect);
+        let inte = intersect[0];
+        if (inte && (inte.uv!.y > 0.55)) {
+            intersects.push(inte);
+        }
+
+    }
+
+    copy(source: SpriteText2) {
+        this.color = source.color;
+        this.backgroundColor = source.backgroundColor;
+        this.padding = source.padding;
+        this.borderWidth = source.borderWidth;
+        this.borderColor = source.borderColor;
+        this.fontFace = source.fontFace;
+        this.fontSize = source.fontSize;
+        this.fontWeight = source.fontWeight;
+        this.strokeWidth = source.strokeWidth;
+        this.strokeColor = source.strokeColor;
+        return this;
+    }
+}

package/lib/Text3D/Text3D.js

@@ -2,7 +2,7 @@
  * @Author: xiaosihan
  * @Date: 2022-06-14 09:48:00
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-04-04 19:26:36
+ * @Last Modified time: 2023-04-07 21:52:03
  */
 import { Mesh, MeshStandardMaterial, TextGeometry } from "three";
 import fontContorller from "./fontController";
@@ -53,6 +53,7 @@ export default class Text3D extends Mesh {
                         bevelSegments: this._config.bevelSegments, //斜角分段
                     });
                     this.geometry.center();
+                    this.dispatchEvent({ type: "loaded" });
                 }
             });
         }

package/lib/Text3D/Text3D.ts

@@ -2,7 +2,7 @@
  * @Author: xiaosihan
  * @Date: 2022-06-14 09:48:00
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-04-04 19:26:36
+ * @Last Modified time: 2023-04-07 21:52:03
  */
 
 import { Mesh, MeshStandardMaterial, TextGeometry } from "three";
@@ -80,6 +80,7 @@ export default class Text3D extends Mesh {
                         bevelSegments: this._config.bevelSegments,//斜角分段
                     });
                     this.geometry.center();
+                    this.dispatchEvent({ type: "loaded" });
                 }
             })
 

package/lib/Text3D/fontController.ts

@@ -6,7 +6,7 @@
  */
 
 import Dexie, { Table } from "dexie";
-import _, { filter, first, isEmpty } from "lodash";
+import { filter, first, isEmpty } from "lodash";
 import { Font } from "three";
 import threeUtils from "../threeUtils";
 import gentilisJSON from "./gentilis.json";

package/lib/ThreeBase.d.ts

@@ -1,4 +1,4 @@
-import { BufferGeometry, EventDispatcher, Object3D, PerspectiveCamera, Scene, Texture, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
+import { BufferGeometry, Camera, EventDispatcher, Object3D, Scene, Texture, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import ThreeMouse from "./ThreeMouse";
 import Transition from "./Transition";
@@ -10,7 +10,7 @@ export default class ThreeBase extends EventDispatcher {
     tempVector3: Vector3;
     size: Vector2;
     renderer: WebGLRenderer;
-    camera: PerspectiveCamera;
+    camera: Camera;
     scene: Scene;
     threeMouse: ThreeMouse;
     controls: OrbitControls;
@@ -42,7 +42,7 @@ export default class ThreeBase extends EventDispatcher {
     needRender: boolean;
     stopRender(): void;
     render(): void;
-    renderBindThis: any;
+    private renderBindThis;
     download(fileName?: string): void;
     private _preMesh;
     private _preRT;

package/lib/ThreeBase.js

@@ -2,7 +2,7 @@
  * @Author: xiaosihan
  * @Date: 2021-12-20 13:38:22
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-03-30 11:00:20
+ * @Last Modified time: 2023-05-09 01:11:17
  */
 import { round } from "lodash";
 import { AxesHelper, EventDispatcher, GridHelper, LinearFilter, Mesh, MOUSE, NoBlending, NormalBlending, PerspectiveCamera, RGBAFormat, Scene, TOUCH, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
@@ -13,6 +13,7 @@ import threeLoader from "./threeLoader";
 import ThreeMouse from "./ThreeMouse";
 import threeUtils from "./threeUtils";
 import Transition from "./Transition";
+import stroke_pass from "./stroke_pass/stroke_pass";
 // three.js 的基础对象
 export default class ThreeBase extends EventDispatcher {
     constructor() {
@@ -70,10 +71,8 @@ export default class ThreeBase extends EventDispatcher {
     // 设置 dom 容器
     async setContainer(div) {
         if (div) {
-            //删除这个容器里面的所有canvas
-            const canvas = div.getElementsByTagName("canvas");
-            for (let c of canvas)
-                c.remove();
+            div.style.overflow = "hidden";
+            div.innerHTML = "";
             div.append(this.renderer.domElement);
             // 如果上下文被销毁了,  就恢复上下文
             if (this.isRendererContextLost) {
@@ -91,8 +90,10 @@ export default class ThreeBase extends EventDispatcher {
     }
     // 修改尺寸
     setsize(width, height) {
-        this.camera.aspect = width / height;
-        this.camera.updateProjectionMatrix();
+        if (this.camera instanceof PerspectiveCamera) {
+            this.camera.aspect = width / height;
+            this.camera.updateProjectionMatrix();
+        }
         this.renderer.setPixelRatio(window.devicePixelRatio);
         this.renderer.setSize(width, height);
         this.size.set(width, height);
@@ -254,6 +255,12 @@ export default class ThreeBase extends EventDispatcher {
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" });
         this.renderer.render(this.scene, this.camera);
+        // 查找需要绘制描边的对象,并且绘制描边
+        this.scene.traverse(obj => {
+            if (obj.userData.stroke_enable) {
+                stroke_pass(this.renderer, this.camera, obj);
+            }
+        });
         this.dispatchEvent({ type: "afterRender" });
     }
     renderBindThis = this.render.bind(this);

package/lib/ThreeBase.ts

@@ -2,11 +2,11 @@
  * @Author: xiaosihan 
  * @Date: 2021-12-20 13:38:22 
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-03-30 11:00:20
+ * @Last Modified time: 2023-05-09 01:11:17
  */
 
 import { round } from "lodash";
-import { AxesHelper, BufferGeometry, EventDispatcher, GridHelper, LinearFilter, Mesh, MeshBasicMaterial, MOUSE, NoBlending, NormalBlending, Object3D, PerspectiveCamera, RGBAFormat, Scene, Texture, TOUCH, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
+import { AxesHelper, BufferGeometry, Camera, EventDispatcher, GridHelper, LinearFilter, Mesh, MeshBasicMaterial, MOUSE, NoBlending, NormalBlending, Object3D, PerspectiveCamera, RGBAFormat, Scene, Texture, TOUCH, 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";
@@ -14,6 +14,7 @@ import threeLoader from "./threeLoader";
 import ThreeMouse from "./ThreeMouse";
 import threeUtils from "./threeUtils";
 import Transition from "./Transition";
+import stroke_pass from "./stroke_pass/stroke_pass";
 
 // three.js 的基础对象
 export default class ThreeBase extends EventDispatcher {
@@ -58,7 +59,7 @@ export default class ThreeBase extends EventDispatcher {
     })();
 
     //透视相机
-    camera = new PerspectiveCamera(45, 1, 0.0001, 10000);
+    camera: Camera = new PerspectiveCamera(45, 1, 0.0001, 10000);
 
     // 场景对象
     scene = new Scene();
@@ -86,9 +87,8 @@ export default class ThreeBase extends EventDispatcher {
     // 设置 dom 容器
     async setContainer(div: HTMLDivElement | null) {
         if (div) {
-            //删除这个容器里面的所有canvas
-            const canvas = div.getElementsByTagName("canvas");
-            for (let c of canvas) c.remove();
+            div.style.overflow = "hidden";
+            div.innerHTML = "";
             div.append(this.renderer.domElement);
 
             // 如果上下文被销毁了,  就恢复上下文
@@ -110,8 +110,11 @@ export default class ThreeBase extends EventDispatcher {
 
     // 修改尺寸
     setsize(width: number, height: number) {
-        this.camera.aspect = width / height;
-        this.camera.updateProjectionMatrix();
+        if (this.camera instanceof PerspectiveCamera) {
+            this.camera.aspect = width / height;
+            this.camera.updateProjectionMatrix();
+        }
+
         this.renderer.setPixelRatio(window.devicePixelRatio);
         this.renderer.setSize(width, height);
         this.size.set(width, height);
@@ -305,10 +308,18 @@ export default class ThreeBase extends EventDispatcher {
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" });
         this.renderer.render(this.scene, this.camera);
+
+        // 查找需要绘制描边的对象,并且绘制描边
+        this.scene.traverse(obj => {
+            if (obj.userData.stroke_enable) {
+                stroke_pass(this.renderer, this.camera, obj);
+            }
+        });
+
         this.dispatchEvent({ type: "afterRender" });
     }
 
-    renderBindThis = this.render.bind(this);
+    private renderBindThis = this.render.bind(this);
 
     // 下载渲染图
     download(fileName: string = "download") {

package/lib/Transition.d.ts

@@ -23,9 +23,7 @@ export default class Transition {
     _: {
         [key: string]: number;
     };
-    onChangeCall?: (josn: {
-        [key: string]: number;
-    }) => void;
+    private onChangeCall;
     run({ timeTemp }: any): this;
     runbindThis: any;
     onChange(onChangeCall: (josn: {

package/lib/Transition.js

@@ -23,7 +23,7 @@ export default class Transition {
     constructor(param = {}, bezier = [0.8, 0, 0.2, 1], duration = 500) {
         this.setDuration(duration);
         this.setBezier(bezier);
-        this.set(param);
+        this.reset(param);
     }
     // 所有的 key 的枚举
     _keys = [];
@@ -57,7 +57,7 @@ export default class Transition {
     }
     // 存储 每个参数的 起始位置 起始时间 终止位置  终止时间
     _ = {};
-    onChangeCall;
+    onChangeCall = (josn) => { };
     // 执行过度动画
     run({ timeTemp }) {
         this.timeTemp = timeTemp;
@@ -73,7 +73,7 @@ export default class Transition {
     // 设置动画对象的回调事件
     onChange(onChangeCall) {
         this.onChangeCall = onChangeCall;
-        threeUtils.addEventListener("requestAnimationFrame", this.runbindThis);
+        this.onChangeCall(this.getJson());
         return this;
     }
     // 计算当前 key 的值
@@ -133,9 +133,9 @@ export default class Transition {
             // // 执行状态未完成
             // this._isDone = false;
         }
-        threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
-        threeUtils.addEventListener("requestAnimationFrame", this.runbindThis);
         if (!this._isDone) {
+            threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
+            threeUtils.addEventListener("requestAnimationFrame", this.runbindThis);
             await new Promise(resolve => setTimeout(resolve, this._duration + 50));
         }
         return this;
@@ -143,6 +143,9 @@ export default class Transition {
     // 重置起始和终止位置
     reset(param) {
         for (let key in param) {
+            if (!this._keys.includes(key)) {
+                this._keys.push(key);
+            }
             this._[key + "_start"] = param[key];
             this._[key + "_end"] = param[key];
             this._[key + "_startTime"] = -this._duration;

package/lib/Transition.ts

@@ -36,7 +36,7 @@ export default class Transition {
 
         this.setBezier(bezier);
 
-        this.set(param);
+        this.reset(param);
     }
 
     // 所有的 key 的枚举
@@ -82,7 +82,7 @@ export default class Transition {
     // 存储 每个参数的 起始位置 起始时间 终止位置  终止时间
     _: { [key: string]: number } = {};
 
-    onChangeCall?: (josn: { [key: string]: number }) => void;
+    private onChangeCall = (josn: { [key: string]: number }) => { };
 
     // 执行过度动画
     run({ timeTemp }: any) {
@@ -100,7 +100,7 @@ export default class Transition {
     // 设置动画对象的回调事件
     onChange(onChangeCall: (josn: { [key: string]: number }) => void): this {
         this.onChangeCall = onChangeCall;
-        threeUtils.addEventListener("requestAnimationFrame", this.runbindThis);
+        this.onChangeCall(this.getJson());
         return this;
     }
 
@@ -185,10 +185,9 @@ export default class Transition {
 
         }
 
-        threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
-        threeUtils.addEventListener("requestAnimationFrame", this.runbindThis);
-
         if (!this._isDone) {
+            threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
+            threeUtils.addEventListener("requestAnimationFrame", this.runbindThis);
             await new Promise(resolve => setTimeout(resolve, this._duration + 50));
         }
 
@@ -198,6 +197,11 @@ export default class Transition {
     reset(param: TParam): this {
 
         for (let key in param) {
+
+            if (!this._keys.includes(key)) {
+                this._keys.push(key);
+            }
+
             this._[key + "_start"] = param[key];
             this._[key + "_end"] = param[key];
             this._[key + "_startTime"] = -this._duration;

package/lib/planeModal1/PlaneModal1.d.ts

@@ -11,7 +11,6 @@ export type PlaneModal1Config = {
 };
 export default class PlaneModal1 extends Mesh {
     constructor(config?: PlaneModal1Config);
-    renderOrder: number;
     geometry: PlaneGeometry;
     material: MeshBasicMaterial;
     static img: HTMLImageElement;

package/lib/planeModal1/PlaneModal1.js

@@ -14,7 +14,6 @@ export default class PlaneModal1 extends Mesh {
         this.material.map = this.texture;
         this.scale.set(10, 10, 10);
     }
-    renderOrder = 99;
     geometry = new PlaneGeometry(1 * 0.65, 0.728 * 0.65, 1, 1);
     material = new MeshBasicMaterial({
         side: DoubleSide,
@@ -100,5 +99,6 @@ export default class PlaneModal1 extends Mesh {
             textPos.y += size;
         });
         this.texture.needsUpdate = true;
+        this.dispatchEvent({ type: "loaded" });
     }
 }

package/lib/planeModal1/PlaneModal1.ts

@@ -30,8 +30,6 @@ export default class PlaneModal1 extends Mesh {
         this.scale.set(10, 10, 10);
     }
 
-    renderOrder = 99;
-
     geometry = new PlaneGeometry(1 * 0.65, 0.728 * 0.65, 1, 1);
 
     material = new MeshBasicMaterial({
@@ -145,6 +143,7 @@ export default class PlaneModal1 extends Mesh {
 
         this.texture.needsUpdate = true;
 
+        this.dispatchEvent({ type: "loaded" });
     }
 
 

package/lib/spriteModal1/SpriteModal1.d.ts

@@ -11,7 +11,6 @@ export type SpritModal1Config = {
 };
 export default class SpritModal1 extends Sprite {
     constructor(config?: SpritModal1Config);
-    renderOrder: number;
     static img: HTMLImageElement;
     canvas: HTMLCanvasElement;
     context: CanvasRenderingContext2D;

package/lib/spriteModal1/SpriteModal1.js

@@ -15,7 +15,6 @@ export default class SpritModal1 extends Sprite {
         this.material.transparent = true;
         this.material.alphaTest = 0.01;
     }
-    renderOrder = 99;
     // 背景图
     static img = (() => {
         const img = new Image();
@@ -96,6 +95,7 @@ export default class SpritModal1 extends Sprite {
             textPos.y += size;
         });
         this.texture.needsUpdate = true;
+        this.dispatchEvent({ type: "loaded" });
     }
     //鼠标拾取计算
     raycast(raycaster, intersects) {

package/lib/spriteModal1/SpriteModal1.ts

@@ -34,8 +34,6 @@ export default class SpritModal1 extends Sprite {
         this.material.alphaTest = 0.01;
     }
 
-    renderOrder = 99;
-
     // 背景图
     static img = (() => {
         const img = new Image();
@@ -142,6 +140,7 @@ export default class SpritModal1 extends Sprite {
 
         this.texture.needsUpdate = true;
 
+        this.dispatchEvent({ type: "loaded" });
     }
 
     //鼠标拾取计算

package/lib/stroke_pass/FullScreenQuad.d.ts

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

package/lib/stroke_pass/FullScreenQuad.js

@@ -0,0 +1,25 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-05-09 01:36:35
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-05-09 01:47:07
+ */
+import { BufferGeometry, Float32BufferAttribute, Mesh, MeshBasicMaterial, OrthographicCamera, Scene } from "three";
+export default class FullScreenQuad extends Scene {
+    constructor() {
+        super();
+    }
+    mesh = (() => {
+        const geometry = new BufferGeometry();
+        geometry.setAttribute("position", new Float32BufferAttribute([-1, 3, 0, -1, -1, 0, 3, -1, 0], 3));
+        geometry.setAttribute("uv", new Float32BufferAttribute([0, 2, 0, 0, 2, 0], 2));
+        const mesh = new Mesh(geometry, new MeshBasicMaterial());
+        this.add(mesh);
+        return mesh;
+    })();
+    orthographicCamera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+    render(renderer, material) {
+        this.mesh.material = material;
+        renderer.render(this, this.orthographicCamera);
+    }
+}