three-base 1.129.9 → 1.129.10

package/lib/FPScontrol.ts

@@ -0,0 +1,209 @@
+/*
+ * @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 { 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!: HTMLCanvasElement
+
+    constructor(camera: Camera, canvas: HTMLCanvasElement) {
+        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;
+
+    // 世界八叉树对象
+    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) {
+        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: KeyboardEvent) => {
+        this.keyStates[event.code] = true;
+    }
+
+    keyup = (event: KeyboardEvent) => {
+        this.keyStates[event.code] = false;
+    }
+
+    mousedown = () => {
+        this.isMousedown = true;
+        this.mouseTime = performance.now();
+    }
+
+    mouseup = () => {
+        this.isMousedown = false;
+    }
+
+    mousemove = (event: MouseEvent) => {
+        if (this.enable && this.isMousedown) {
+            this.camera.rotation.y -= event.movementX / 500;
+            this.camera.rotation.x -= event.movementY / 500;
+
+        }
+    }
+
+    // 设置 八叉树 节点
+    fromGraphNode(object3d: 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: number) => {
+        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: number) => {
+        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.ts

@@ -0,0 +1,80 @@
+/*
+ * @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: number = 0
+
+    meshCollect: Record<string, THREE.Mesh[]> = {}
+
+    instanceCollect: Record<string, THREE.InstancedMesh> = {}
+
+    static matrix = new THREE.Matrix4()
+
+    constructor(group: THREE.Group, count: number) {
+        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 as THREE.Mesh
+            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 as THREE.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: number, matrix: THREE.Matrix4) {
+        Object.keys(this.meshCollect).forEach(uuid => {
+            const instancedMesh = this.instanceCollect[uuid]
+            const collect = this.meshCollect[uuid]
+            collect.forEach((mesh: THREE.Mesh, i: number) => {
+                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

@@ -0,0 +1,122 @@
+/*
+ * @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 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) {
+        super();
+
+        // 速度调整
+        this.speedScale = props.speedScale || 1;
+
+        // 设置关键帧对象数组
+        this.setKeyframes(props.keyframes);
+
+
+        // 设置对象
+        this.setObject3D(props.object3d);
+
+    }
+
+    // 速度调整
+    speedScale = 1;
+
+    // 需要需要移动的对象
+    object3d!: Object3D;
+
+    //路径辅助线
+    halperLine = new Line(undefined, new LineBasicMaterial({ color: "#f00" }));
+
+    // 关键帧数组
+    keyframes: Array<Keyframe> = [];
+
+    // 设置需要移动的对象
+    setObject3D(object3d: Object3D) {
+        this.object3d = object3d;
+        if (threeUtils.isDev) {
+            this.children = [object3d, this.halperLine];
+        } else {
+            this.children = [object3d];
+        }
+    }
+
+    // 获取单个关键帧
+    getKeyframe(i: number) {
+        return this.keyframes[i];
+    }
+
+    // 设置单个关键帧
+    setKeyframe(i: number, keyframe: Keyframe) {
+        this.keyframes[i] = keyframe;
+        this.setKeyframes(this.keyframes);
+    }
+
+    //设置全部关键帧
+    setKeyframes(keyframes: Array<Keyframe>) {
+        this.keyframes = keyframes;
+        const position: Array<number> = [];
+        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(): void {
+        this.update();
+        super.updateMatrix();
+    }
+
+
+}

package/lib/PlaneText.ts

@@ -0,0 +1,59 @@
+/*
+ * @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") {
+        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) {
+        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) {
+        return this.spriteText[prop];
+    }
+
+}

package/lib/PointLight.ts

@@ -0,0 +1,78 @@
+/*
+ * @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?: number, distance?: number, decay?: number) {
+        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.ts

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

package/lib/Text3D/Text3D.ts

@@ -0,0 +1,91 @@
+/*
+ * @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";
+
+
+
+export type Text3DProps = {
+    text?: string,
+    fontType?: string,
+    size?: number | undefined;
+    height?: number | undefined;
+    curveSegments?: number | undefined;
+    bevelEnabled?: boolean | undefined;
+    bevelThickness?: number | undefined;
+    bevelSize?: number | undefined;
+    bevelOffset?: number | undefined;
+    bevelSegments?: number | undefined;
+}
+
+
+// 3D文字模型
+export default class Text3D extends Mesh {
+
+    constructor(text: string = "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, // 金属度，值为0到1
+        roughness: 0.5, // 粗糙度，值为0到1
+    });
+
+    // 配置
+    _config: Text3DProps = {
+        text: "",
+        fontType: "simhei",
+        size: 1,
+        curveSegments: 10,
+        height: 0.1, // 文字的厚度
+        bevelEnabled: true, // 斜角开启
+        bevelThickness: 0.02, // 斜角厚度
+        bevelSize: 0.015, // 斜角大小
+        bevelOffset: 0,// 斜角偏移
+        bevelSegments: 3,//斜角分段
+    }
+
+    // 设置文字
+    setText(text3DProps: Text3DProps) {
+
+        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);
+
+            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();
+                }
+            })
+
+        }
+
+    }
+
+
+}