three-base 2.0.1 → 2.0.2

package/Transition.ts

@@ -0,0 +1,268 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2021-04-10 02:44:01
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2022-06-22 19:44:23
+ */
+
+import threeUtils from "./threeUtils";
+
+function bezier(arr: [number, number, number, number], t: number) {
+    const ut = 1 - t;
+    const a1 = arr[1] * ut + arr[2] * t;
+    const result = ((arr[0] * ut + arr[1] * t) * ut + a1 * t) * ut + (a1 * ut + (arr[2] * ut + arr[3] * t) * t) * t;
+    return result;
+}
+
+interface TParam { [key: string]: number }
+
+// 过渡动画插件
+export default class Transition {
+
+    /**
+     *Creates an instance of transition.
+     * @param {{ [key: string]: number }} // 初始值
+     * @param {[0.8, 0, 0.2, 1]} // 贝塞尔曲线
+     * @param {number} [duration=1000]  // 过渡时间
+     * @memberof transition
+     */
+    constructor(
+        param: TParam = {},
+        bezier: [number, number, number, number] = [0.8, 0, 0.2, 1],
+        duration = 500
+    ) {
+
+        this.setDuration(duration);
+
+        this.setBezier(bezier);
+
+        this.reset(param);
+    }
+
+    // 所有的 key 的枚举
+    _keys: Array<string> = [];
+
+    // 贝塞尔曲线
+    _bezier: [number, number, number, number] = [0.8, 0, 0.2, 1];
+
+    // x轴贝塞尔
+    _Xbezier: [number, number, number, number] = [0, 0.8, 0.2, 1];
+
+    // y轴贝塞尔
+    _Ybezier: [number, number, number, number] = [0, 0, 1, 1];
+
+    setBezier(bezier: [number, number, number, number] = [0.8, 0, 0.2, 1]): this {
+        this._bezier = [...bezier];
+        this._Xbezier = [0, bezier[0], bezier[2], 1];
+        this._Ybezier = [0, bezier[1], bezier[3], 1];
+        return this;
+    }
+
+    // 当前时间戳
+    timeTemp = performance.now();
+
+    // 过渡时间
+    _duration = 0;
+
+    //延时
+    _delay = 0;
+
+    // 设置过渡时间
+    setDuration(duration = 500): this {
+        this._duration = duration;
+        return this;
+    }
+
+    // 设置延时
+    setDelay(delay = 0) {
+        this._delay = delay;
+        return this;
+    }
+
+    // 存储 每个参数的 起始位置 起始时间 终止位置  终止时间
+    _: { [key: string]: number } = {};
+
+    private onChangeCall = (josn: { [key: string]: number }) => { };
+
+    // 执行过度动画
+    run({ timeTemp }: any) {
+        this.timeTemp = timeTemp;
+        if (!this.onChangeCall || this.isDone()) {
+            threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
+        } else {
+            this.onChangeCall(this.getJson());
+        }
+        return this;
+    }
+
+    runbindThis = this.run.bind(this);
+
+    // 设置动画对象的回调事件
+    onChange(onChangeCall: (josn: { [key: string]: number }) => void): this {
+        this.onChangeCall = onChangeCall;
+        this.onChangeCall(this.getJson());
+        return this;
+    }
+
+    // 计算当前 key 的值
+    get(key: string | number): number {
+
+        key = String(key);
+
+        if (this._keys.includes(key) && this.timeTemp < (this._[key + "_startTime"] + this._duration)) {
+
+            let start = this._[key + "_start"];
+
+            let end = this._[key + "_end"];
+
+            let timeProgress = Math.min(1, Math.max(0, (this.timeTemp - this._[key + "_startTime"]) / this._duration));
+
+            // 斜率
+            let t = 0;
+
+            // 微分法 求斜率t
+            while (bezier(this._Xbezier, t + 0.1) < timeProgress) {
+                t += 0.1;
+            }
+            while (bezier(this._Xbezier, t + 0.01) < timeProgress) {
+                t += 0.01;
+            }
+            while (bezier(this._Xbezier, t + 0.001) < timeProgress) {
+                t += 0.001;
+            }
+
+            t = Math.min(1, Math.max(0, t))  // 斜率最大为1
+
+            // 通过斜率求y值
+            return (bezier(this._Ybezier, t) * (end - start)) + start;
+
+        } else if (this._keys.includes(key) && this.timeTemp >= (this._[key + "_startTime"] + this._duration)) {
+
+            return this._[key + "_end"];
+        }
+
+        // `没有 ${key} 的值`;
+        return 0;
+    }
+
+    async set(param: TParam): Promise<this> {
+
+        let timetemp = performance.now() + this._delay;;
+
+        for (let key in param) {
+
+            // 有就赋值
+            if (this._keys.includes(key) && Math.abs(param[key] - this._[key + "_end"]) > 0.001) {
+
+                this._[key + "_start"] = this.get(key);
+
+                this._[key + "_end"] = param[key];
+                // 起始时间
+                this._[key + "_startTime"] = timetemp;
+
+                // 执行状态未完成
+                this._isDone = false;
+
+                // 没有就添加一个
+            } else if (!this._keys.includes(key)) {
+
+                this._[key + "_start"] = param[key];
+
+                this._[key + "_end"] = param[key];
+                // 起始时间
+                this._[key + "_startTime"] = timetemp - this._duration;
+
+                // 执行状态未完成
+                this._isDone = false;
+            }
+
+            if (!this._keys.includes(key)) {
+                this._keys.push(key);
+            }
+
+            // // 执行状态未完成
+            // this._isDone = false;
+
+        }
+
+        if (!this._isDone) {
+            threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
+            threeUtils.addEventListener("requestAnimationFrame", this.runbindThis);
+            await new Promise(resolve => setTimeout(resolve, this._duration + 50));
+        }
+
+        return this;
+    }
+    // 重置起始和终止位置
+    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;
+        }
+
+        if (this.onChangeCall) {
+            this.onChangeCall(this.getJson());
+        }
+
+        this._isDone = true;
+        return this;
+    }
+
+    // 获取过渡对象上面的key
+    getKeys(): string[] {
+        return [...this._keys];
+    }
+
+    // 判断是否有这个参数
+    hasKey(key: string): boolean {
+        return this._keys.includes(key);
+    }
+
+    // 获取全部参数
+    getJson(): { [key: string]: number } {
+        let keys = this.getKeys();
+
+        let json: { [key: string]: number } = {};
+
+        keys.map(key => {
+            json[key] = this.get(key);
+        });
+        return json;
+    }
+
+    _isDone = false;
+
+    // 是否执行完成了
+    isDone(): boolean {
+
+        if (this._isDone) {
+            return true;
+        }
+
+        let isisDone = false;
+
+        for (let i in this._keys) {
+
+            isisDone = this._[this._keys[i] + "_startTime"] + this._duration < this.timeTemp;
+
+            // 只要有一个没有完成 都算没有完成 过渡
+            if (!isisDone) {
+                return false;
+            }
+        }
+
+        if (!this._isDone) {
+            this._isDone = true;
+            return false;
+        }
+
+        return true;
+    }
+}

