three-base 1.0.62 → 1.0.65

package/lib/FPScontrol.js

@@ -0,0 +1,170 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-05-04 23:01:36
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2022-06-06 13:32:08
+ */
+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";
+/**
+ * 第一人称控制器
+ *
+ * @export
+ * @class FPScontrol
+ * @extends {EventDispatcher}
+ */
+export default class FPScontrol extends EventDispatcher {
+    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;
+    // 世界八叉树对象
+    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 = {};
+    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);
+        this.enable = true;
+    }
+    keydown = (event) => {
+        this.keyStates[event.code] = true;
+    };
+    keyup = (event) => {
+        this.keyStates[event.code] = false;
+    };
+    mousedown = () => {
+        this.isMousedown = true;
+        this.mouseTime = performance.now();
+    };
+    mouseup = () => {
+        this.isMousedown = false;
+    };
+    mousemove = (event) => {
+        if (this.enable && this.isMousedown) {
+            this.camera.rotation.y -= event.movementX / 500;
+            this.camera.rotation.x -= event.movementY / 500;
+        }
+    };
+    // 设置 八叉树 节点
+    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);
+        this.playerDirection.y = 0;
+        this.playerDirection.normalize();
+        this.playerDirection.cross(this.camera.up);
+        return this.playerDirection;
+    };
+    // 玩家移动控制器
+    controls = (deltaTime) => {
+        const speedDelta = deltaTime * (this.playerOnFloor ? 25 : 8);
+        if (this.keyStates['KeyW']) {
+            this.playerVelocity.add(this.getForwardVector().multiplyScalar(speedDelta));
+        }
+        if (this.keyStates['KeyS']) {
+            this.playerVelocity.add(this.getForwardVector().multiplyScalar(-speedDelta));
+        }
+        if (this.keyStates['KeyA']) {
+            this.playerVelocity.add(this.getSideVector().multiplyScalar(-speedDelta));
+        }
+        if (this.keyStates['KeyD']) {
+            this.playerVelocity.add(this.getSideVector().multiplyScalar(speedDelta));
+        }
+        if (this.playerOnFloor) {
+            if (this.keyStates['Space']) {
+                this.playerVelocity.y = 15;
+            }
+        }
+    };
+    // 更新玩家的位置
+    updatePlayer = (deltaTime) => {
+        let damping = Math.exp(-4 * deltaTime) - 1;
+        if (!this.playerOnFloor) {
+            this.playerVelocity.y -= this.GRAVITY * deltaTime;
+            damping *= 0.1;
+        }
+        this.playerVelocity.addScaledVector(this.playerVelocity, damping);
+        const deltaPosition = this.playerVelocity.clone().multiplyScalar(deltaTime);
+        this.playerCollider.translate(deltaPosition);
+        this.playerCollisions();
+        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);
+        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));
+        }
+    }
+    // 更新控制器的位置
+    teleportPlayerIfOob = () => {
+        if (this.camera.position.y <= -10) {
+            this.playerCollider.start.set(0, 0.35, 0);
+            this.playerCollider.end.set(0, 1, 10);
+            this.playerCollider.radius = 0.35;
+            this.camera.position.copy(this.playerCollider.end);
+            // this.camera.position.set(0, 3, 0);
+        }
+    };
+    // 更新
+    update() {
+        if (this.enable) {
+            const deltaTime = Math.min(0.05, this.clock.getDelta()) / this.STEPS_PER_FRAME;
+            for (let i = 0; i < this.STEPS_PER_FRAME; i++) {
+                this.controls(deltaTime);
+                this.updatePlayer(deltaTime);
+                this.teleportPlayerIfOob();
+            }
+        }
+    }
+    // 销毁事件
+    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);
+    }
+}

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.js

