three-base 2.0.1 → 2.0.2

package/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/ApngTexture.js

@@ -0,0 +1,61 @@
+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) {
+        super(document.createElement("canvas"));
+        this.loadApng(url);
+    }
+    // 获取时间戳
+    static TimeTemp = performance.now();
+    // 上一次更新时间
+    preUpdate = 0;
+    player;
+    // 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 {
+            return "";
+        }
+    }
+    // 加载apng图片
+    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((resolve) => {
+            reader.onload = () => resolve();
+            reader.readAsArrayBuffer(blob);
+        });
+        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"));
+    }
+}
+// 定时更新时间戳
+threeUtils.addEventListener("requestAnimationFrame", (e) => {
+    ApngTexture.TimeTemp = e.timeTemp;
+});

package/ApngTexture.ts

@@ -0,0 +1,91 @@
+
+
+import parseAPNG, { APNG } from "apng-js";
+import Player from "apng-js/types/library/player";
+import axios from "axios";
+import { CanvasTexture } from "three";
+import threeUtils from "./threeUtils";
+
+
+export default class ApngTexture extends CanvasTexture {
+
+    constructor(url: string) {
+        super(document.createElement("canvas"));
+        this.loadApng(url);
+    }
+    // 获取时间戳
+    static TimeTemp = performance.now();
+
+    // 上一次更新时间
+    preUpdate = 0;
+
+    player?: Player;
+
+    // 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 {
+
+            return "";
+
+        }
+
+    }
+
+    // 加载apng图片
+    async loadApng(url: string) {
+
+        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) => {
+            reader.onload = () => resolve();
+            reader.readAsArrayBuffer(blob);
+        });
+
+        const apng = (parseAPNG(reader.result as ArrayBuffer) as APNG);
+
+        this.dispose();
+        this.image.width = apng.width;
+        this.image.height = apng.height;
+        this.player = await apng.getPlayer(this.image.getContext("2d")!);
+    }
+
+}
+
+// 定时更新时间戳
+threeUtils.addEventListener("requestAnimationFrame", (e) => {
+    ApngTexture.TimeTemp = e.timeTemp;
+});

package/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/ApngTextureManage.js

@@ -0,0 +1,87 @@
+import parseAPNG from "apng-js";
+import axios from "axios";
+import { isEmpty } from "lodash";
+import { MirroredRepeatWrapping, TextureLoader } from "three";
+import threeUtils from "./threeUtils";
+/**
+ * apng 纹理管理对象
+ */
+class apngTextureManage {
+    constructor() {
+        // 初始化定时更新时间戳
+        if (apngTextureManage.isInit) {
+            apngTextureManage.isInit = false;
+            threeUtils.addEventListener("requestAnimationFrame5000", (e) => {
+                apngTextureManage.TimeTemp = e.timeTemp;
+            });
+        }
+    }
+    static TextureLoader = new TextureLoader();
+    static isInit = true;
+    // 获取时间戳
+    static TimeTemp = performance.now();
+    // 每个动态纹理的播放总时长
+    playTimes = new Map();
+    // 保存所有的动态纹理
+    anpgTextList = {};
+    // 获取动态纹理 需要每帧都获取一下
+    getTexture(path) {
+        // 如果 没有这个纹理就返回空同时开始加载这个纹理
+        if (!this.anpgTextList[path]) {
+            this.anpgTextList[path] = [];
+            this.loadApng(path);
+            return null;
+        }
+        else if (isEmpty(this.anpgTextList[path])) {
+            return null;
+        }
+        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) {
+        const res = await axios.get(url, { method: "post", responseType: "blob" });
+        const blob = new Blob([res.data]);
+        const reader = new FileReader();
+        await new Promise((resolve) => {
+            reader.onload = () => resolve();
+            reader.readAsArrayBuffer(blob);
+        });
+        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);
+            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;

package/ApngTextureManage.ts

@@ -0,0 +1,130 @@
+
+
+import parseAPNG, { APNG } from "apng-js";
+import axios from "axios";
+import { isEmpty } from "lodash";
+import { MirroredRepeatWrapping, Texture, TextureLoader } from "three";
+import threeUtils from "./threeUtils";
+
+
+
+/**
+ * apng 纹理管理对象
+ */
+class apngTextureManage {
+
+    constructor() {
+
+        // 初始化定时更新时间戳
+        if (apngTextureManage.isInit) {
+            apngTextureManage.isInit = false;
+            threeUtils.addEventListener("requestAnimationFrame5000", (e) => {
+                apngTextureManage.TimeTemp = e.timeTemp;
+            });
+        }
+
+    }
+
+    static TextureLoader = new TextureLoader();
+
+    static isInit = true;
+
+    // 获取时间戳
+    static TimeTemp = performance.now();
+
+    // 每个动态纹理的播放总时长
+    playTimes = new Map();
+
+    // 保存所有的动态纹理
+    anpgTextList: { [key: string]: Texture[] } = {};
+
+    // 获取动态纹理 需要每帧都获取一下
+    getTexture(path: string) {
+        // 如果 没有这个纹理就返回空同时开始加载这个纹理
+        if (!this.anpgTextList[path]) {
+            this.anpgTextList[path] = [];
+
+            this.loadApng(path);
+
+            return null;
+
+        } else if (isEmpty(this.anpgTextList[path])) {
+
+            return null;
+
+        } 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) {
+
+        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) => {
+            reader.onload = () => resolve();
+            reader.readAsArrayBuffer(blob);
+        });
+
+        const apng = (parseAPNG(reader.result as ArrayBuffer) as APNG);
+
+        // 存储播放时长
+        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!);
+
+            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;

package/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/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/EventMesh.ts

@@ -0,0 +1,79 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2022-03-20 12:55:37 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-02-07 11:19:56
+ */
+
+import { BoxGeometry, BufferGeometry, CylinderGeometry, DoubleSide, FrontSide, Material, Mesh, MeshBasicMaterial, MeshNormalMaterial } from "three";
+import threeUtils from "./threeUtils";
+
+// 碰撞的形状
+export enum CollisionShaere {
+  cube = "cube", // 正方体
+  cylinder = "cylinder" // 圆柱体
+}
+
+/**
+ * 碰撞检测用的模型
+ */
+export default class EventMesh extends Mesh<BufferGeometry, Material> {
+
+  constructor(type: CollisionShaere = 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: CollisionShaere) {
+
+    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/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;
+}