package/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./ThreeBase";

package/keyContorls.d.ts

@@ -0,0 +1,25 @@
+import { Event, EventDispatcher, EventListener, Vector3 } from "three";
+/**
+ * 键盘 使用 ↑↓←→ 控制 x z 方向, 小键盘 1 0 控制 y 方向
+ *
+ * @class KeyContorls
+ * @extends {EventDispatcher}
+ */
+declare class KeyContorls extends EventDispatcher {
+    constructor();
+    uuid: string;
+    direction: Vector3;
+    add(e: any): void;
+    delete(e: any): void;
+    enter(e: any): void;
+    keyDown: (e: any) => void;
+    _listeners?: {
+        [key: string]: Array<any>;
+    };
+    removeEvent: import("lodash").DebouncedFunc<(type: string) => void>;
+    addEventListener<T extends string>(type: T, listener: EventListener<Event, T, this>): void;
+    addEvent(): void;
+    dispose(): void;
+}
+declare const keyContorls: KeyContorls;
+export default keyContorls;

package/keyContorls.js

@@ -0,0 +1,98 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-03-20 14:48:33
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2022-09-30 00:12:28
+ */
+import { throttle } from "lodash";
+import { EventDispatcher, Vector3 } from "three";
+import { generateUUID } from "three/src/math/MathUtils";
+/**
+ * 键盘 使用 ↑↓←→ 控制 x z 方向, 小键盘 1 0 控制 y 方向
+ *
+ * @class KeyContorls
+ * @extends {EventDispatcher}
+ */
+class KeyContorls extends EventDispatcher {
+    constructor() {
+        super();
+        this.addEvent();
+    }
+    uuid = generateUUID();
+    direction = new Vector3(0, 0, 0);
+    // 添加事件需要由外部实现
+    add(e) {
+        this.dispatchEvent({ ...e, type: "add" });
+    }
+    // 删除事件
+    delete(e) {
+        this.dispatchEvent({ ...e, type: "delete" });
+    }
+    // 回车按钮
+    enter(e) {
+        this.dispatchEvent({ ...e, type: "enter" });
+    }
+    keyDown = (e) => {
+        switch (e.keyCode) {
+            case 46: // 删除按钮
+                this.delete(e);
+                return;
+            case 13: // 回车按钮
+                this.enter(e);
+                return;
+            case 97: // 小键盘1
+                this.direction.set(0, 1, 0);
+                break;
+            case 96: // 小键盘0
+                this.direction.set(0, -1, 0);
+                break;
+            case 35: // 
+                this.direction.set(0, 0.001, 0);
+                break;
+            case 45:
+                this.direction.set(0, -0.001, 0);
+                break;
+            case 38: // 前
+                this.direction.set(0, 0, -1);
+                break;
+            case 37: // 后
+                this.direction.set(-1, 0, 0);
+                break;
+            case 40: // 左
+                this.direction.set(0, 0, 1);
+                break;
+            case 39: // 右
+                this.direction.set(1, 0, 0);
+                break;
+            default:
+                return;
+        }
+        if (e.shiftKey) {
+            this.direction.multiplyScalar(0.001);
+        }
+        if (e.ctrlKey) {
+            this.direction.multiplyScalar(0.1);
+        }
+        this.dispatchEvent({
+            type: "change",
+            direction: this.direction
+        });
+    };
+    _listeners;
+    // 节流 删除事件监听
+    removeEvent = throttle((type) => {
+        this._listeners = undefined;
+    }, 1000, { trailing: false });
+    addEventListener(type, listener) {
+        this.removeEvent(type);
+        super.addEventListener(type, listener);
+    }
+    addEvent() {
+        document.addEventListener("keydown", this.keyDown);
+    }
+    dispose() {
+        document.removeEventListener("keydown", this.keyDown);
+    }
+}
+const keyContorls = new KeyContorls();
+export default keyContorls;

