three-base 0.0.1 → 1.0.2

package/lib/Transition.ts

@@ -0,0 +1,256 @@
+/*
+ * @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.set(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 } = {};
+
+    onChangeCall?: (josn: { [key: string]: number }) => void;
+
+    // 执行过度动画
+    run({ timeTemp }: any) {
+        this.timeTemp = timeTemp;
+        if (!this.onChangeCall || this.isDone()) {
+            threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
+        } else {
+            this.onChangeCall(this.getJson());
+        }
+    }
+
+    runbindThis = this.run.bind(this);
+
+    // 设置动画对象的回调事件
+    onChange(onChangeCall: (josn: { [key: string]: number }) => void): this {
+        this.onChangeCall = onChangeCall;
+        threeUtils.addEventListener("requestAnimationFrame", this.runbindThis);
+        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;
+    }
+
+    set(param: TParam): 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;
+
+        }
+        threeUtils.addEventListener("requestAnimationFrame", this.runbindThis);
+        return this;
+    }
+    // 重置起始和终止位置
+    reset(param: TParam): this {
+
+        for (let key in param) {
+            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/lib/draco/README.md

@@ -0,0 +1,32 @@
+# Draco 3D Data Compression
+
+Draco is an open-source library for compressing and decompressing 3D geometric meshes and point clouds. It is intended to improve the storage and transmission of 3D graphics.
+
+[Website](https://google.github.io/draco/) | [GitHub](https://github.com/google/draco)
+
+## Contents
+
+This folder contains three utilities:
+
+* `draco_decoder.js` — Emscripten-compiled decoder, compatible with any modern browser.
+* `draco_decoder.wasm` — WebAssembly decoder, compatible with newer browsers and devices.
+* `draco_wasm_wrapper.js` — JavaScript wrapper for the WASM decoder.
+
+Each file is provided in two variations:
+
+* **Default:** Latest stable builds, tracking the project's [master branch](https://github.com/google/draco).
+* **glTF:** Builds targeted by the [glTF mesh compression extension](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_draco_mesh_compression), tracking the [corresponding Draco branch](https://github.com/google/draco/tree/gltf_2.0_draco_extension).
+
+Either variation may be used with `THREE.DRACOLoader`:
+
+```js
+var dracoLoader = new THREE.DRACOLoader();
+dracoLoader.setDecoderPath('path/to/decoders/');
+dracoLoader.setDecoderConfig({type: 'js'}); // (Optional) Override detection of WASM support.
+```
+
+Further [documentation on GitHub](https://github.com/google/draco/tree/master/javascript/example#static-loading-javascript-decoder).
+
+## License
+
+[Apache License 2.0](https://github.com/google/draco/blob/master/LICENSE)