three-base 2.0.129 → 2.0.134

package/ApngTexture.d.ts

@@ -1,13 +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>;
-}
+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

@@ -1,61 +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;
-});
+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/ApngTextureManage.d.ts

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

@@ -1,87 +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;
+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/DirectionalLight.d.ts

@@ -0,0 +1,6 @@
+import { DirectionalLight as THREEDirectionalLight } from "three";
+/** 平行光（dev 模式显示方向箭头 + 阴影范围线框） */
+export default class DirectionalLight extends THREEDirectionalLight {
+    constructor(color?: string, intensity?: number);
+    private _devGroup;
+}

package/DirectionalLight.js

@@ -0,0 +1,68 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2024-06-08 14:00:00
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2024-06-08 14:00:00
+ */
+import { DirectionalLight as THREEDirectionalLight, Group, BufferGeometry, BufferAttribute, LineBasicMaterial, LineSegments, ConeGeometry, MeshBasicMaterial, Mesh, } from "three";
+import threeUtils from "./threeUtils";
+import SpriteText from "./SpriteText";
+/** 平行光（dev 模式显示方向箭头 + 阴影范围线框） */
+export default class DirectionalLight extends THREEDirectionalLight {
+    constructor(color = "#fff", intensity = 1) {
+        super(color, intensity);
+    }
+    /* ============ dev 模式可视化 ============ */
+    _devGroup = threeUtils.isDev && (() => {
+        const group = new Group();
+        // ——— 方向箭头 ———
+        const arrVerts = new Float32Array([
+            0, 0, 0.3, 0, 0, -2,
+            0, 0, -2, -0.2, 0, -1.6,
+            0, 0, -2, 0.2, 0, -1.6,
+        ]);
+        const arrGeo = new BufferGeometry();
+        arrGeo.setAttribute("position", new BufferAttribute(arrVerts, 3));
+        const arrLine = new LineSegments(arrGeo, new LineBasicMaterial({
+            color: this.color, depthTest: false,
+        }));
+        group.add(arrLine);
+        // ——— 阴影范围线框 ———
+        const half = 2;
+        const rectVerts = new Float32Array([
+            -half, -half, -2.2, half, -half, -2.2,
+            half, -half, -2.2, half, half, -2.2,
+            half, half, -2.2, -half, half, -2.2,
+            -half, half, -2.2, -half, -half, -2.2,
+        ]);
+        const rectGeo = new BufferGeometry();
+        rectGeo.setAttribute("position", new BufferAttribute(rectVerts, 3));
+        const rectLine = new LineSegments(rectGeo, new LineBasicMaterial({
+            color: this.color, depthTest: false,
+        }));
+        group.add(rectLine);
+        // ——— 小锥体箭头头部 ———
+        const cone = new Mesh(new ConeGeometry(0.15, 0.35, 6), new MeshBasicMaterial({ color: this.color, depthTest: false }));
+        cone.position.set(0, 0, -2);
+        cone.rotation.x = Math.PI / 2;
+        group.add(cone);
+        // ——— 标签 ———
+        const label = new SpriteText("平行光\n\n");
+        label.renderOrder = Infinity;
+        label.padding = 4;
+        label.strokeColor = "#333";
+        label.strokeWidth = 2;
+        label.position.set(0, -0.5, 0);
+        label.visible = false;
+        label.material.color = this.color;
+        label.material.sizeAttenuation = false;
+        label.scale.multiplyScalar(0.003);
+        group.add(label);
+        // ——— 交互 ———
+        group.userData = { cursor: "pointer" };
+        group.addEventListener("mouseenter", () => { label.visible = true; });
+        group.addEventListener("mouseleave", () => { label.visible = false; });
+        this.add(group);
+        return group;
+    })();
+}

package/EventMesh.d.ts

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

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