package/keyContorls.ts

@@ -0,0 +1,127 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2022-03-20 14:48:33 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2022-09-30 00:12:28
+ */
+
+import { throttle } from "lodash";
+import { Event, EventDispatcher, EventListener, Vector3 } from "three";
+import { generateUUID } from "three/src/math/MathUtils";
+
+
+/**
+ * 键盘 使用 ↑↓←→ 控制 x z 方向, 小键盘 1 0 控制 y 方向
+ *
+ * @class KeyContorls
+ * @extends {EventDispatcher}
+ */
+class KeyContorls extends EventDispatcher {
+
+    constructor() {
+        super();
+        this.addEvent();
+    }
+
+    uuid = generateUUID();
+
+    direction = new Vector3(0, 0, 0);
+
+    // 添加事件需要由外部实现
+    add(e: any) {
+        this.dispatchEvent({ ...e, type: "add" });
+    }
+
+    // 删除事件
+    delete(e: any) {
+        this.dispatchEvent({ ...e, type: "delete" });
+    }
+
+    // 回车按钮
+    enter(e: any) {
+        this.dispatchEvent({ ...e, type: "enter" });
+    }
+
+    keyDown = (e: any) => {
+
+        switch (e.keyCode) {
+
+            case 46: // 删除按钮
+                this.delete(e);
+                return;
+
+            case 13: // 回车按钮
+                this.enter(e);
+                return;
+
+            case 97: // 小键盘1
+                this.direction.set(0, 1, 0);
+                break;
+            case 96: // 小键盘0
+                this.direction.set(0, -1, 0);
+                break;
+
+            case 35: // 
+                this.direction.set(0, 0.001, 0);
+                break;
+            case 45:
+                this.direction.set(0, -0.001, 0);
+                break;
+
+            case 38: // 前
+                this.direction.set(0, 0, -1);
+                break;
+            case 37: // 后
+                this.direction.set(-1, 0, 0);
+                break;
+            case 40: // 左
+                this.direction.set(0, 0, 1);
+                break;
+            case 39: // 右
+                this.direction.set(1, 0, 0);
+                break;
+
+            default:
+                return;
+        }
+
+        if (e.shiftKey) {
+            this.direction.multiplyScalar(0.001);
+        }
+
+        if (e.ctrlKey) {
+            this.direction.multiplyScalar(0.1);
+        }
+
+        this.dispatchEvent({
+            type: "change",
+            direction: this.direction
+        });
+
+    }
+
+    _listeners?: { [key: string]: Array<any> };
+
+    // 节流 删除事件监听
+    removeEvent = throttle((type: string) => {
+        this._listeners = undefined;
+    }, 1000, { trailing: false });
+
+    addEventListener<T extends string>(type: T, listener: EventListener<Event, T, this>): void {
+        this.removeEvent(type);
+        super.addEventListener(type, listener);
+    }
+
+    addEvent() {
+        document.addEventListener("keydown", this.keyDown);
+    }
+
+    dispose() {
+        document.removeEventListener("keydown", this.keyDown);
+    }
+
+}
+
+const keyContorls = new KeyContorls();
+
+export default keyContorls;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "three-base",
-    "version": "2.0.1",
+    "version": "2.0.2",
     "description": "three 3d three-base",
     "repository": {
         "type": "git",
@@ -15,25 +15,20 @@
     "module": "index.js",
     "types": "",
     "files": [
-        "index.js",
-        "index.ts",
-        "declare.d.ts",
-        "lib/*.js",
-        "lib/*.ts",
-        "lib/**/*.ts",
-        "lib/**/*.js",
-        "lib/**/*.tsx",
-        "lib/**/*.css",
-        "lib/**/*.jpg",
-        "lib/**/*.png",
-        "lib/**/*.jpeg",
-        "lib/**/*.svg",
-        "lib/**/*.obj",
-        "lib/**/*.gltf",
-        "lib/**/*.fbx",
-        "lib/**/*.glb",
-        "lib/**/*.json",
-        "lib/**/*.wasm"
+        "/**/*.ts",
+        "/**/*.js",
+        "/**/*.tsx",
+        "/**/*.css",
+        "/**/*.jpg",
+        "/**/*.png",
+        "/**/*.jpeg",
+        "/**/*.svg",
+        "/**/*.obj",
+        "/**/*.gltf",
+        "/**/*.fbx",
+        "/**/*.glb",
+        "/**/*.json",
+        "/**/*.wasm"
     ],
     "license": "ISC",
     "devDependencies": {},

package/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<import("three").NormalBufferAttributes>, Material>;
+    orthographicCamera: OrthographicCamera;
+    render(renderer: WebGLRenderer, material: Material): void;
+}

package/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);
+    }
+}

package/pass/FullScreenQuad.ts

@@ -0,0 +1,33 @@
+/*
+ * @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, Material, Mesh, MeshBasicMaterial, OrthographicCamera, Scene, WebGLRenderer } 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<BufferGeometry, Material>(geometry, new MeshBasicMaterial());
+        this.add(mesh);
+        return mesh;
+    })();
+
+    orthographicCamera = new OrthographicCamera(- 1, 1, 1, - 1, 0, 1);
+
+    render(renderer: WebGLRenderer, material: Material) {
+        this.mesh.material = material;
+        renderer.render(this, this.orthographicCamera);
+    }
+
+}

package/pass/stroke_pass.d.ts

@@ -0,0 +1,2 @@
+import { Camera, Object3D, WebGLRenderer } from "three";
+export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D): void;