three-base 1.129.1 → 1.129.4

package/index.js

@@ -0,0 +1,34 @@
+// 基类
+export { default } from "./lib/ThreeBase";
+// 事件对象
+export { default as EventMesh } from "./lib/EventMesh";
+// 挤出模型
+export { default as ExtrudeMesh } from "./lib/ExtrudeMesh";
+// 关键帧动画对象
+export { default as KeyFrameAnimation } from "./lib/KeyFrameAnimation";
+//实例模型组对象
+export { default as InstancedGroupMesh } from "./lib/InstancedGroupMesh";
+//点光源
+export { default as PointLight } from "./lib/PointLight";
+//天空球
+export { default as Sky } from "./lib/Sky/Sky";
+//键盘控制器
+export { default as keyContorls } from "./lib/keyContorls";
+// 动画过度对象
+export { default as Transition } from "./lib/Transition";
+// 公共方法
+export { default as threeUtils } from "./lib/threeUtils";
+// 加载器
+export { default as threeLoader } from "./lib/threeLoader";
+// 第一人称控制器
+export { default as FPScontrol } from "./lib/FPScontrol";
+// 平面文字
+export { default as PlaneText } from "./lib/PlaneText";
+// 精灵文字
+export { default as SpriteText } from "three-spritetext";
+//精灵文本框
+export { default as SpriteModal1 } from "./lib/spriteModal1/SpriteModal1";
+//平面文本框
+export { default as PlaneModal1 } from "./lib/planeModal1/PlaneModal1";
+// 3D文字
+export { default as Text3D } from "./lib/Text3D/Text3D";

package/index.ts

@@ -49,4 +49,8 @@ export { default as SpriteText } from "three-spritetext";
 export { default as SpriteModal1 } from "./lib/spriteModal1/SpriteModal1";
 
 //平面文本框
-export { default as PlaneModal1 } from "./lib/planeModal1/PlaneModal1";
+export { default as PlaneModal1 } from "./lib/planeModal1/PlaneModal1";
+
+// 3D文字
+export { default as Text3D } from "./lib/Text3D/Text3D";
+export type { Text3DProps } from "./lib/Text3D/Text3D";

package/lib/ApngTexture.d.ts

@@ -0,0 +1,13 @@
+import { APNG } from "apng-js";
+import Player from "apng-js/types/library/player";
+import { CanvasTexture } from "three";
+export default class ApngTexture extends CanvasTexture {
+    constructor(url: string);
+    static TimeTemp: number;
+    preUpdate: number;
+    player?: Player;
+    apng?: APNG;
+    onUpdate: () => void;
+    getUuid(): number | "";
+    loadApng(url: string): Promise<void>;
+}

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

@@ -1,91 +1,61 @@
-
-
-import parseAPNG, { APNG } from "apng-js";
-import Player from "apng-js/types/library/player";
+import parseAPNG from "apng-js";
 import axios from "axios";
 import { CanvasTexture } from "three";
 import threeUtils from "./threeUtils";
