three-base 1.129.15 → 2.0.1

package/README.md

@@ -2,6 +2,7 @@
 .创建一个 homeRender.ts 模块
 import { AmbientLight, BoxGeometry, Mesh, MeshLambertMaterial, PointLight } from "three";
 import ThreeBase, { Transition } from "three-base";
+import Transition from "three-base/Transition";
 
 // 做项目找我 qq:389652405
 class HomeRender extends ThreeBase {

package/index.js

@@ -1,38 +1,2 @@
 // 基类
-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/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 "./lib/SpriteText";
-// 精灵文字样式2
-export { default as SpriteText2 } from "./lib/SpriteText2";
-//精灵文本框
-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";
-// html面板
-export { default as PlaneWithHtml } from "./lib/PlaneWithHtml";
+export { default } from "./ThreeBase";

package/index.ts

@@ -1,62 +1,2 @@
 // 基类
-export { default } from "./lib/ThreeBase";
-
-// 事件对象
-export { default as EventMesh } from "./lib/EventMesh";
-
-// 挤出模型
-export { default as ExtrudeMesh } from "./lib/ExtrudeMesh";
-export type { ExtrudePath } from "./lib/ExtrudeMesh";
-export type { ExtrudeMeshProps } from "./lib/ExtrudeMesh";
-
-
-// 关键帧动画对象
-export { default as KeyFrameAnimation } from "./lib/KeyFrameAnimation";
-export type { KeyframeAnimationProps } from "./lib/KeyFrameAnimation";
-export type { Keyframe } from "./lib/KeyFrameAnimation";
-
-//实例模型组对象
-export { default as InstancedGroupMesh } from "./lib/InstancedGroupMesh";
-
-//点光源
-export { default as PointLight } from "./lib/PointLight/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 "./lib/SpriteText";
-
-// 精灵文字样式2
-export { default as SpriteText2 } from "./lib/SpriteText2";
-
-//精灵文本框
-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";
-export type { Text3DProps } from "./lib/Text3D/Text3D";
-
-// html面板
-export { default as PlaneWithHtml } from "./lib/PlaneWithHtml";
+export { default } from "./ThreeBase";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "three-base",
-    "version": "1.129.15",
+    "version": "2.0.1",
     "description": "three 3d three-base",
     "repository": {
         "type": "git",
@@ -17,7 +17,6 @@
     "files": [
         "index.js",
         "index.ts",
-        "index.js",
         "declare.d.ts",
         "lib/*.js",
         "lib/*.ts",
@@ -41,9 +40,9 @@
     "dependencies": {
         "apng-js": "^1",
         "lodash": "^4",
-        "three": "0.129.0",
+        "three": "^0.152.0",
         "dexie": "^3",
-        "@types/three": "0.152.0",
+        "@types/three": "^0.152.0",
         "@types/lodash": "^4",
         "vite": "*",
         "@types/node": "*",

package/lib/ApngTexture.d.ts

@@ -1,13 +0,0 @@
-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.js

@@ -1,61 +0,0 @@
-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/lib/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) => {
-    ApngTexture.TimeTemp = e.timeTemp;
-});

package/lib/ApngTextureManage.d.ts

@@ -1,18 +0,0 @@
-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.js

@@ -1,87 +0,0 @@
-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/lib/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) => {
-                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/lib/EventMesh.d.ts

@@ -1,18 +0,0 @@
-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

@@ -1,59 +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, 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();
-    }
-}