three-base 2.0.137 → 2.0.145

package/Transition.ts

@@ -0,0 +1,242 @@
+/*
+ * @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";
+
+export type TransitionParame = {
+    [key: string]: number;
+};
+
+function bezier(arr: number[], t: number): 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;
+}
+
+// 过渡动画插件
+export default class Transition<T extends TransitionParame, K extends Extract<keyof T, string> = Extract<keyof T, string>> {
+    /**
+     *Creates an instance of transition.
+     * @param {{ [key: string]: number }} // 初始值
+     * @param {[0.8, 0, 0.2, 1]} // 贝塞尔曲线
+     * @param {number} [duration=1000]  // 过渡时间
+     * @memberof transition
+     */
+    constructor(param: T, bezier: [number, number, number, number] = [0.8, 0, 0.2, 1], duration: number = 500) {
+        this.setDuration(duration);
+        this.setBezier(bezier);
+        this.reset(param);
+    }
+
+    // 所有的 key 的枚举
+    _keys: K[] = [];
+
+    // 贝塞尔曲线
+    _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: number = performance.now();
+
+    // 过渡时间
+    _duration: number = 0;
+
+    //延时
+    _delay: number = 0;
+
+    // 设置过渡时间
+    setDuration(duration: number = 500): this {
+        this._duration = duration;
+        return this;
+    }
+
+    // 设置延时
+    setDelay(delay: number = 0): this {
+        this._delay = delay;
+        return this;
+    }
+
+    // 存储 每个参数的 起始位置 起始时间 终止位置  终止时间
+    _: {
+        [key in `${K}_start` | `${K}_end` | `${K}_startTime`]: number;
+    } = {} as { [key in `${K}_start` | `${K}_end` | `${K}_startTime`]: number; };
+
+    // 数据改变的事件回调
+    private onChangeCall: (josn: T) => void = (josn) => { };
+
+    //结束的事件回调
+    private onDoneCall: (josn: T) => void = (josn) => { };
+
+    // 执行过度动画
+    run({ timeTemp }: { timeTemp: number }): this {
+        this.timeTemp = timeTemp;
+        this.onChangeCall(this.getJson());
+        if (this.isDone()) {
+            this.onDoneCall(this.getJson());
+            threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
+        }
+        return this;
+    }
+
+    runbindThis: ((event: { timeTemp: number; accumulate: number }) => void) = this.run.bind(this);
+
+    // 设置动画对象的回调事件
+    onChange(onChangeCall: (josn: T) => void): this {
+        this.onChangeCall = onChangeCall;
+        this.onChangeCall(this.getJson());
+        return this;
+    }
+
+    //设置动画对象的
+    onDone(onDoneCall: (josn: T) => void): this {
+        this.onDoneCall = onDoneCall;
+        return this;
+    }
+
+    // 计算当前 key 的值
+    get(key: K): T[K] {
+        const keyStr = String(key) as K;
+        if (this._keys.includes(keyStr) && this.timeTemp < (this._[`${keyStr}_startTime` as `${K}_startTime`] + this._duration)) {
+            let start = this._[`${keyStr}_start` as `${K}_start`];
+            let end = this._[`${keyStr}_end` as `${K}_end`];
+            let timeProgress = Math.min(1, Math.max(0, (this.timeTemp - this._[`${keyStr}_startTime` as `${K}_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;
+            }
+            while (bezier(this._Xbezier, t + 0.0001) < timeProgress) {
+                t += 0.0001;
+            }
+            t = Math.min(1, Math.max(0, t)); // 斜率最大为1
+            // 通过斜率求y值
+            return (bezier(this._Ybezier, t) * (end - start)) + start as T[K];
+        }
+        else if (this._keys.includes(keyStr) && this.timeTemp >= (this._[`${keyStr}_startTime` as `${K}_startTime`] + this._duration)) {
+            return this._[`${keyStr}_end` as `${K}_end`] as T[K];
+        }
+        // `没有 ${ key } 的值`;
+        return 0 as T[K];
+    }
+
+    async set(param: Partial<T>): Promise<this> {
+        let timetemp = performance.now() + this._delay;
+        for (let key in param) {
+            const keyStr = key as K;
+            // 有就赋值
+            if (this._keys.includes(keyStr) && Math.abs(param[key]! - this._[`${keyStr}_end` as `${K}_end`]) > 0.0001) {
+                this._[`${keyStr}_start` as `${K}_start`] = this.get(keyStr) as number;
+                this._[`${keyStr}_end` as `${K}_end`] = param[key]!;
+                // 起始时间
+                this._[`${keyStr}_startTime` as `${K}_startTime`] = timetemp;
+                // 执行状态未完成
+                this._isDone = false;
+                // 没有就添加一个
+            }
+            else if (!this._keys.includes(keyStr)) {
+                this._[`${keyStr}_start` as `${K}_start`] = param[key]!;
+                this._[`${keyStr}_end` as `${K}_end`] = param[key]!;
+                // 起始时间
+                this._[`${keyStr}_startTime` as `${K}_startTime`] = timetemp - this._duration;
+                // 执行状态未完成
+                this._isDone = false;
+            }
+            if (!this._keys.includes(keyStr)) {
+                this._keys.push(keyStr);
+            }
+            // // 执行状态未完成
+            // this._isDone = false;
+        }
+        if (!this._isDone) {
+            threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
+            threeUtils.addEventListener("requestAnimationFrame", this.runbindThis);
+            await new Promise(resolve => setTimeout(resolve, 50));
+            await new Promise(resolve => setTimeout(resolve, this._duration));
+        }
+        return this;
+    }
+
+    // 重置起始和终止位置
+    reset(param: Partial<T>): this {
+        for (let key in param) {
+            const keyStr = key as K;
+            if (!this._keys.includes(keyStr)) {
+                this._keys.push(keyStr);
+            }
+            this._[`${keyStr}_start` as `${K}_start`] = param[key]!;
+            this._[`${keyStr}_end` as `${K}_end`] = param[key]!;
+            this._[`${keyStr}_startTime` as `${K}_startTime`] = -this._duration;
+        }
+        if (this.onChangeCall) {
+            this.onChangeCall(this.getJson());
+            this.onDoneCall(this.getJson());
+        }
+        this._isDone = true;
+        return this;
+    }
+
+    // 获取过渡对象上面的key
+    getKeys(): K[] {
+        return [...this._keys];
+    }
+
+    // 判断是否有这个参数
+    hasKey(key: K): boolean {
+        return this._keys.includes(key);
+    }
+
+    // 获取全部参数
+    getJson(): T {
+        let keys = this.getKeys();
+        let json = {} as T;
+        keys.map(key => {
+            json[key] = this.get(key);
+        });
+        return json;
+    }
+
+    _isDone: boolean = false;
+
+    // 是否执行完成了
+    isDone(): boolean {
+        if (this._isDone) {
+            return true;
+        }
+        let isisDone = false;
+        for (let i in this._keys) {
+            isisDone = this._[`${this._keys[i]}_startTime` as `${K}_startTime`] + this._duration < this.timeTemp;
+            // 只要有一个没有完成 都算没有完成 过渡
+            if (!isisDone) {
+                return false;
+            }
+        }
+        if (!this._isDone) {
+            this._isDone = true;
+            return false;
+        }
+        return true;
+    }
+}

package/Water/Water.js

@@ -1,23 +1,41 @@
-import { PlaneGeometry, RepeatWrapping, TextureLoader, Vector3 } from 'three';
+import { LinearFilter, LinearMipmapLinearFilter, PlaneGeometry, RepeatWrapping, TextureLoader, Vector3 } from 'three';
 import { Water as THREEWater } from 'three/examples/jsm/objects/Water';
 import waternormalsJPG from "./waternormals.jpg";
 // 大海
 export default class Water extends THREEWater {
     constructor() {
         super(new PlaneGeometry(5000, 5000, 2, 2), {
+            // 反射 RT 保持 512：1024 会让水面每帧多一次 1024² 的整场景镜像重渲，
+            // 叠加 SSAA 后开销过大导致卡顿。水面摩尔纹已由下方法线贴图各向异性+mipmap 解决。
             textureWidth: 512,
             textureHeight: 512,
             sunDirection: new Vector3(),
             sunColor: 0xffffff,
             waterColor: 0x0077be,
             distortionScale: 3.7,
-            waterNormals: new TextureLoader().load(waternormalsJPG, texture => {
+            waterNormals: (() => {
+                const texture = new TextureLoader().load(waternormalsJPG);
                 texture.wrapS = texture.wrapT = RepeatWrapping;
-            }),
+                // 各向异性 + mipmap：消除水面法线贴图在远处平铺产生的摩尔纹
+                // （SSAA 已对水面着色做超采样，这里再补法线贴图自身的过滤，双保险）
+                texture.anisotropy = 16;
+                texture.generateMipmaps = true;
+                texture.minFilter = LinearMipmapLinearFilter;
+                return texture;
+            })(),
         });
         this.rotation.x = -Math.PI / 2;
         this.material.uniforms.size.value = 0.2;
         this.material.needsUpdate = true;
+        // 反射 RT 默认无 mipmap（minFilter=LinearFilter），在大水面上被缩小时产生摩尔纹，
+        // 且这种"渲染目标类摩尔纹"纹理层各向异性管不到。这里给反射贴图（material.uniforms.mirrorSampler
+        // 即 three Water.js 内部反射 RT 的 texture）开启 generateMipmaps + 三线性 + 各向异性，
+        // three 会在每帧反射渲染后自动重算 mipmap（512² 成本极低），不开 SSAA 也能压住水面摩尔纹。
+        const reflectionTexture = this.material.uniforms['mirrorSampler'].value;
+        reflectionTexture.generateMipmaps = true;
+        reflectionTexture.minFilter = LinearMipmapLinearFilter;
+        reflectionTexture.magFilter = LinearFilter;
+        reflectionTexture.anisotropy = 16;
     }
     updateMatrix() {
         super.updateMatrix();

package/Water/Water.ts

@@ -0,0 +1,45 @@
+import { LinearFilter, LinearMipmapLinearFilter, PlaneGeometry, RepeatWrapping, Texture, TextureLoader, Vector3 } from 'three';
+import { Water as THREEWater } from 'three/examples/jsm/objects/Water';
+import waternormalsJPG from "./waternormals.jpg";
+// 大海
+export default class Water extends THREEWater {
+    constructor() {
+        super(new PlaneGeometry(5000, 5000, 2, 2), {
+            // 反射 RT 保持 512：1024 会让水面每帧多一次 1024² 的整场景镜像重渲，
+            // 叠加 SSAA 后开销过大导致卡顿。水面摩尔纹已由下方法线贴图各向异性+mipmap 解决。
+            textureWidth: 512,
+            textureHeight: 512,
+            sunDirection: new Vector3(),
+            sunColor: 0xffffff,
+            waterColor: 0x0077be,
+            distortionScale: 3.7,
+            waterNormals: (() => {
+                const texture = new TextureLoader().load(waternormalsJPG);
+                texture.wrapS = texture.wrapT = RepeatWrapping;
+                // 各向异性 + mipmap：消除水面法线贴图在远处平铺产生的摩尔纹
+                // （SSAA 已对水面着色做超采样，这里再补法线贴图自身的过滤，双保险）
+                texture.anisotropy = 16;
+                texture.generateMipmaps = true;
+                texture.minFilter = LinearMipmapLinearFilter;
+                return texture;
+            })(),
+        });
+        this.rotation.x = -Math.PI / 2;
+        this.material.uniforms.size.value = 0.2;
+        this.material.needsUpdate = true;
+
+        // 反射 RT 默认无 mipmap（minFilter=LinearFilter），在大水面上被缩小时产生摩尔纹，
+        // 且这种"渲染目标类摩尔纹"纹理层各向异性管不到。这里给反射贴图（material.uniforms.mirrorSampler
+        // 即 three Water.js 内部反射 RT 的 texture）开启 generateMipmaps + 三线性 + 各向异性，
+        // three 会在每帧反射渲染后自动重算 mipmap（512² 成本极低），不开 SSAA 也能压住水面摩尔纹。
+        const reflectionTexture = this.material.uniforms['mirrorSampler'].value as Texture;
+        reflectionTexture.generateMipmaps = true;
+        reflectionTexture.minFilter = LinearMipmapLinearFilter;
+        reflectionTexture.magFilter = LinearFilter;
+        reflectionTexture.anisotropy = 16;
+    }
+    updateMatrix(): void {
+        super.updateMatrix();
+        this.material.uniforms['time'].value -= 1.0 / 20.0;
+    }
+}

package/Water/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Water";
+export * from "./Water";

package/Water/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Water";
+export * from "./Water";

package/Water/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Water";
+export * from "./Water";

package/WaterFlow/FloatingDuck.d.ts

@@ -0,0 +1,88 @@
+/** 水面采样结果（由 ShallowWaterSurface.sampleSurface 回填，供浮力/倾斜计算读高度与坡度）。 */
+interface DuckSurfaceSample {
+    height?: number;
+    velocityY?: number;
+    slopeX?: number;
+    slopeZ?: number;
+    flowX?: number;
+    flowZ?: number;
+    impact?: number;
+}
+/** 构造选项。 */
+export interface FloatingDuckOptions {
+    basinMinX: number;
+    basinMaxX: number;
+    basinHalfZ: number;
+    waterY: number;
+    startX?: number;
+    startZ?: number;
+}
+/** setEnvironment / clampToBounds 用的环境口径。 */
+export interface DuckEnvironment {
+    minX: number;
+    maxX: number;
+    halfZ: number;
+    centerZ?: number;
+    waterY: number;
+}
+/** update 的可调项。 */
+export interface DuckUpdateOptions {
+    surface?: DuckSurfaceSampler | null;
+    impactX?: number;
+    impactZ?: number;
+    impactEnergy?: number;
+    emitting?: boolean;
+}
+/** 只取 update 真正用到的水面能力（避免与 ShallowWaterSurface 形成类型环）。 */
+interface DuckSurfaceSampler {
+    sampleSurface(worldX: number, worldZ: number, target?: DuckSurfaceSample): DuckSurfaceSample;
+}
+/** 漂浮的橡皮鸭：跟随水面高度/坡度做浮沉与倾斜，可被鼠标拖拽。 */
+export declare class FloatingDuck {
+    private readonly bounds;
+    /** 静水面高度；setEnvironment 会随容器变化更新（故非 readonly）。 */
+    private waterY;
+    private readonly start;
+    private readonly velocity;
+    private readonly surfaceSample;
+    private yaw;
+    private yawVelocity;
+    private pitch;
+    private roll;
+    private readonly radiusX;
+    private readonly radiusZ;
+    private active;
+    private dragging;
+    private readonly dragOffset;
+    private readonly dragVelocity;
+    private readonly lastDragPosition;
+    private readonly group;
+    private readonly model;
+    private readonly pickGeometry;
+    private readonly pickMaterial;
+    private readonly pickMesh;
+    private readonly yellowMaterial;
+    private readonly wingMaterial;
+    private readonly beakMaterial;
+    private readonly eyeMaterial;
+    private readonly highlightMaterial;
+    private readonly sphereGeometry;
+    private readonly body;
+    private readonly head;
+    private readonly beak;
+    private readonly tailGeometry;
+    private readonly tail;
+    constructor({ basinMinX, basinMaxX, basinHalfZ, waterY, startX, startZ, }: FloatingDuckOptions);
+    setActive(active: boolean): void;
+    setEnvironment({ minX, maxX, halfZ, centerZ, waterY }: DuckEnvironment, reposition?: boolean): void;
+    place(x: number, z: number): void;
+    translateContainer(deltaX: number, deltaZ: number): void;
+    beginDrag(worldX: number, worldZ: number): void;
+    dragTo(worldX: number, worldZ: number, deltaSeconds: number): void;
+    endDrag(): void;
+    clampToBounds(): void;
+    reset(): void;
+    update(delta: number, elapsed: number, { surface, impactX, impactZ, impactEnergy, emitting, }?: DuckUpdateOptions): void;
+    dispose(): void;
+}
+export {};