three-base 2.0.86 → 2.0.88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "three-base",
-  "version": "2.0.86",
+  "version": "2.0.88",
   "description": "three 3d three-base",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -18,7 +18,7 @@
   "module": "index.js",
   "types": "",
   "files": [
-    "/**/*.ts",
+    "/**/*.d.ts",
     "/**/*.js",
     "/**/*.tsx",
     "/**/*.css",

package/threeLoader.d.ts

@@ -7,6 +7,7 @@ import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
 import { USDZLoader } from "three/examples/jsm/loaders/USDZLoader";
 declare class ThreeLoader extends EventDispatcher {
     constructor();
+    uuid: string;
     anisotropy: number;
     setAnisotropy(v: number): void;
     textureMap: Map<string, Texture>;

package/threeLoader.js

@@ -2,7 +2,7 @@
  * @Author: xiaosihan
  * @Date: 2022-04-07 16:42:26
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-02-07 11:11:48
+ * @Last Modified time: 2024-09-11 11:43:31
  */
 import { CanvasTexture, DefaultLoadingManager, EventDispatcher, Mesh, MeshStandardMaterial, RepeatWrapping, TextureLoader, VideoTexture, } from "three";
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
@@ -24,6 +24,7 @@ import dracoDecoderJS from "./lib/draco/draco_decoder.js?url";
 import axios from "axios";
 import dracoDecoderWASM from "./lib/draco/draco_decoder.wasm?url";
 import threeUtils from "./threeUtils";
+import { generateUUID } from "three/src/math/MathUtils";
 // 加载器
 class ThreeLoader extends EventDispatcher {
     constructor() {
@@ -57,6 +58,7 @@ class ThreeLoader extends EventDispatcher {
             return new_url;
         });
     }
+    uuid = generateUUID();
     // 各向异性
     anisotropy = 16;
     // 设置各向异性 由渲染器来调用并设置

package/ApngTexture.ts

@@ -1,91 +0,0 @@
-
-
-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: any) => {
-    ApngTexture.TimeTemp = e.timeTemp;
-});

package/ApngTextureManage.ts

@@ -1,130 +0,0 @@
-
-
-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: any) => {
-                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.ts

@@ -1,79 +0,0 @@
-/*
- * @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();
-
-
-  }
-
-}