three-base 1.129.0 → 1.129.2

package/lib/{FPScontrol.ts → FPScontrol.js}

@@ -1,16 +1,13 @@
 /*
- * @Author: xiaosihan 
- * @Date: 2022-05-04 23:01:36 
+ * @Author: xiaosihan
+ * @Date: 2022-05-04 23:01:36
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2022-06-06 13:32:08
  */
-
-import { Camera, Clock, EventDispatcher, Object3D, Vector3 } from "three";
+import { Clock, EventDispatcher, Vector3 } from "three";
 import { Capsule } from "three/examples/jsm/math/Capsule";
 import { Octree } from "three/examples/jsm/math/Octree";
 import { clamp, degToRad } from "three/src/math/MathUtils";
-
-
 /**
  * 第一人称控制器
  *
@@ -19,49 +16,33 @@ import { clamp, degToRad } from "three/src/math/MathUtils";
  * @extends {EventDispatcher}
  */
 export default class FPScontrol extends EventDispatcher {
-
-    canvas!: HTMLCanvasElement
-
-    constructor(camera: Camera, canvas: HTMLCanvasElement) {
+    canvas;
+    constructor(camera, canvas) {
         super();
-
         // 相机对象
         this.camera = camera;
-
         this.camera.rotation.order = 'YXZ';
-
         this.canvas = canvas;
-
         this.init(canvas);
     }
-
     // 是否启用
     enable = false;
-
     GRAVITY = 30; // 重力
     STEPS_PER_FRAME = 5; // 速度
-
-    camera!: Camera;
-
+    camera;
     // 世界八叉树对象
     worldOctree = new Octree();
-
     // 用户自己的碰撞体积
     playerCollider = new Capsule(new Vector3(0, 0.35, 0), new Vector3(0, 1, 0), 0.35);
-
     // 时钟对象
     clock = new Clock();
-
     playerVelocity = new Vector3();
     playerDirection = new Vector3();
-
     playerOnFloor = false;
     mouseTime = 0;
     isMousedown = false;
-    keyStates: { [key: string]: boolean } = {};
-
-
-    init(canvas: HTMLCanvasElement) {
+    keyStates = {};
+    init(canvas) {
         this.playerCollider.end.set(0, 1, 0);
         document.addEventListener('keydown', this.keydown);
         document.addEventListener('keyup', this.keyup);
@@ -70,46 +51,36 @@ export default class FPScontrol extends EventDispatcher {
         document.body.addEventListener('pointermove', this.mousemove);
         this.enable = true;
     }
-
-
-    keydown = (event: KeyboardEvent) => {
+    keydown = (event) => {
         this.keyStates[event.code] = true;
-    }
-
-    keyup = (event: KeyboardEvent) => {
+    };
+    keyup = (event) => {
         this.keyStates[event.code] = false;
-    }
-
+    };
     mousedown = () => {
         this.isMousedown = true;
         this.mouseTime = performance.now();
-    }
-
+    };
     mouseup = () => {
         this.isMousedown = false;
-    }
-
-    mousemove = (event: MouseEvent) => {
+    };
+    mousemove = (event) => {
         if (this.enable && this.isMousedown) {
             this.camera.rotation.y -= event.movementX / 500;
             this.camera.rotation.x -= event.movementY / 500;
-
         }
-    }
-
+    };
     // 设置 八叉树 节点
-    fromGraphNode(object3d: Object3D) {
+    fromGraphNode(object3d) {
         this.worldOctree.fromGraphNode(object3d);
     }
-
     // 获取前进的向量
     getForwardVector = () => {
         this.camera.getWorldDirection(this.playerDirection);
         this.playerDirection.y = 0;
         this.playerDirection.normalize();
         return this.playerDirection;
-    }
-
+    };
     // 获取 后退的向量
     getSideVector = () => {
         this.camera.getWorldDirection(this.playerDirection);
@@ -117,10 +88,9 @@ export default class FPScontrol extends EventDispatcher {
         this.playerDirection.normalize();
         this.playerDirection.cross(this.camera.up);
         return this.playerDirection;
-    }
-
+    };
     // 玩家移动控制器
-    controls = (deltaTime: number) => {
+    controls = (deltaTime) => {
         const speedDelta = deltaTime * (this.playerOnFloor ? 25 : 8);
         if (this.keyStates['KeyW']) {
             this.playerVelocity.add(this.getForwardVector().multiplyScalar(speedDelta));
@@ -134,17 +104,14 @@ export default class FPScontrol extends EventDispatcher {
         if (this.keyStates['KeyD']) {
             this.playerVelocity.add(this.getSideVector().multiplyScalar(speedDelta));
         }
-
         if (this.playerOnFloor) {
             if (this.keyStates['Space']) {
                 this.playerVelocity.y = 15;
             }
         }
-
-    }
-
+    };
     // 更新玩家的位置
-    updatePlayer = (deltaTime: number) => {
+    updatePlayer = (deltaTime) => {
         let damping = Math.exp(-4 * deltaTime) - 1;
         if (!this.playerOnFloor) {
             this.playerVelocity.y -= this.GRAVITY * deltaTime;
@@ -157,8 +124,7 @@ export default class FPScontrol extends EventDispatcher {
         this.camera.position.copy(this.playerCollider.end);
         this.camera.position.y += 1;
         this.camera.rotation.x = clamp(this.camera.rotation.x, degToRad(-20), degToRad(20));
-    }
-
+    };
     // 玩家的碰撞检测
     playerCollisions() {
         const result = this.worldOctree.capsuleIntersect(this.playerCollider);
@@ -167,7 +133,6 @@ export default class FPScontrol extends EventDispatcher {
             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));
         }
@@ -181,8 +146,7 @@ export default class FPScontrol extends EventDispatcher {
             this.camera.position.copy(this.playerCollider.end);
             // this.camera.position.set(0, 3, 0);
         }
-    }
-
+    };
     // 更新
     update() {
         if (this.enable) {
@@ -194,7 +158,6 @@ export default class FPScontrol extends EventDispatcher {
             }
         }
     }
-
     // 销毁事件
     disposer() {
         this.enable = false;
@@ -204,6 +167,4 @@ export default class FPScontrol extends EventDispatcher {
         document.removeEventListener('pointerup', this.mouseup);
         document.body.removeEventListener('pointermove', this.mousemove);
     }
-
-
-}
+}

package/lib/InstancedGroupMesh.js

@@ -0,0 +1,63 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-02-21 09:55:52
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-02-26 14:42:21
+ */
+import * as THREE from 'three';
+// 模型组转成 实例对象
+export default class InstancedGroupMesh extends THREE.Mesh {
+    isInstancedGroupMesh = true;
+    count = 0;
+    meshCollect = {};
+    instanceCollect = {};
+    static matrix = new THREE.Matrix4();
+    constructor(group, count) {
+        super();
+        this.count = count;
+        const { meshCollect, instanceCollect } = this;
+        group.updateMatrixWorld(true);
+        // collect all mesh counts, in case there are more than one copy of the same mesh in this group
+        group.traverse((obj) => {
+            const mesh = obj;
+            if (mesh.isMesh) {
+                mesh.matrixWorld.decompose(mesh.position, mesh.quaternion, mesh.scale);
+                mesh.rotation.setFromQuaternion(mesh.quaternion);
+                mesh.updateMatrix();
+                // same geometry and same material consider as the same mesh
+                const uuid = mesh.geometry.uuid + '/' + mesh.material.uuid;
+                if (meshCollect[uuid]) {
+                    meshCollect[uuid].push(mesh);
+                }
+                else {
+                    meshCollect[uuid] = [mesh];
+                }
+            }
+            else {
+                obj.position.set(0, 0, 0);
+                obj.scale.set(1, 1, 1);
+                obj.rotation.set(0, 0, 0);
+            }
+        });
+        // create all instances
+        Object.keys(meshCollect).forEach(uuid => {
+            const meshes = meshCollect[uuid];
+            const mesh = meshes[0];
+            const instancedMesh = new THREE.InstancedMesh(mesh.geometry, mesh.material, meshes.length * count);
+            instanceCollect[uuid] = instancedMesh;
+            this.add(instancedMesh);
+        });
+    }
+    setMatrixAt(index, matrix) {
+        Object.keys(this.meshCollect).forEach(uuid => {
+            const instancedMesh = this.instanceCollect[uuid];
+            const collect = this.meshCollect[uuid];
+            collect.forEach((mesh, i) => {
+                InstancedGroupMesh.matrix.copy(mesh.matrix);
+                InstancedGroupMesh.matrix.premultiply(matrix);
+                instancedMesh.setMatrixAt(collect.length * index + i, InstancedGroupMesh.matrix);
+                instancedMesh.instanceMatrix.needsUpdate = true;
+            });
+        });
+    }
+}

package/lib/{KeyFrameAnimation.ts → KeyFrameAnimation.js}

@@ -1,85 +1,54 @@
 /*
- * @Author: xiaosihan 
- * @Date: 2023-02-16 00:22:31 
+ * @Author: xiaosihan
+ * @Date: 2023-02-16 00:22:31
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-02-16 19:08:55
  */
-
 import { last } from "lodash";
-import { BufferAttribute, Euler, Line, LineBasicMaterial, Object3D, Vector3 } from "three";
+import { BufferAttribute, Line, LineBasicMaterial, Object3D } from "three";
 import threeUtils from "./threeUtils";
-
-
-// 关键帧类型
-export type Keyframe = {
-    position: Vector3;
-    scale: Vector3;
-    rotation: Euler;
-    timeTemp: number; //时间节点 单位毫秒.
-}
-
-
-export type KeyframeAnimationProps = {
-    speedScale?: number; // 速度调整
-    object3d: Object3D; // 需要移动的对象
-    keyframes: Array<Keyframe>,
-}
-
 // 关键帧动画对象
 export default class KeyframeAnimation extends Object3D {
-
-    constructor(props: KeyframeAnimationProps) {
+    constructor(props) {
         super();
-
         // 速度调整
         this.speedScale = props.speedScale || 1;
-
         // 设置关键帧对象数组
         this.setKeyframes(props.keyframes);
-
-
         // 设置对象
         this.setObject3D(props.object3d);
-
     }
-
     // 速度调整
     speedScale = 1;
-
     // 需要需要移动的对象
-    object3d!: Object3D;
-
+    object3d;
     //路径辅助线
     halperLine = new Line(undefined, new LineBasicMaterial({ color: "#f00" }));
-
     // 关键帧数组
-    keyframes: Array<Keyframe> = [];
-
+    keyframes = [];
     // 设置需要移动的对象
-    setObject3D(object3d: Object3D) {
+    setObject3D(object3d) {
         this.object3d = object3d;
         if (threeUtils.isDev) {
             this.children = [object3d, this.halperLine];
-        } else {
+        }
+        else {
             this.children = [object3d];
         }
     }
-
     // 获取单个关键帧
-    getKeyframe(i: number) {
+    getKeyframe(i) {
         return this.keyframes[i];
     }
-
     // 设置单个关键帧
-    setKeyframe(i: number, keyframe: Keyframe) {
+    setKeyframe(i, keyframe) {
         this.keyframes[i] = keyframe;
         this.setKeyframes(this.keyframes);
     }
-
     //设置全部关键帧
-    setKeyframes(keyframes: Array<Keyframe>) {
+    setKeyframes(keyframes) {
         this.keyframes = keyframes;
-        const position: Array<number> = [];
+        const position = [];
         keyframes.map(k => {
             position.push(k.position.x);
             position.push(k.position.y);
@@ -87,36 +56,23 @@ export default class KeyframeAnimation extends Object3D {
         });
         this.halperLine.geometry.setAttribute("position", new BufferAttribute(new Float32Array(position), 3, false));
     }
-
     // 更具关键帧的信息更新 对象的位置
     update() {
-        const { timeTemp } = threeUtils;
-        const maxtimetemp = last(this.keyframes)!.timeTemp;
-        const currentTime = timeTemp % maxtimetemp;
-
+        const { _timeTemp } = threeUtils;
+        const maxtimetemp = last(this.keyframes).timeTemp;
+        const currentTime = _timeTemp % maxtimetemp;
         const currentKeyframeIndex = this.keyframes.findIndex(k => currentTime < k.timeTemp);
-
         const startKeyframe = this.keyframes[currentKeyframeIndex - 1];
         const endKeyframe = this.keyframes[currentKeyframeIndex];
         const progress = (currentTime - startKeyframe.timeTemp) / (endKeyframe.timeTemp - startKeyframe.timeTemp);
-
         this.object3d.position.copy(endKeyframe.position).sub(startKeyframe.position).multiplyScalar(progress).add(startKeyframe.position);
         this.object3d.scale.copy(endKeyframe.scale).sub(startKeyframe.scale).multiplyScalar(progress).add(startKeyframe.scale);
-
-        this.object3d.rotation.set(
-            (endKeyframe.rotation.x - startKeyframe.rotation.x) * progress + startKeyframe.rotation.x,
-            (endKeyframe.rotation.y - startKeyframe.rotation.y) * progress + startKeyframe.rotation.y,
-            (endKeyframe.rotation.z - startKeyframe.rotation.z) * progress + startKeyframe.rotation.z,
-        );
-
+        this.object3d.rotation.set((endKeyframe.rotation.x - startKeyframe.rotation.x) * progress + startKeyframe.rotation.x, (endKeyframe.rotation.y - startKeyframe.rotation.y) * progress + startKeyframe.rotation.y, (endKeyframe.rotation.z - startKeyframe.rotation.z) * progress + startKeyframe.rotation.z);
         this.dispatchEvent({ type: "update" });
     }
-
     //更新关键帧的实例矩阵
-    updateMatrix(): void {
+    updateMatrix() {
         this.update();
         super.updateMatrix();
     }
-
-
-}
+}

package/lib/{PlaneText.ts → PlaneText.js}

@@ -1,59 +1,30 @@
 /*
- * @Author: xiaosihan 
- * @Date: 2022-05-23 13:53:06 
+ * @Author: xiaosihan
+ * @Date: 2022-05-23 13:53:06
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2022-05-23 19:38:24
  */
-
 import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from "three";
 import SpriteText from "three-spritetext";
-
-
-
-type Props = {
-    text?: string;
-    textHeight?: number;
-    color?: string;
-    backgroundColor?: string;
-    fontFace?: string;
-    fontSize?: number;
-    fontWeight?: string;
-    padding?: number | [number, number];
-    borderWidth?: number;
-    borderRadius?: number;
-    borderColor?: string;
-    strokeWidth?: number;
-    strokeColor?: string;
-}
-
 export default class PlaneText extends Mesh {
-
-    constructor(text: string = "planeText") {
+    constructor(text = "planeText") {
         super(PlaneText.geometry);
         this.set({ text });
     }
-
     type = "PlaneText";
-
     static geometry = new PlaneGeometry(1, 1, 1, 1);
-
     spriteText = new SpriteText("");
-
     material = new MeshBasicMaterial({ transparent: true, side: DoubleSide, map: this.spriteText.material.map });
-
-    set(parame: Props) {
+    set(parame) {
         for (let key in parame) {
             //@ts-ignore
             this.spriteText[key] = parame[key];
         }
-
         this.scale.copy(this.spriteText.scale);
         this.scale.max(new Vector3(1, 1, 1));
         this.material.map = this.spriteText.material.map;
     }
-
-    get(prop: keyof SpriteText) {
+    get(prop) {
         return this.spriteText[prop];
     }
-
 }

package/lib/{PointLight.ts → PointLight.js}

@@ -1,15 +1,12 @@
 /*
- * @Author: xiaosihan 
- * @Date: 2022-05-18 16:02:55 
+ * @Author: xiaosihan
+ * @Date: 2022-05-18 16:02:55
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2022-06-23 21:02:45
  */
-
 import { Mesh, MeshBasicMaterial, PointLight as THREEPointLight, SphereGeometry } from "three";
 import threeSpritetext from "three-spritetext";
 import threeUtils from "./threeUtils";
-
-
 /**
  * 点光源
  * @export
@@ -17,21 +14,16 @@ import threeUtils from "./threeUtils";
  * @extends {THREEPointLight}
  */
 export default class PointLight extends THREEPointLight {
-
-    constructor(color = "#fff", intensity?: number, distance?: number, decay?: number) {
+    constructor(color = "#fff", intensity, distance, decay) {
         super(color, intensity, distance, decay);
-
         if (threeUtils.isDev) {
             if (this.label) {
                 this.label.borderColor = color;
                 this.label.color = color;
                 this.label.scale.multiplyScalar(0.03);
             }
-
         }
-
     }
-
     sphere = threeUtils.isDev && (() => {
         // 点光源辅助小球
         const sphere = new SphereGeometry(0.1, 10, 10);
@@ -40,26 +32,21 @@ export default class PointLight extends THREEPointLight {
             wireframe: true
         });
         const mesh = new Mesh(sphere, materils);
-
         mesh.userData = {
             cursor: "pointer"
         };
-
         mesh.addEventListener("mouseenter", () => {
             if (this.label) {
                 this.label.visible = true;
             }
         });
-
         mesh.addEventListener("mouseleave", () => {
             if (this.label) {
                 this.label.visible = false;
             }
         });
-
         this.add(mesh);
     })();
-
     label = threeUtils.isDev && (() => {
         const label = new threeSpritetext("点光源");
         label.renderOrder = Infinity;
@@ -74,5 +61,4 @@ export default class PointLight extends THREEPointLight {
         this.add(label);
         return label;
     })();
-
-}
+}

package/lib/Sky/{Sky.ts → Sky.js}

@@ -1,36 +1,28 @@
 /*
- * @Author: xiaosihan 
- * @Date: 2022-05-20 18:03:58 
+ * @Author: xiaosihan
+ * @Date: 2022-05-20 18:03:58
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2022-12-27 09:54:23
  */
-
 import { DoubleSide, Mesh, MeshBasicMaterial, SphereGeometry } from "three";
 import threeLoader from "../threeLoader";
-
 import blueskyJPG from "./blueSky.jpg";
-
 /**
  * 天空球
  */
 export default class Sky extends Mesh {
-
     constructor() {
         super(Sky.geometry);
     }
-
     static geometry = new SphereGeometry(500000, 100, 100);
-
     material = new MeshBasicMaterial({
         side: DoubleSide,
         map: threeLoader.getTexture(blueskyJPG)
     });
-
     /**
      *设置贴图
      */
-    setMap(src: string) {
+    setMap(src) {
         this.material.map = threeLoader.getTexture(src);
     }
-
-}
+}

package/lib/Text3D/Text3D.js

@@ -0,0 +1,60 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-06-14 09:48:00
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-04-04 19:26:36
+ */
+import { Mesh, MeshStandardMaterial, TextGeometry } from "three";
+import fontContorller from "./fontController";
+// 3D文字模型
+export default class Text3D extends Mesh {
+    constructor(text = "new Text3D()") {
+        super();
+        this.setText({ text });
+    }
+    // 字体的存储路径 例如 : "http://drm.gitee.io/three-base-font/simhei/字.js"
+    static path = "http://drm.gitee.io/three-base-font/";
+    material = new MeshStandardMaterial({
+        metalness: 0.8,
+        roughness: 0.5, // 粗糙度，值为0到1
+    });
+    // 配置
+    _config = {
+        text: "",
+        fontType: "simhei",
+        size: 1,
+        curveSegments: 10,
+        height: 0.1,
+        bevelEnabled: true,
+        bevelThickness: 0.02,
+        bevelSize: 0.015,
+        bevelOffset: 0,
+        bevelSegments: 3, //斜角分段
+    };
+    // 设置文字
+    setText(text3DProps) {
+        if (Object.keys(text3DProps).some(key => text3DProps[key] !== this._config[key])) {
+            Object.assign(this._config, text3DProps);
+            fontContorller.loadText({
+                fontBasePath: Text3D.path,
+                text: this._config.text,
+                fontType: this._config.fontType,
+                callback: THREEFont => {
+                    this.geometry.dispose();
+                    this.geometry = new TextGeometry(this._config.text, {
+                        font: THREEFont,
+                        size: this._config.size,
+                        curveSegments: this._config.curveSegments,
+                        height: this._config.height,
+                        bevelEnabled: this._config.bevelEnabled,
+                        bevelThickness: this._config.bevelThickness,
+                        bevelSize: this._config.bevelSize,
+                        bevelOffset: this._config.bevelOffset,
+                        bevelSegments: this._config.bevelSegments, //斜角分段
+                    });
+                    this.geometry.center();
+                }
+            });
+        }
+    }
+}