@@ -0,0 +1,78 @@
+/*
+ * @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, Line, LineBasicMaterial, Object3D } from "three";
+import threeUtils from "./threeUtils";
+// 关键帧动画对象
+export default class KeyframeAnimation extends Object3D {
+    constructor(props) {
+        super();
+        // 速度调整
+        this.speedScale = props.speedScale || 1;
+        // 设置关键帧对象数组
+        this.setKeyframes(props.keyframes);
+        // 设置对象
+        this.setObject3D(props.object3d);
+    }
+    // 速度调整
+    speedScale = 1;
+    // 需要需要移动的对象
+    object3d;
+    //路径辅助线
+    halperLine = new Line(undefined, new LineBasicMaterial({ color: "#f00" }));
+    // 关键帧数组
+    keyframes = [];
+    // 设置需要移动的对象
+    setObject3D(object3d) {
+        this.object3d = object3d;
+        if (threeUtils.isDev) {
+            this.children = [object3d, this.halperLine];
+        }
+        else {
+            this.children = [object3d];
+        }
+    }
+    // 获取单个关键帧
+    getKeyframe(i) {
+        return this.keyframes[i];
+    }
+    // 设置单个关键帧
+    setKeyframe(i, keyframe) {
+        this.keyframes[i] = keyframe;
+        this.setKeyframes(this.keyframes);
+    }
+    //设置全部关键帧
+    setKeyframes(keyframes) {
+        this.keyframes = keyframes;
+        const position = [];
+        keyframes.map(k => {
+            position.push(k.position.x);
+            position.push(k.position.y);
+            position.push(k.position.z);
+        });
+        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 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.dispatchEvent({ type: "update" });
+    }
+    //更新关键帧的实例矩阵
+    updateMatrix() {
+        this.update();
+        super.updateMatrix();
+    }
+}

package/lib/PlaneText.js

@@ -0,0 +1,30 @@
+/*
+ * @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";
+export default class PlaneText extends Mesh {
+    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) {
+        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) {
+        return this.spriteText[prop];
+    }
+}

package/lib/PointLight.js

@@ -0,0 +1,64 @@
+/*
+ * @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
+ * @class PointLight
+ * @extends {THREEPointLight}
+ */
+export default class PointLight extends THREEPointLight {
+    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);
+        const materils = new MeshBasicMaterial({
+            color: this.color,
+            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;
+        label.backgroundColor = "rgba(0, 0, 0, 0.5)";
+        label.padding = 4;
+        label.borderRadius = 4;
+        label.borderWidth = 1;
+        label.position.set(0, 0.5, 0);
+        label.visible = false;
+        label.material.depthTest = false;
+        label.scale.multiplyScalar(0.001);
+        this.add(label);
+        return label;
+    })();
+}

package/lib/Sky/Sky.js

@@ -0,0 +1,28 @@
+/*
+ * @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) {
+        this.material.map = threeLoader.getTexture(src);
+    }
+}

package/lib/Text3D/Text3D.js

@@ -0,0 +1,61 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-06-14 09:48:00
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-04-07 21:52:03
+ */
+import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
+import { Mesh, MeshStandardMaterial } 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();
+                }
+            });
+        }
+    }
+}

package/lib/Text3D/Text3D.ts

@@ -2,7 +2,7 @@
  * @Author: xiaosihan
  * @Date: 2022-06-14 09:48:00
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2022-06-14 10:01:13
+ * @Last Modified time: 2023-04-07 21:52:03
  */
 
 import { TextGeometry, TextGeometryParameters } from 'three/examples/jsm/geometries/TextGeometry.js';
@@ -59,7 +59,7 @@ export default class Text3D extends Mesh {
     // 设置文字
     setText(text3DProps: Text3DProps) {
 
-        if (Object.keys(text3DProps).some(key => text3DProps[key] !== this._config[key])) {
+        if (Object.keys(text3DProps).some(key => text3DProps[key as keyof typeof text3DProps] !== this._config[key as keyof typeof this._config])) {
 
             Object.assign(this._config, text3DProps);
 
@@ -69,7 +69,7 @@ export default class Text3D extends Mesh {
                 fontType: this._config.fontType,
                 callback: THREEFont => {
                     this.geometry.dispose();
-                    this.geometry = new TextGeometry(this._config.text, {
+                    this.geometry = new TextGeometry(this._config.text || "", {
                         font: THREEFont,
                         size: this._config.size,
                         curveSegments: this._config.curveSegments,