three-base 2.0.108 → 2.0.109

package/FPScontrol.d.ts

@@ -16,7 +16,8 @@ export default class FPScontrol extends EventDispatcher {
     STEPS_PER_FRAME: number;
     speed: number;
     camera: Camera;
-    worldOctree: Octree;
+    octrees: Array<Octree>;
+    addOctree(obj: Object3D): void;
     playerCollider: Capsule;
     clock: Clock;
     playerVelocity: Vector3;
@@ -33,7 +34,6 @@ export default class FPScontrol extends EventDispatcher {
     mousedown: () => void;
     mouseup: () => void;
     mousemove: (event: MouseEvent) => void;
-    fromGraphNode(object3d: Object3D): void;
     getForwardVector: () => Vector3;
     getSideVector: () => Vector3;
     controls: (deltaTime: number) => void;

package/FPScontrol.js

@@ -2,7 +2,7 @@
  * @Author: xiaosihan
  * @Date: 2022-05-04 23:01:36
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2022-06-06 13:32:08
+ * @Last Modified time: 2024-11-07 21:57:39
  */
 import { Clock, EventDispatcher, Vector3 } from "three";
 import { Capsule } from "three/examples/jsm/math/Capsule";
@@ -21,7 +21,7 @@ export default class FPScontrol extends EventDispatcher {
         super();
         // 相机对象
         this.camera = camera;
-        this.camera.rotation.order = 'YXZ';
+        this.camera.rotation.order = "YXZ";
         this.canvas = canvas;
         this.init(canvas);
     }
@@ -31,8 +31,13 @@ export default class FPScontrol extends EventDispatcher {
     STEPS_PER_FRAME = 5; // 每帧碰撞计算的次数
     speed = 1; // 速度
     camera;
-    // 世界八叉树对象
-    worldOctree = new Octree();
+    // 八叉树数组
+    octrees = [];
+    addOctree(obj) {
+        const octree = new Octree();
+        octree.fromGraphNode(obj);
+        this.octrees.push(octree);
+    }
     // 用户自己的碰撞体积
     playerCollider = new Capsule(new Vector3(0, 0.35, 0), new Vector3(0, 1, 0), 0.35);
     // 时钟对象
@@ -45,11 +50,11 @@ export default class FPScontrol extends EventDispatcher {
     keyStates = {};
     init(canvas) {
         this.playerCollider.end.set(0, 1, 0);
-        document.addEventListener('keydown', this.keydown);
-        document.addEventListener('keyup', this.keyup);
-        canvas.addEventListener('pointerdown', this.mousedown);
-        document.addEventListener('pointerup', this.mouseup);
-        document.body.addEventListener('pointermove', this.mousemove);
+        document.addEventListener("keydown", this.keydown);
+        document.addEventListener("keyup", this.keyup);
+        canvas.addEventListener("pointerdown", this.mousedown);
+        document.addEventListener("pointerup", this.mouseup);
+        document.body.addEventListener("pointermove", this.mousemove);
         this.enable = true;
     }
     keydown = (event) => {
@@ -71,10 +76,6 @@ export default class FPScontrol extends EventDispatcher {
             this.camera.rotation.x -= event.movementY / 500;
         }
     };
-    // 设置 八叉树 节点
-    fromGraphNode(object3d) {
-        this.worldOctree.fromGraphNode(object3d);
-    }
     // 获取前进的向量
     getForwardVector = () => {
         this.camera.getWorldDirection(this.playerDirection);
@@ -93,20 +94,20 @@ export default class FPScontrol extends EventDispatcher {
     // 玩家移动控制器
     controls = (deltaTime) => {
         const speedDelta = deltaTime * (this.playerOnFloor ? 25 : 8) * this.speed;
-        if (this.keyStates['KeyW']) {
+        if (this.keyStates["KeyW"]) {
             this.playerVelocity.add(this.getForwardVector().multiplyScalar(speedDelta));
         }
-        if (this.keyStates['KeyS']) {
+        if (this.keyStates["KeyS"]) {
             this.playerVelocity.add(this.getForwardVector().multiplyScalar(-speedDelta));
         }
-        if (this.keyStates['KeyA']) {
+        if (this.keyStates["KeyA"]) {
             this.playerVelocity.add(this.getSideVector().multiplyScalar(-speedDelta));
         }
-        if (this.keyStates['KeyD']) {
+        if (this.keyStates["KeyD"]) {
             this.playerVelocity.add(this.getSideVector().multiplyScalar(speedDelta));
         }
         if (this.playerOnFloor) {
-            if (this.keyStates['Space']) {
+            if (this.keyStates["Space"]) {
                 this.playerVelocity.y = 15;
             }
         }
@@ -128,14 +129,16 @@ export default class FPScontrol extends EventDispatcher {
     };
     // 玩家的碰撞检测
     playerCollisions() {
-        const result = this.worldOctree.capsuleIntersect(this.playerCollider);
-        this.playerOnFloor = false;
-        if (result) {
-            this.playerOnFloor = result.normal.y > 0;
-            if (!this.playerOnFloor) {
-                this.playerVelocity.addScaledVector(result.normal, -result.normal.dot(this.playerVelocity));
+        for (let octree of this.octrees) {
+            const result = octree.capsuleIntersect(this.playerCollider);
+            this.playerOnFloor = false;
+            if (result) {
+                this.playerOnFloor = result.normal.y > 0;
+                if (!this.playerOnFloor) {
+                    this.playerVelocity.addScaledVector(result.normal, -result.normal.dot(this.playerVelocity));
+                }
+                this.playerCollider.translate(result.normal.multiplyScalar(result.depth));
             }
-            this.playerCollider.translate(result.normal.multiplyScalar(result.depth));
         }
     }
     // 更新控制器的位置
@@ -162,10 +165,10 @@ export default class FPScontrol extends EventDispatcher {
     // 销毁事件
     disposer() {
         this.enable = false;
-        document.removeEventListener('keydown', this.keydown);
-        document.removeEventListener('keyup', this.keyup);
-        this.canvas.removeEventListener('pointerdown', this.mousedown);
-        document.removeEventListener('pointerup', this.mouseup);
-        document.body.removeEventListener('pointermove', this.mousemove);
+        document.removeEventListener("keydown", this.keydown);
+        document.removeEventListener("keyup", this.keyup);
+        this.canvas.removeEventListener("pointerdown", this.mousedown);
+        document.removeEventListener("pointerup", this.mouseup);
+        document.body.removeEventListener("pointermove", this.mousemove);
     }
 }

package/Fire/FireMaterial.js

@@ -79,5 +79,5 @@ export default class FireMaterial extends ShaderMaterial {
     depthTest = true;
     depthWrite = false;
     transparent = true;
-    fog = true;
+    fog = false;
 }

package/InstancedMeshBase.d.ts

@@ -18,7 +18,7 @@ export default class InstancedMeshBase extends MeshBase {
     instanceColor: InstancedBufferAttribute;
     reset(...object: Object3D[]): this;
     loadModel(url: string | File | Array<File>, filename?: string): Promise<void>;
-    computeBoundingSphere: import("lodash").DebouncedFunc<() => void>;
+    computeBoundingSphere: import("lodash").DebouncedFuncLeading<() => void>;
     setCount(count?: number): Promise<void>;
     setMatrixAt(index: number, matrix?: Matrix4): Promise<void>;
     setTRS(index: number, { position, rotation, scale, }: {

package/PipeMesh/PathGeometry.d.ts

@@ -0,0 +1,44 @@
+import { Usage } from 'three/src/constants.js';
+import type { PathPointList } from './PathPointList.js';
+import { BufferGeometry } from 'three/src/core/BufferGeometry.js';
+export interface Options {
+    radius?: number;
+    width?: number;
+    progress?: number;
+    radialSegments?: number;
+    startRad?: number;
+    arrow?: boolean;
+    side?: 'both' | 'left' | 'right';
+}
+export interface PathGeometryParam {
+    pathPointList: PathPointList;
+    options: Options;
+    usage: Usage;
+    transparent: boolean;
+}
+/**
+ * PathGeometry
+ */
+declare class PathGeometry extends BufferGeometry {
+    /**
+     * @param {Object|Number} initData - If initData is number, geometry init by empty data and set it as the max vertex. If initData is Object, it contains pathPointList and options.
+     * @param {Boolean} [generateUv2=false]
+     */
+    constructor(initData: PathGeometryParam, generateUv2?: boolean);
+    _initByMaxVertex(maxVertex: number, generateUv2: boolean): void;
+    _initByData(pathPointList: PathPointList, options: Options, usage: Usage, generateUv2: boolean): void;
+    /**
+     * Update geometry by PathPointList instance
+     * @param {PathPointList} pathPointList
+     * @param {Object} options
+     * @param {Number} [options.width=0.1]
+     * @param {Number} [options.progress=1]
+     * @param {Boolean} [options.arrow=true]
+     * @param {String} [options.side='both'] - "left"/"right"/"both"
+     */
+    update(pathPointList: PathPointList, options: Options): void;
+    _resizeAttribute(name: string, len: number): void;
+    _resizeIndex(len: number): void;
+    _updateAttributes(position: Array<number>, normal: Array<number>, uv: Array<number>, uv2: Array<number> | null, indices: Array<number>): void;
+}
+export { PathGeometry };

package/PipeMesh/PathGeometry.js

@@ -0,0 +1,300 @@
+import { DynamicDrawUsage, StaticDrawUsage } from 'three/src/constants.js';
+import { PathPoint } from './PathPoint.js';
+import { BufferGeometry } from 'three/src/core/BufferGeometry.js';
+import { BufferAttribute } from 'three/src/core/BufferAttribute.js';
+import { Vector3 } from 'three/src/math/Vector3.js';
+/**
+ * PathGeometry
+ */
+class PathGeometry extends BufferGeometry {
+    /**
+     * @param {Object|Number} initData - If initData is number, geometry init by empty data and set it as the max vertex. If initData is Object, it contains pathPointList and options.
+     * @param {Boolean} [generateUv2=false]
+     */
+    constructor(initData, generateUv2 = false) {
+        super();
+        this._initByData(initData.pathPointList, initData.options, initData.usage, generateUv2);
+    }
+    _initByMaxVertex(maxVertex, generateUv2) {
+        this.setAttribute('position', new BufferAttribute(new Float32Array(maxVertex * 3), 3).setUsage(DynamicDrawUsage));
+        this.setAttribute('normal', new BufferAttribute(new Float32Array(maxVertex * 3), 3).setUsage(DynamicDrawUsage));
+        this.setAttribute('uv', new BufferAttribute(new Float32Array(maxVertex * 2), 2).setUsage(DynamicDrawUsage));
+        if (generateUv2) {
+            this.setAttribute('uv2', new BufferAttribute(new Float32Array(maxVertex * 2), 2).setUsage(DynamicDrawUsage));
+        }
+        this.drawRange.start = 0;
+        this.drawRange.count = 0;
+        this.setIndex(new Array(maxVertex * 3));
+    }
+    _initByData(pathPointList, options, usage, generateUv2) {
+        const vertexData = generatePathVertexData(pathPointList, options, generateUv2);
+        if (vertexData && vertexData.count !== 0) {
+            this.setAttribute('position', new BufferAttribute(new Float32Array(vertexData.position), 3).setUsage(usage || StaticDrawUsage));
+            this.setAttribute('normal', new BufferAttribute(new Float32Array(vertexData.normal), 3).setUsage(usage || StaticDrawUsage));
+            this.setAttribute('uv', new BufferAttribute(new Float32Array(vertexData.uv), 2).setUsage(usage || StaticDrawUsage));
+            if (generateUv2) {
+                this.setAttribute('uv2', new BufferAttribute(new Float32Array(vertexData.uv2), 2).setUsage(usage || StaticDrawUsage));
+            }
+            this.setIndex(vertexData.indices);
+        }
+        else {
+            this._initByMaxVertex(2, generateUv2);
+        }
+    }
+    /**
+     * Update geometry by PathPointList instance
+     * @param {PathPointList} pathPointList
+     * @param {Object} options
+     * @param {Number} [options.width=0.1]
+     * @param {Number} [options.progress=1]
+     * @param {Boolean} [options.arrow=true]
+     * @param {String} [options.side='both'] - "left"/"right"/"both"
+     */
+    update(pathPointList, options) {
+        const generateUv2 = !!this.getAttribute('uv2');
+        const vertexData = generatePathVertexData(pathPointList, options, generateUv2);
+        if (vertexData) {
+            this._updateAttributes(vertexData.position, vertexData.normal, vertexData.uv, generateUv2 ? vertexData.uv2 : null, vertexData.indices);
+            this.drawRange.count = vertexData.count;
+        }
+        else {
+            this.drawRange.count = 0;
+        }
+    }
+    _resizeAttribute(name, len) {
+        let attribute = this.getAttribute(name);
+        while (attribute.array.length < len) {
+            const oldLength = attribute.array.length;
+            const newAttribute = new BufferAttribute(new Float32Array(oldLength * 2), attribute.itemSize, attribute.normalized);
+            newAttribute.name = attribute.name;
+            newAttribute.usage = attribute.usage;
+            this.setAttribute(name, newAttribute);
+            attribute = newAttribute;
+        }
+    }
+    _resizeIndex(len) {
+        let index = this.getIndex();
+        while (index.array.length < len) {
+            const oldLength = index.array.length;
+            const newIndex = new BufferAttribute(oldLength * 2 > 65535 ? new Uint32Array(oldLength * 2) : new Uint16Array(oldLength * 2), 1);
+            newIndex.name = index.name;
+            newIndex.usage = index.usage;
+            this.setIndex(newIndex);
+            index = newIndex;
+        }
+    }
+    _updateAttributes(position, normal, uv, uv2, indices) {
+        this._resizeAttribute('position', position.length);
+        const positionAttribute = this.getAttribute('position');
+        positionAttribute.array.set(position, 0);
+        positionAttribute.updateRange.count = position.length;
+        positionAttribute.needsUpdate = true;
+        this._resizeAttribute('normal', normal.length);
+        const normalAttribute = this.getAttribute('normal');
+        normalAttribute.array.set(normal, 0);
+        normalAttribute.updateRange.count = normal.length;
+        normalAttribute.needsUpdate = true;
+        this._resizeAttribute('uv', uv.length);
+        const uvAttribute = this.getAttribute('uv');
+        uvAttribute.array.set(uv, 0);
+        uvAttribute.updateRange.count = uv.length;
+        uvAttribute.needsUpdate = true;
+        if (uv2) {
+            this._resizeAttribute('uv2', uv2.length);
+            const uv2Attribute = this.getAttribute('uv2');
+            uv2Attribute.array.set(uv2, 0);
+            uv2Attribute.updateRange.count = uv2.length;
+            uv2Attribute.needsUpdate = true;
+        }
+        this._resizeIndex(indices.length);
+        const indexAttribute = this.getIndex();
+        indexAttribute.set(indices, 0);
+        indexAttribute.updateRange.count = indices.length;
+        indexAttribute.needsUpdate = true;
+    }
+}
+export { PathGeometry };
+// Vertex Data Generate Functions
+function generatePathVertexData(pathPointList, options, generateUv2 = false) {
+    const width = options.width || 0.1;
+    const progress = options.progress !== undefined ? options.progress : 1;
+    const arrow = options.arrow !== undefined ? options.arrow : true;
+    const side = options.side !== undefined ? options.side : 'both';
+    const halfWidth = width / 2;
+    const sideWidth = side !== 'both' ? width / 2 : width;
+    const totalDistance = pathPointList.distance();
+    const progressDistance = progress * totalDistance;
+    if (totalDistance == 0) {
+        return null;
+    }
+    const sharpUvOffset = halfWidth / sideWidth;
+    const sharpUvOffset2 = halfWidth / totalDistance;
+    let count = 0;
+    // modify data
+    const position = [];
+    const normal = [];
+    const uv = [];
+    const uv2 = [];
+    const indices = [];
+    let verticesCount = 0;
+    const right = new Vector3();
+    const left = new Vector3();
+    // for sharp corners
+    const leftOffset = new Vector3();
+    const rightOffset = new Vector3();
+    const tempPoint1 = new Vector3();
+    const tempPoint2 = new Vector3();
+    function addVertices(pathPoint) {
+        const first = position.length === 0;
+        const sharpCorner = pathPoint.sharp && !first;
+        const uvDist = pathPoint.dist / sideWidth;
+        const uvDist2 = pathPoint.dist / totalDistance;
+        const dir = pathPoint.dir;
+        const up = pathPoint.up;
+        const _right = pathPoint.right;
+        if (side !== 'left') {
+            right.copy(_right).multiplyScalar(halfWidth * pathPoint.widthScale);
+        }
+        else {
+            right.set(0, 0, 0);
+        }
+        if (side !== 'right') {
+            left.copy(_right).multiplyScalar(-halfWidth * pathPoint.widthScale);
+        }
+        else {
+            left.set(0, 0, 0);
+        }
+        right.add(pathPoint.pos);
+        left.add(pathPoint.pos);
+        if (sharpCorner) {
+            leftOffset.fromArray(position, position.length - 6).sub(left);
+            rightOffset.fromArray(position, position.length - 3).sub(right);
+            const leftDist = leftOffset.length();
+            const rightDist = rightOffset.length();
+            const sideOffset = leftDist - rightDist;
+            let longerOffset, longEdge;
+            if (sideOffset > 0) {
+                longerOffset = leftOffset;
+                longEdge = left;
+            }
+            else {
+                longerOffset = rightOffset;
+                longEdge = right;
+            }
+            tempPoint1.copy(longerOffset).setLength(Math.abs(sideOffset)).add(longEdge);
+            let _cos = tempPoint2.copy(longEdge).sub(tempPoint1).normalize().dot(dir);
+            let _len = tempPoint2.copy(longEdge).sub(tempPoint1).length();
+            let _dist = _cos * _len * 2;
+            tempPoint2.copy(dir).setLength(_dist).add(tempPoint1);
+            if (sideOffset > 0) {
+                position.push(tempPoint1.x, tempPoint1.y, tempPoint1.z, // 6
+                right.x, right.y, right.z, // 5
+                left.x, left.y, left.z, // 4
+                right.x, right.y, right.z, // 3
+                tempPoint2.x, tempPoint2.y, tempPoint2.z, // 2
+                right.x, right.y, right.z // 1
+                );
+                verticesCount += 6;
+                indices.push(verticesCount - 6, verticesCount - 8, verticesCount - 7, verticesCount - 6, verticesCount - 7, verticesCount - 5, verticesCount - 4, verticesCount - 6, verticesCount - 5, verticesCount - 2, verticesCount - 4, verticesCount - 1);
+                count += 12;
+            }
+            else {
+                position.push(left.x, left.y, left.z, // 6
+                tempPoint1.x, tempPoint1.y, tempPoint1.z, // 5
+                left.x, left.y, left.z, // 4
+                right.x, right.y, right.z, // 3
+                left.x, left.y, left.z, // 2
+                tempPoint2.x, tempPoint2.y, tempPoint2.z // 1
+                );
+                verticesCount += 6;
+                indices.push(verticesCount - 6, verticesCount - 8, verticesCount - 7, verticesCount - 6, verticesCount - 7, verticesCount - 5, verticesCount - 6, verticesCount - 5, verticesCount - 3, verticesCount - 2, verticesCount - 3, verticesCount - 1);
+                count += 12;
+            }
+            normal.push(up.x, up.y, up.z, up.x, up.y, up.z, up.x, up.y, up.z, up.x, up.y, up.z, up.x, up.y, up.z, up.x, up.y, up.z);
+            uv.push(uvDist - sharpUvOffset, 0, uvDist - sharpUvOffset, 1, uvDist, 0, uvDist, 1, uvDist + sharpUvOffset, 0, uvDist + sharpUvOffset, 1);
+            if (generateUv2) {
+                uv2.push(uvDist2 - sharpUvOffset2, 0, uvDist2 - sharpUvOffset2, 1, uvDist2, 0, uvDist2, 1, uvDist2 + sharpUvOffset2, 0, uvDist2 + sharpUvOffset2, 1);
+            }
+        }
+        else {
+            position.push(left.x, left.y, left.z, right.x, right.y, right.z);
+            normal.push(up.x, up.y, up.z, up.x, up.y, up.z);
+            uv.push(uvDist, 0, uvDist, 1);
+            if (generateUv2) {
+                uv2.push(uvDist2, 0, uvDist2, 1);
+            }
+            verticesCount += 2;
+            if (!first) {
+                indices.push(verticesCount - 2, verticesCount - 4, verticesCount - 3, verticesCount - 2, verticesCount - 3, verticesCount - 1);
+                count += 6;
+            }
+        }
+    }
+    const sharp = new Vector3();
+    function addStart(pathPoint) {
+        const dir = pathPoint.dir;
+        const up = pathPoint.up;
+        const _right = pathPoint.right;
+        const uvDist = pathPoint.dist / sideWidth;
+        const uvDist2 = pathPoint.dist / totalDistance;
+        if (side !== 'left') {
+            right.copy(_right).multiplyScalar(halfWidth * 2);
+        }
+        else {
+            right.set(0, 0, 0);
+        }
+        if (side !== 'right') {
+            left.copy(_right).multiplyScalar(-halfWidth * 2);
+        }
+        else {
+            left.set(0, 0, 0);
+        }
+        sharp.copy(dir).setLength(halfWidth * 3);
+        right.add(pathPoint.pos);
+        left.add(pathPoint.pos);
+        sharp.add(pathPoint.pos);
+        position.push(left.x, left.y, left.z, right.x, right.y, right.z, sharp.x, sharp.y, sharp.z);
+        normal.push(up.x, up.y, up.z, up.x, up.y, up.z, up.x, up.y, up.z);
+        uv.push(uvDist, side !== 'both' ? (side !== 'right' ? -2 : 0) : -0.5, uvDist, side !== 'both' ? (side !== 'left' ? 2 : 0) : 1.5, uvDist + 1.5, side !== 'both' ? 0 : 0.5);
+        if (generateUv2) {
+            uv2.push(uvDist2, side !== 'both' ? (side !== 'right' ? -2 : 0) : -0.5, uvDist2, side !== 'both' ? (side !== 'left' ? 2 : 0) : 1.5, uvDist2 + (1.5 * width) / totalDistance, side !== 'both' ? 0 : 0.5);
+        }
+        verticesCount += 3;
+        indices.push(verticesCount - 1, verticesCount - 3, verticesCount - 2);
+        count += 3;
+    }
+    let lastPoint;
+    if (progressDistance > 0) {
+        for (let i = 0; i < pathPointList.count; i++) {
+            const pathPoint = pathPointList.array[i];
+            if (pathPoint.dist > progressDistance) {
+                const prevPoint = pathPointList.array[i - 1];
+                lastPoint = new PathPoint();
+                // linear lerp for progress
+                const alpha = (progressDistance - prevPoint.dist) / (pathPoint.dist - prevPoint.dist);
+                lastPoint.lerpPathPoints(prevPoint, pathPoint, alpha);
+                addVertices(lastPoint);
+                break;
+            }
+            else {
+                addVertices(pathPoint);
+            }
+        }
+    }
+    else {
+        lastPoint = pathPointList.array[0];
+    }
+    // build arrow geometry
+    if (arrow) {
+        lastPoint = lastPoint || pathPointList.array[pathPointList.count - 1];
+        addStart(lastPoint);
+    }
+    return {
+        position,
+        normal,
+        uv,
+        uv2,
+        indices,
+        count,
+    };
+}

package/PipeMesh/PathPoint.d.ts

@@ -0,0 +1,17 @@
+import { Vector3 } from 'three/src/math/Vector3';
+/**
+ * PathPoint
+ */
+declare class PathPoint {
+    pos: Vector3;
+    dir: Vector3;
+    right: Vector3;
+    up: Vector3;
+    dist: number;
+    widthScale: number;
+    sharp: boolean;
+    constructor();
+    lerpPathPoints(p1: PathPoint, p2: PathPoint, alpha: number): void;
+    copy(source: PathPoint): void;
+}
+export { PathPoint };

package/PipeMesh/PathPoint.js

@@ -0,0 +1,31 @@
+import { Vector3 } from 'three/src/math/Vector3';
+/**
+ * PathPoint
+ */
+class PathPoint {
+    pos = new Vector3();
+    dir = new Vector3();
+    right = new Vector3();
+    up = new Vector3(); // normal
+    dist = 0; // distance from start
+    widthScale = 1; // for corner
+    sharp = false; // marks as sharp corner
+    constructor() { }
+    lerpPathPoints(p1, p2, alpha) {
+        this.pos.lerpVectors(p1.pos, p2.pos, alpha);
+        this.dir.lerpVectors(p1.dir, p2.dir, alpha);
+        this.up.lerpVectors(p1.up, p2.up, alpha);
+        this.right.lerpVectors(p1.right, p2.right, alpha);
+        this.dist = (p2.dist - p1.dist) * alpha + p1.dist;
+        this.widthScale = (p2.widthScale - p1.widthScale) * alpha + p1.widthScale;
+    }
+    copy(source) {
+        this.pos.copy(source.pos);
+        this.dir.copy(source.dir);
+        this.up.copy(source.up);
+        this.right.copy(source.right);
+        this.dist = source.dist;
+        this.widthScale = source.widthScale;
+    }
+}
+export { PathPoint };

package/PipeMesh/PathPointList.d.ts

@@ -0,0 +1,31 @@
+import { Vector3 } from 'three/src/math/Vector3.js';
+import { PathPoint } from './PathPoint.js';
+/**
+ * PathPointList
+ * input points to generate a PathPoint list
+ */
+declare class PathPointList {
+    array: Array<PathPoint>;
+    count: number;
+    constructor();
+    /**
+     * Set points
+     * @param {Vector3[]} points key points array
+     * @param {number} cornerRadius? the corner radius. set 0 to disable round corner. default is 0.1
+     * @param {number} cornerSplit? the corner split. default is 10.
+     * @param {number} up? force up. default is auto up (calculate by tangent).
+     * @param {boolean} close? close path. default is false.
+     */
+    set(points: Array<Vector3>, cornerRadius?: number, cornerSplit?: number, up?: Vector3, close?: boolean): void;
+    /**
+     * Get distance of this path
+     * @return {number}
+     */
+    distance(): number;
+    _getByIndex(index: number): PathPoint;
+    _start(current: Vector3, next: Vector3, up?: Vector3): void;
+    _end(current: Vector3): void;
+    _corner(current: Vector3, next: Vector3, cornerRadius: number, cornerSplit: number, up?: Vector3): void;
+    _sharpCorner(current: Vector3, next: Vector3, up?: Vector3, dirType?: 0 | 1 | 2, sharp?: boolean): void;
+}
+export { PathPointList };

package/PipeMesh/PathPointList.js

@@ -0,0 +1,208 @@
+import { Vector3 } from 'three/src/math/Vector3.js';
+import { PathPoint } from './PathPoint.js';
+import { Matrix4 } from 'three/src/math/Matrix4.js';
+import { QuadraticBezierCurve3 } from 'three/src/extras/curves/QuadraticBezierCurve3.js';
+const helpVec3_1 = new Vector3();
+const helpVec3_2 = new Vector3();
+const helpVec3_3 = new Vector3();
+const helpMat4 = new Matrix4();
+const helpCurve = new QuadraticBezierCurve3(new Vector3(), new Vector3(), new Vector3());
+function _getCornerBezierCurve(last, current, next, cornerRadius, firstCorner, out) {
+    const lastDir = helpVec3_1.subVectors(current, last);
+    const nextDir = helpVec3_2.subVectors(next, current);
+    const lastDirLength = lastDir.length();
+    const nextDirLength = nextDir.length();
+    lastDir.normalize();
+    nextDir.normalize();
+    // cornerRadius can not bigger then lineDistance / 2, auto fix this
+    const v0Dist = Math.min((firstCorner ? lastDirLength / 2 : lastDirLength) * 0.999999, cornerRadius);
+    out.v0.copy(current).sub(lastDir.multiplyScalar(v0Dist));
+    out.v1.copy(current);
+    const v2Dist = Math.min((nextDirLength / 2) * 0.999999, cornerRadius);
+    out.v2.copy(current).add(nextDir.multiplyScalar(v2Dist));
+    return out;
+}
+/**
+ * PathPointList
+ * input points to generate a PathPoint list
+ */
+class PathPointList {
+    array = []; // path point array
+    count = 0;
+    constructor() { }
+    /**
+     * Set points
+     * @param {Vector3[]} points key points array
+     * @param {number} cornerRadius? the corner radius. set 0 to disable round corner. default is 0.1
+     * @param {number} cornerSplit? the corner split. default is 10.
+     * @param {number} up? force up. default is auto up (calculate by tangent).
+     * @param {boolean} close? close path. default is false.
+     */
+    set(points, cornerRadius = 0.1, cornerSplit = 10, up, close = false) {
+        points = points.slice(0);
+        if (points.length < 2) {
+            console.warn('PathPointList: points length less than 2.');
+            this.count = 0;
+            return;
+        }
+        // Auto close
+        if (close && !points[0].equals(points[points.length - 1])) {
+            points.push(new Vector3().copy(points[0]));
+        }
+        // Generate path point list
+        for (let i = 0, l = points.length; i < l; i++) {
+            if (i === 0) {
+                this._start(points[i], points[i + 1], up);
+            }
+            else if (i === l - 1) {
+                if (close) {
+                    // Connect end point and start point
+                    this._corner(points[i], points[1], cornerRadius, cornerSplit, up);
+                    // Fix start point
+                    const dist = this.array[0].dist; // should not copy dist
+                    this.array[0].copy(this.array[this.count - 1]);
+                    this.array[0].dist = dist;
+                }
+                else {
+                    this._end(points[i]);
+                }
+            }
+            else {
+                this._corner(points[i], points[i + 1], cornerRadius, cornerSplit, up);
+            }
+        }
+    }
+    /**
+     * Get distance of this path
+     * @return {number}
+     */
+    distance() {
+        if (this.count > 0) {
+            return this.array[this.count - 1].dist;
+        }
+        return 0;
+    }
+    _getByIndex(index) {
+        if (!this.array[index]) {
+            this.array[index] = new PathPoint();
+        }
+        return this.array[index];
+    }
+    _start(current, next, up) {
+        this.count = 0;
+        const point = this._getByIndex(this.count);
+        point.pos.copy(current);
+        point.dir.subVectors(next, current);
+        // init start up dir
+        if (up) {
+            point.up.copy(up);
+        }
+        else {
+            // select an initial normal vector perpendicular to the first tangent vector
+            let min = Number.MAX_VALUE;
+            const tx = Math.abs(point.dir.x);
+            const ty = Math.abs(point.dir.y);
+            const tz = Math.abs(point.dir.z);
+            if (tx < min) {
+                min = tx;
+                point.up.set(1, 0, 0);
+            }
+            if (ty < min) {
+                min = ty;
+                point.up.set(0, 1, 0);
+            }
+            if (tz < min) {
+                point.up.set(0, 0, 1);
+            }
+        }
+        point.right.crossVectors(point.dir, point.up).normalize();
+        point.up.crossVectors(point.right, point.dir).normalize();
+        point.dist = 0;
+        point.widthScale = 1;
+        point.sharp = false;
+        point.dir.normalize();
+        this.count++;
+    }
+    _end(current) {
+        const lastPoint = this.array[this.count - 1];
+        const point = this._getByIndex(this.count);
+        point.pos.copy(current);
+        point.dir.subVectors(current, lastPoint.pos);
+        const dist = point.dir.length();
+        point.dir.normalize();
+        point.up.copy(lastPoint.up); // copy last up
+        const vec = helpVec3_1.crossVectors(lastPoint.dir, point.dir);
+        if (vec.length() > Number.EPSILON) {
+            vec.normalize();
+            const theta = Math.acos(Math.min(Math.max(lastPoint.dir.dot(point.dir), -1), 1)); // clamp for floating pt errors
+            point.up.applyMatrix4(helpMat4.makeRotationAxis(vec, theta));
+        }
+        point.right.crossVectors(point.dir, point.up).normalize();
+        point.dist = lastPoint.dist + dist;
+        point.widthScale = 1;
+        point.sharp = false;
+        this.count++;
+    }
+    _corner(current, next, cornerRadius, cornerSplit, up) {
+        if (cornerRadius > 0 && cornerSplit > 0) {
+            const lastPoint = this.array[this.count - 1];
+            const curve = _getCornerBezierCurve(lastPoint.pos, current, next, cornerRadius, this.count - 1 === 0, helpCurve);
+            const samplerPoints = curve.getPoints(cornerSplit);
+            for (let f = 0; f < cornerSplit; f++) {
+                this._sharpCorner(samplerPoints[f], samplerPoints[f + 1], up, f === 0 ? 1 : 0);
+            }
+            if (!samplerPoints[cornerSplit].equals(next)) {
+                this._sharpCorner(samplerPoints[cornerSplit], next, up, 2);
+            }
+        }
+        else {
+            this._sharpCorner(current, next, up, 0, true);
+        }
+    }
+    // dirType: 0 - use middle dir / 1 - use last dir / 2- use next dir
+    _sharpCorner(current, next, up, dirType = 0, sharp = false) {
+        const lastPoint = this.array[this.count - 1];
+        const point = this._getByIndex(this.count);
+        const lastDir = helpVec3_1.subVectors(current, lastPoint.pos);
+        const nextDir = helpVec3_2.subVectors(next, current);
+        const lastDirLength = lastDir.length();
+        lastDir.normalize();
+        nextDir.normalize();
+        point.pos.copy(current);
+        if (dirType === 1) {
+            point.dir.copy(lastDir);
+        }
+        else if (dirType === 2) {
+            point.dir.copy(nextDir);
+        }
+        else {
+            point.dir.addVectors(lastDir, nextDir);
+            point.dir.normalize();
+        }
+        if (up) {
+            if (point.dir.dot(up) === 1) {
+                point.right.crossVectors(nextDir, up).normalize();
+            }
+            else {
+                point.right.crossVectors(point.dir, up).normalize();
+            }
+            point.up.crossVectors(point.right, point.dir).normalize();
+        }
+        else {
+            point.up.copy(lastPoint.up);
+            const vec = helpVec3_3.crossVectors(lastPoint.dir, point.dir);
+            if (vec.length() > Number.EPSILON) {
+                vec.normalize();
+                const theta = Math.acos(Math.min(Math.max(lastPoint.dir.dot(point.dir), -1), 1)); // clamp for floating pt errors
+                point.up.applyMatrix4(helpMat4.makeRotationAxis(vec, theta));
+            }
+            point.right.crossVectors(point.dir, point.up).normalize();
+        }
+        point.dist = lastPoint.dist + lastDirLength;
+        const _cos = lastDir.dot(nextDir);
+        point.widthScale = Math.min(1 / Math.sqrt((1 + _cos) / 2), 1.415) || 1;
+        point.sharp = Math.abs(_cos - 1) > 0.05 && sharp;
+        this.count++;
+    }
+}
+export { PathPointList };

package/PipeMesh/PathTubeGeometry.d.ts

@@ -0,0 +1,25 @@
+import { Usage } from 'three/src/constants.js';
+import { PathGeometry, type Options, type PathGeometryParam } from './PathGeometry.js';
+import type { PathPointList } from './PathPointList.js';
+/**
+ * PathTubeGeometry
+ */
+declare class PathTubeGeometry extends PathGeometry {
+    /**
+     * @param {Object|Number} initData - If initData is number, geometry init by empty data and set it as the max vertex. If initData is Object, it contains pathPointList and options.
+     * @param {Boolean} [generateUv2=false]
+     */
+    constructor(initData: PathGeometryParam, generateUv2?: boolean);
+    _initByData(pathPointList: PathPointList, options: Options, usage: Usage, generateUv2: boolean): void;
+    /**
+     * Update geometry by PathPointList instance
+     * @param {PathPointList} pathPointList
+     * @param {Object} options
+     * @param {Number} [options.radius=0.1]
+     * @param {Number} [options.progress=1]
+     * @param {Boolean} [options.radialSegments=8]
+     * @param {String} [options.startRad=0]
+     */
+    update(pathPointList: PathPointList, options: Options): void;
+}
+export { PathTubeGeometry };

package/PipeMesh/PathTubeGeometry.js

@@ -0,0 +1,130 @@
+import { StaticDrawUsage } from 'three/src/constants.js';
+import { PathGeometry } from './PathGeometry.js';
+import { PathPoint } from './PathPoint.js';
+import { BufferAttribute } from 'three/src/core/BufferAttribute.js';
+import { Vector3 } from 'three/src/math/Vector3.js';
+/**
+ * PathTubeGeometry
+ */
+class PathTubeGeometry extends PathGeometry {
+    /**
+     * @param {Object|Number} initData - If initData is number, geometry init by empty data and set it as the max vertex. If initData is Object, it contains pathPointList and options.
+     * @param {Boolean} [generateUv2=false]
+     */
+    constructor(initData, generateUv2 = false) {
+        super(initData, generateUv2);
+    }
+    _initByData(pathPointList, options = {}, usage, generateUv2) {
+        const vertexData = generateTubeVertexData(pathPointList, options, generateUv2);
+        if (vertexData && vertexData.count !== 0) {
+            this.setAttribute('position', new BufferAttribute(new Float32Array(vertexData.position), 3).setUsage(usage || StaticDrawUsage));
+            this.setAttribute('normal', new BufferAttribute(new Float32Array(vertexData.normal), 3).setUsage(usage || StaticDrawUsage));
+            this.setAttribute('uv', new BufferAttribute(new Float32Array(vertexData.uv), 2).setUsage(usage || StaticDrawUsage));
+            if (generateUv2) {
+                this.setAttribute('uv2', new BufferAttribute(new Float32Array(vertexData.uv2), 2).setUsage(usage || StaticDrawUsage));
+            }
+            this.setIndex(vertexData.indices);
+        }
+        else {
+            this._initByMaxVertex(2, generateUv2);
+        }
+    }
+    /**
+     * Update geometry by PathPointList instance
+     * @param {PathPointList} pathPointList
+     * @param {Object} options
+     * @param {Number} [options.radius=0.1]
+     * @param {Number} [options.progress=1]
+     * @param {Boolean} [options.radialSegments=8]
+     * @param {String} [options.startRad=0]
+     */
+    update(pathPointList, options) {
+        const generateUv2 = !!this.getAttribute('uv2');
+        const vertexData = generateTubeVertexData(pathPointList, options, generateUv2);
+        if (vertexData) {
+            this._updateAttributes(vertexData.position, vertexData.normal, vertexData.uv, generateUv2 ? vertexData.uv2 : null, vertexData.indices);
+            this.drawRange.count = vertexData.count;
+        }
+        else {
+            this.drawRange.count = 0;
+        }
+    }
+}
+export { PathTubeGeometry };
+// Vertex Data Generate Functions
+function generateTubeVertexData(pathPointList, options, generateUv2 = false) {
+    const radius = options.radius || 0.1;
+    const progress = options.progress !== undefined ? options.progress : 1;
+    const radialSegments = Math.max(2, options.radialSegments || 8);
+    const startRad = options.startRad || 0;
+    const circum = radius * 2 * Math.PI;
+    const totalDistance = pathPointList.distance();
+    const progressDistance = progress * totalDistance;
+    if (progressDistance == 0) {
+        return null;
+    }
+    let count = 0;
+    // modify data
+    const position = [];
+    const normal = [];
+    const uv = [];
+    const uv2 = [];
+    const indices = [];
+    let verticesCount = 0;
+    const normalDir = new Vector3();
+    function addVertices(pathPoint, radius, radialSegments) {
+        const first = position.length === 0;
+        const uvDist = pathPoint.dist / circum;
+        const uvDist2 = pathPoint.dist / totalDistance;
+        for (let r = 0; r <= radialSegments; r++) {
+            let _r = r;
+            if (_r == radialSegments) {
+                _r = 0;
+            }
+            normalDir
+                .copy(pathPoint.up)
+                .applyAxisAngle(pathPoint.dir, startRad + (Math.PI * 2 * _r) / radialSegments)
+                .normalize();
+            position.push(pathPoint.pos.x + normalDir.x * radius * pathPoint.widthScale, pathPoint.pos.y + normalDir.y * radius * pathPoint.widthScale, pathPoint.pos.z + normalDir.z * radius * pathPoint.widthScale);
+            normal.push(normalDir.x, normalDir.y, normalDir.z);
+            uv.push(uvDist, r / radialSegments);
+            if (generateUv2) {
+                uv2.push(uvDist2, r / radialSegments);
+            }
+            verticesCount++;
+        }
+        if (!first) {
+            const begin1 = verticesCount - (radialSegments + 1) * 2;
+            const begin2 = verticesCount - (radialSegments + 1);
+            for (let i = 0; i < radialSegments; i++) {
+                indices.push(begin2 + i, begin1 + i, begin1 + i + 1, begin2 + i, begin1 + i + 1, begin2 + i + 1);
+                count += 6;
+            }
+        }
+    }
+    if (progressDistance > 0) {
+        for (let i = 0; i < pathPointList.count; i++) {
+            const pathPoint = pathPointList.array[i];
+            if (pathPoint.dist > progressDistance) {
+                const prevPoint = pathPointList.array[i - 1];
+                const lastPoint = new PathPoint();
+                // linear lerp for progress
+                const alpha = (progressDistance - prevPoint.dist) / (pathPoint.dist - prevPoint.dist);
+                lastPoint.lerpPathPoints(prevPoint, pathPoint, alpha);
+                addVertices(lastPoint, radius, radialSegments);
+                break;
+            }
+            else {
+                addVertices(pathPoint, radius, radialSegments);
+            }
+        }
+    }
+    return {
+        position,
+        normal,
+        uv,
+        uv2,
+        indices,
+        count,
+    };
+}

package/PipeMesh/PipeMesh.d.ts

@@ -0,0 +1,23 @@
+import { Material, Mesh, Vector3 } from "three";
+import { PathPointList } from "./PathPointList";
+import { PathTubeGeometry } from "./PathTubeGeometry";
+export type PipeMeshProps = {
+    vector3s: Array<Vector3>;
+    radius: number;
+};
+/**
+ * 创建基础的管道模型
+ */
+export default class PipeMesh extends Mesh<PathTubeGeometry, Material> {
+    constructor(props: PipeMeshProps);
+    type: string;
+    vector3s: Array<Vector3>;
+    radius: number;
+    pathPointList: PathPointList;
+    material: Material;
+    set(props: PipeMeshProps): void;
+    setVector(i: number, vector: Vector3): void;
+    getVector(i: number): Vector3;
+    setLatestVector(vector: Vector3): void;
+    getLatestVector(): Vector3;
+}

package/PipeMesh/PipeMesh.js

@@ -0,0 +1,61 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-02-16 23:13:14
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2024-11-23 13:06:54
+ */
+import { DoubleSide, DynamicDrawUsage, Mesh, MeshLambertMaterial, } from "three";
+import { PathPointList } from "./PathPointList";
+import { PathTubeGeometry } from "./PathTubeGeometry";
+/**
+ * 创建基础的管道模型
+ */
+export default class PipeMesh extends Mesh {
+    constructor(props) {
+        super();
+        this.set(props);
+    }
+    type = "pipemesh";
+    vector3s = [];
+    radius = 1;
+    pathPointList = new PathPointList();
+    material = new MeshLambertMaterial({
+        side: DoubleSide,
+        color: "#fff",
+    });
+    // 设置数据
+    set(props) {
+        this.vector3s = props.vector3s;
+        this.radius = props.radius;
+        this.pathPointList.set(this.vector3s, props.radius * 2, 10);
+        this.geometry = new PathTubeGeometry({
+            pathPointList: this.pathPointList,
+            options: {
+                arrow: true,
+                progress: 1,
+                radius: props.radius,
+                radialSegments: 10,
+            },
+            usage: DynamicDrawUsage,
+            transparent: true,
+        });
+    }
+    // 设置指定点的坐标
+    setVector(i, vector) {
+        this.vector3s[i].copy(vector);
+        this.pathPointList.set(this.vector3s, this.radius * 2, 10);
+        this.geometry.update(this.pathPointList, { radius: this.radius });
+    }
+    // 获取指定点的坐标
+    getVector(i) {
+        return this.vector3s[i];
+    }
+    // 设置最后一个点的坐标
+    setLatestVector(vector) {
+        this.setVector(this.vector3s.length - 1, vector);
+    }
+    // 回去最后一个点的坐标
+    getLatestVector() {
+        return this.getVector(this.vector3s.length - 1);
+    }
+}

package/PipeMesh/index.d.ts

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

package/PipeMesh/index.js

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

package/ThreeBase.js

@@ -82,8 +82,8 @@ export default class ThreeBase extends EventDispatcher {
     renderer = (() => {
         const renderer = new WebGLRenderer({
             alpha: true,
-            antialias: true,
-            precision: "highp",
+            antialias: false,
+            precision: "lowp",
             logarithmicDepthBuffer: true,
             preserveDrawingBuffer: true,
             stencil: false, // 模版

package/keyContorls.d.ts

@@ -16,7 +16,7 @@ declare class KeyContorls extends EventDispatcher {
     _listeners?: {
         [key: string]: Array<any>;
     };
-    removeEvent: import("lodash").DebouncedFunc<(type: string) => void>;
+    removeEvent: import("lodash").DebouncedFuncLeading<(type: string) => void>;
     addEventListener<T extends string>(type: T, listener: EventListener<{}, T, this>): void;
     addEvent(): void;
     dispose(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "three-base",
-  "version": "2.0.108",
+  "version": "2.0.109",
   "description": "three 3d three-base",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"