-
-
 export default class ApngTexture extends CanvasTexture {
-
-    constructor(url: string) {
+    constructor(url) {
         super(document.createElement("canvas"));
         this.loadApng(url);
     }
     // 获取时间戳
     static TimeTemp = performance.now();
-
     // 上一次更新时间
     preUpdate = 0;
-
-    player?: Player;
-
+    player;
     // apng 对象
-    apng?: APNG;
-
+    apng;
     // 更新纹理
     onUpdate = () => {
-
         if (this.preUpdate === ApngTexture.TimeTemp) {
             return;
         }
-
         this.preUpdate = ApngTexture.TimeTemp;
-
         if (this.player) {
             this.player.renderNextFrame();
         }
     };
-
     // 获取当前帧id
     getUuid() {
-
         if (this.apng) {
-
             let currentTime = ApngTexture.TimeTemp % this.apng.playTime;
-
             let i = 0;
             while (this.apng.frames[i] && currentTime > this.apng.frames[i].delay) {
                 currentTime -= this.apng.frames[i].delay;
                 i++;
             }
-
             return this.apng.frames[i].delay;
-
-        } else {
-
+        }
+        else {
             return "";
-
         }
-
     }
-
     // 加载apng图片
-    async loadApng(url: string) {
-
+    async loadApng(url) {
         const res = await axios.get(url, { method: "post", responseType: "blob" });
-
         const blob = new Blob([res.data]);
-
         const reader = new FileReader();
-
-        await new Promise<void>((resolve) => {
+        await new Promise((resolve) => {
             reader.onload = () => resolve();
             reader.readAsArrayBuffer(blob);
         });
-
-        const apng = (parseAPNG(reader.result as ArrayBuffer) as APNG);
-
+        const apng = parseAPNG(reader.result);
         this.dispose();
         this.image.width = apng.width;
         this.image.height = apng.height;
-        this.player = await apng.getPlayer(this.image.getContext("2d")!);
+        this.player = await apng.getPlayer(this.image.getContext("2d"));
     }
-
 }
-
 // 定时更新时间戳
 threeUtils.addEventListener("requestAnimationFrame", (e) => {
     ApngTexture.TimeTemp = e.timeTemp;
-});
+});

package/lib/ApngTextureManage.d.ts

@@ -0,0 +1,18 @@
+import { Texture, TextureLoader } from "three";
+/**
+ * apng 纹理管理对象
+ */
+declare class apngTextureManage {
+    constructor();
+    static TextureLoader: TextureLoader;
+    static isInit: boolean;
+    static TimeTemp: number;
+    playTimes: Map<any, any>;
+    anpgTextList: {
+        [key: string]: Texture[];
+    };
+    getTexture(path: string): Texture;
+    loadApng(url: string): Promise<void>;
+}
+declare const ApngTextureManage: apngTextureManage;
+export default ApngTextureManage;

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

@@ -1,20 +1,13 @@
-
-
-import parseAPNG, { APNG } from "apng-js";
+import parseAPNG from "apng-js";
 import axios from "axios";
 import { isEmpty } from "lodash";
-import { MirroredRepeatWrapping, Texture, TextureLoader } from "three";
+import { MirroredRepeatWrapping, TextureLoader } from "three";
 import threeUtils from "./threeUtils";
-
-
-
 /**
  * apng 纹理管理对象
  */
 class apngTextureManage {
-
     constructor() {
-
         // 初始化定时更新时间戳
         if (apngTextureManage.isInit) {
             apngTextureManage.isInit = false;
@@ -22,109 +15,73 @@ class apngTextureManage {
                 apngTextureManage.TimeTemp = e.timeTemp;
             });
         }
-
     }
-
     static TextureLoader = new TextureLoader();
-
     static isInit = true;
-
     // 获取时间戳
     static TimeTemp = performance.now();
-
     // 每个动态纹理的播放总时长
     playTimes = new Map();
-
     // 保存所有的动态纹理
-    anpgTextList: { [key: string]: Texture[] } = {};
-
+    anpgTextList = {};
     // 获取动态纹理 需要每帧都获取一下
-    getTexture(path: string) {
+    getTexture(path) {
         // 如果 没有这个纹理就返回空同时开始加载这个纹理
         if (!this.anpgTextList[path]) {
             this.anpgTextList[path] = [];
-
             this.loadApng(path);
-
             return null;
-
-        } else if (isEmpty(this.anpgTextList[path])) {
-
+        }
+        else if (isEmpty(this.anpgTextList[path])) {
             return null;
-
-        } else {
-
+        }
+        else {
             const playTime = this.playTimes.get(path);
             let currentTime = apngTextureManage.TimeTemp % playTime;
-
             let i = 0;
             while (this.anpgTextList[path][i] && currentTime > Number(this.anpgTextList[path][i].name)) {
                 currentTime -= Number(this.anpgTextList[path][i].name);
                 i++;
             }
-
             this.anpgTextList[path][i].needsUpdate = true;
-
             return this.anpgTextList[path][i];
         }
     }
-
     // 加载apng图片
-    async loadApng(url: string) {
-
+    async loadApng(url) {
         const res = await axios.get(url, { method: "post", responseType: "blob" });
-
         const blob = new Blob([res.data]);
-
         const reader = new FileReader();
-
-        await new Promise<void>((resolve) => {
+        await new Promise((resolve) => {
             reader.onload = () => resolve();
             reader.readAsArrayBuffer(blob);
         });
-
-        const apng = (parseAPNG(reader.result as ArrayBuffer) as APNG);
-
+        const apng = parseAPNG(reader.result);
         // 存储播放时长
         this.playTimes.set(url, apng.playTime);
-
         // for (let i = 0; i < apng.frames.length; i++) {
         //     const frame = apng.frames[i];
         //     frame.createImage();
         //     await new Promise(resolve => frame.imageElement!.onload = resolve);
         // }
-
         for (let i = 0; i < apng.frames.length; i++) {
             const frame = apng.frames[i];
-
-            var blobUrl = URL.createObjectURL(frame.imageData!);
-
+            var blobUrl = URL.createObjectURL(frame.imageData);
             const texture = apngTextureManage.TextureLoader.load(blobUrl);
-
             texture.anisotropy = 16;
-
             texture.wrapS = texture.wrapT = MirroredRepeatWrapping;
-
             // export const RepeatWrapping: Wrapping;
             // export const ClampToEdgeWrapping: Wrapping;
             // export const MirroredRepeatWrapping: Wrapping;
-
             // magFilter: TextureFilter;
             // minFilter: TextureFilter;
-
-
             texture.name = String(frame.delay);
             texture.center.set(0.5, 0.5);
             texture.repeat.set(apng.width / frame.width, apng.height / frame.height);
             // texture.needsUpdate = true;
             this.anpgTextList[url].push(texture);
         }
-
     }
-
-
 }
-
 const ApngTextureManage = new apngTextureManage();
-
-export default ApngTextureManage;
+export default ApngTextureManage;

package/lib/EventMesh.d.ts

@@ -0,0 +1,18 @@
+import { BoxGeometry, BufferGeometry, CylinderGeometry, Material, Mesh, MeshNormalMaterial } from "three";
+export declare enum CollisionShaere {
+    cube = "cube",
+    cylinder = "cylinder"
+}
+/**
+ * 碰撞检测用的模型
+ */
+export default class EventMesh extends Mesh<BufferGeometry, Material> {
+    constructor(type?: CollisionShaere);
+    static type: typeof CollisionShaere;
+    static material: MeshNormalMaterial;
+    renderOrder: number;
+    static cubeGeo: BoxGeometry;
+    static cylinderGeo: CylinderGeometry;
+    isEventMesh: boolean;
+    setType(type: CollisionShaere): void;
+}

package/lib/EventMesh.js

@@ -0,0 +1,59 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-03-20 12:55:37
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-02-07 11:19:56
+ */
+import { BoxGeometry, CylinderGeometry, DoubleSide, Mesh, MeshBasicMaterial, MeshNormalMaterial } from "three";
+import threeUtils from "./threeUtils";
+// 碰撞的形状
+export var CollisionShaere;
+(function (CollisionShaere) {
+    CollisionShaere["cube"] = "cube";
+    CollisionShaere["cylinder"] = "cylinder"; // 圆柱体
+})(CollisionShaere || (CollisionShaere = {}));
+/**
+ * 碰撞检测用的模型
+ */
+export default class EventMesh extends Mesh {
+    constructor(type = CollisionShaere.cube) {
+        super();
+        this.material = EventMesh.material;
+        this.setType(type);
+        // 生产环境 不用渲染
+        if (threeUtils.isProd) {
+            this.material = new MeshBasicMaterial({
+                side: DoubleSide,
+                transparent: true,
+                opacity: 0.25,
+                alphaTest: 1
+            });
+        }
+    }
+    static type = CollisionShaere;
+    static material = new MeshNormalMaterial({
+        side: DoubleSide,
+        transparent: true,
+        opacity: 0.3,
+    });
+    renderOrder = 99;
+    // 正方体 网格模型
+    static cubeGeo = new BoxGeometry(1, 1, 1, 1, 1, 1);
+    // 圆柱体 网格模型
+    static cylinderGeo = new CylinderGeometry(1, 1, 1, 50, 1, false, 0, Math.PI * 2);
+    // 是否是碰撞检测专用的模型
+    isEventMesh = true;
+    setType(type) {
+        switch (type) {
+            case EventMesh.type.cube:
+                this.geometry = EventMesh.cubeGeo;
+                break;
+            case EventMesh.type.cylinder:
+                this.geometry = EventMesh.cylinderGeo;
+                break;
+            default:
+                break;
+        }
+        this.geometry.computeVertexNormals();
+    }
+}

package/lib/ExtrudeMesh.d.ts

@@ -0,0 +1,111 @@
+import { BufferGeometry, Material, Matrix4, Mesh, Vector2, Vector3 } from "three";
+export type ExtrudePath = {
+    vector3: [number, number, number];
+    radius: number;
+    segments: number;
+    scale: {
+        x: number;
+        y: number;
+    };
+    name: string;
+};
+export interface ExtrudeMeshProps {
+    paths: Array<ExtrudePath>;
+    shapePath: Array<[number, number]>;
+    closed: boolean;
+}
+/**
+ * 挤出模型
+ * 此组件适合自动生成 公路 河流山川等 2d 平面上的模型
+ *
+ * @export
+ * @class ExtrudeMesh
+ * @extends {Mesh<BufferGeometry, Material>}
+ */
+export default class ExtrudeMesh extends Mesh<BufferGeometry, Material> {
+    static temp1Vector2: Vector2;
+    static temp2Vector2: Vector2;
+    static temp3Vector2: Vector2;
+    static tempVector3: Vector3;
+    static temp1Vector3: Vector3;
+    static temp2Vector3: Vector3;
+    static temp3Vector3: Vector3;
+    static temp1Matrix4: Matrix4;
+    static temp2Matrix4: Matrix4;
+    static temp3Matrix4: Matrix4;
+    constructor(props: ExtrudeMeshProps, material?: Material);
+    pointerWidthRadius: Array<{
+        vector3: [number, number, number];
+        matrix: [
+            number,
+            number,
+            number,
+            number,
+            number,
+            number,
+            number,
+            number,
+            number,
+            number,
+            number,
+            number,
+            number,
+            number,
+            number,
+            number
+        ];
+    }>;
+    computerMatrix(vector1: [number, number, number], vector2: [number, number, number], scale: [number, number, number]): import("three").Matrix4Tuple;
+    /**
+     * @计算渐变值 computerGradient([3,2,4], 0.3);
+     * @渐变区间 values:number[]
+     * @百分比 percentage:number
+     */
+    computerGradient(values: number[], percentage: number): number;
+    computerPointerWidthRadius(paths: Array<ExtrudePath>, closed: boolean): void;
+    computerPathLength(points: [number, number, number][]): number;
+    setExtrudeMesh(startP: [number, number, number], // 起点位置
+    startMatrix4: [
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number
+    ], // 起点位置的矩阵
+    endP: [number, number, number], // 终点位置
+    endMatrix4: [
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number
+    ], // 终点位置的矩阵
+    uvx: number, // uv.x 的起始位置
+    shapePath: Array<[number, number]>): {
+        geometryPoint: number[];
+        uvPoint: number[];
+    };
+    updateGeometry(props: ExtrudeMeshProps): void;
+}