three-base 2.0.25 → 2.0.26

package/InstancedGroupMesh.d.ts

@@ -1,15 +1,16 @@
-import { Group, InstancedMesh, Matrix4, Mesh, Vector3, Color } from 'three';
+import { Color, Group, InstancedMesh, Matrix4, Mesh } from 'three';
 export default class InstancedGroupMesh extends Mesh {
-    url: string;
+    children: InstancedMesh[];
     isInstancedGroupMesh: boolean;
     count: number;
-    size: Vector3;
     meshCollect: Record<string, Mesh[]>;
     instanceCollect: Record<string, InstancedMesh>;
-    children: InstancedMesh[];
     static matrix: Matrix4;
     constructor(group: Group, count: number);
     computeBoundingSphere: import("lodash").DebouncedFunc<() => void>;
     setMatrixAt(index: number, matrix: Matrix4): void;
     setColorAt(index: number, color: (instancedMesh: InstancedMesh) => Color | undefined): void;
+    updateMatrixWorld(force?: boolean): void;
+    addEventListener(name: string, callback: (e: any) => void): void;
+    removeEventListener(name: string, callback: (e: any) => void): void;
 }

package/InstancedGroupMesh.js

@@ -2,29 +2,26 @@
  * @Author: xiaosihan
  * @Date: 2023-02-21 09:55:52
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2024-01-20 21:58:20
+ * @Last Modified time: 2024-01-27 17:41:26
  */
 import { throttle } from 'lodash';
-import { InstancedMesh, Matrix4, Mesh, Vector3 } from 'three';
-import threeUtils from './threeUtils';
+import { InstancedMesh, Matrix4, Mesh } from 'three';
 // 模型组转成 实例对象
 export default class InstancedGroupMesh extends Mesh {
-    url = "";
     isInstancedGroupMesh = true;
     count = 0;
-    size = new Vector3(1, 1, 1);
     meshCollect = {};
     instanceCollect = {};
     static matrix = new Matrix4();
     constructor(group, count) {
         super();
-        this.size.copy(threeUtils.getSize(group));
         this.count = count;
         const { meshCollect, instanceCollect } = this;
         group.updateMatrixWorld(true);
         // collect all mesh counts, in case there are more than one copy of the same mesh in this group
         group.traverse((obj) => {
             const mesh = obj;
+            obj.userData = this.userData;
             if (mesh.isMesh) {
                 mesh.matrixWorld.decompose(mesh.position, mesh.quaternion, mesh.scale);
                 mesh.rotation.setFromQuaternion(mesh.quaternion);
@@ -49,8 +46,6 @@ export default class InstancedGroupMesh extends Mesh {
             const meshes = meshCollect[uuid];
             const mesh = meshes[0];
             const instancedMesh = new InstancedMesh(mesh.geometry, mesh.material, meshes.length * count);
-            instancedMesh.name = mesh.name;
-            instancedMesh.frustumCulled = false;
             instanceCollect[uuid] = instancedMesh;
             this.add(instancedMesh);
         });
@@ -88,4 +83,24 @@ export default class InstancedGroupMesh extends Mesh {
             });
         });
     }
+    // 同步属性
+    updateMatrixWorld(force) {
+        super.updateMatrixWorld(force);
+        const { cursor, enableEvent } = this.userData;
+        this.traverse(obj => {
+            Object.assign(obj.userData, { cursor, enableEvent });
+        });
+    }
+    // 事件监听
+    addEventListener(name, callback) {
+        this.children.map(mesh => {
+            mesh.addEventListener(name, callback);
+        });
+    }
+    // 取消事件的监听
+    removeEventListener(name, callback) {
+        this.children.map(mesh => {
+            mesh.removeEventListener(name, callback);
+        });
+    }
 }

package/InstancedGroupMesh.ts

@@ -2,37 +2,29 @@
  * @Author: xiaosihan 
  * @Date: 2023-02-21 09:55:52 
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2024-01-20 21:58:20
+ * @Last Modified time: 2024-01-27 17:41:26
  */
 
 import { throttle } from 'lodash';
-import { Group, InstancedMesh, Material, Matrix4, Mesh, Vector3, Color } from 'three'
-import threeUtils from './threeUtils';
+import { Color, Group, InstancedMesh, Material, Matrix4, Mesh } from 'three';
 
 // 模型组转成 实例对象
 export default class InstancedGroupMesh extends Mesh {
 
-    url = "";
+    declare children: InstancedMesh[];
 
     isInstancedGroupMesh = true
 
-    count: number = 0
-
-    size = new Vector3(1, 1, 1);
+    count: number = 0;
 
     meshCollect: Record<string, Mesh[]> = {}
 
     instanceCollect: Record<string, InstancedMesh> = {}
 
-    declare children: InstancedMesh[];
-
     static matrix = new Matrix4()
 
     constructor(group: Group, count: number) {
         super()
-
-        this.size.copy(threeUtils.getSize(group));
-
         this.count = count
 
         const { meshCollect, instanceCollect } = this
@@ -41,7 +33,10 @@ export default class InstancedGroupMesh extends Mesh {
 
         // collect all mesh counts, in case there are more than one copy of the same mesh in this group
         group.traverse((obj) => {
-            const mesh = obj as Mesh
+            const mesh = obj as Mesh;
+
+            obj.userData = this.userData;
+
             if (mesh.isMesh) {
 
                 mesh.matrixWorld.decompose(mesh.position, mesh.quaternion, mesh.scale);
@@ -68,15 +63,13 @@ export default class InstancedGroupMesh extends Mesh {
         Object.keys(meshCollect).forEach(uuid => {
             const meshes = meshCollect[uuid]
             const mesh = meshes[0]
+
             const instancedMesh = new InstancedMesh(mesh.geometry, mesh.material, meshes.length * count)
-            instancedMesh.name = mesh.name;
-            instancedMesh.frustumCulled = false;
-            instanceCollect[uuid] = instancedMesh
+            instanceCollect[uuid] = instancedMesh;
             this.add(instancedMesh)
         })
     }
 
-
     // 更新包围盒
     computeBoundingSphere = throttle(() => {
         this.traverse(m => {
@@ -91,12 +84,10 @@ export default class InstancedGroupMesh extends Mesh {
             collect.forEach((mesh: Mesh, i: number) => {
                 InstancedGroupMesh.matrix.copy(mesh.matrix)
                 InstancedGroupMesh.matrix.premultiply(matrix)
-
                 instancedMesh.setMatrixAt(collect.length * index + i, InstancedGroupMesh.matrix);
                 instancedMesh.instanceMatrix.needsUpdate = true;
             })
         })
-
         this.computeBoundingSphere();
     }
 
@@ -115,4 +106,28 @@ export default class InstancedGroupMesh extends Mesh {
         })
     }
 
-}
+    // 同步属性
+    updateMatrixWorld(force?: boolean): void {
+        super.updateMatrixWorld(force);
+        const { cursor, enableEvent } = this.userData;
+        this.traverse(obj => {
+            Object.assign(obj.userData, { cursor, enableEvent });
+        });
+    }
+
+    // 事件监听
+    addEventListener(name: string, callback: (e: any) => void) {
+        this.children.map(mesh => {
+            mesh.addEventListener(name, callback);
+        });
+    }
+
+    // 取消事件的监听
+    removeEventListener(name: string, callback: (e: any) => void) {
+        this.children.map(mesh => {
+            mesh.removeEventListener(name, callback);
+        });
+    }
+
+}
+

package/ThreeMouse.d.ts

@@ -11,7 +11,7 @@ export interface ThreeMouseEvent extends Intersection {
     y: number;
 }
 /**
- *  harp.gl 专用的鼠标拾取模型对象
+ *  three.js 专用的鼠标拾取模型对象
  */
 export default class ThreeMouse {
     constructor(renderer: THREE.WebGLRenderer, camera: THREE.Camera, scene: THREE.Scene);

package/ThreeMouse.js

@@ -8,7 +8,7 @@ import * as THREE from "three";
 import { Raycaster } from "three";
 import { debounce } from "lodash";
 /**
- *  harp.gl 专用的鼠标拾取模型对象
+ *  three.js 专用的鼠标拾取模型对象
  */
 export default class ThreeMouse {
     constructor(renderer, camera, scene) {
@@ -108,7 +108,7 @@ export default class ThreeMouse {
         let intersection = this._getSelected(meshs);
         if (intersection) {
             const { face, object } = intersection;
-            face && face.normal.applyMatrix4(object.matrixWorld);
+            // face && face.normal.applyMatrix4(object.matrixWorld);
             const MouseEvent = Object.assign(intersection, {
                 renderer: this._renderer,
                 camera: this._camera,

package/ThreeMouse.ts

@@ -21,7 +21,7 @@ export interface ThreeMouseEvent extends Intersection {
 
 
 /**
- *  harp.gl 专用的鼠标拾取模型对象
+ *  three.js 专用的鼠标拾取模型对象
  */
 export default class ThreeMouse {
 
@@ -152,7 +152,7 @@ export default class ThreeMouse {
 
         if (intersection) {
             const { face, object } = intersection;
-            face && face.normal.applyMatrix4(object.matrixWorld);
+            // face && face.normal.applyMatrix4(object.matrixWorld);
             const MouseEvent: ThreeMouseEvent = Object.assign(intersection, {  // 将来可能用到的对象
                 renderer: this._renderer,
                 camera: this._camera,

package/Transition.js

@@ -47,7 +47,9 @@ export default class Transition {
     _delay = 0;
     // 设置过渡时间
     setDuration(duration = 500) {
-        this._duration = duration;
+        setTimeout(() => {
+            this._duration = duration;
+        }, 0);
         return this;
     }
     // 设置延时

package/Transition.ts

@@ -69,7 +69,9 @@ export default class Transition {
 
     // 设置过渡时间
     setDuration(duration = 500): this {
-        this._duration = duration;
+        setTimeout(() => {
+            this._duration = duration;
+        }, 0);
         return this;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "three-base",
-    "version": "2.0.25",
+    "version": "2.0.26",
     "description": "three 3d three-base",
     "publishConfig": {
         "registry": "https://registry.npmjs.org/"

package/threeLoader.d.ts

@@ -1,4 +1,4 @@
-import { EventDispatcher, Texture, TextureLoader } from "three";
+import { EventDispatcher, Object3D, Texture, TextureLoader } from "three";
 import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
@@ -16,6 +16,8 @@ declare class ThreeLoader extends EventDispatcher {
     stlLoader: STLLoader;
     mtlLoader: MTLLoader;
     gltfLoader: GLTFLoader;
+    /** 加载模型支持glb,fbx,stl,obj */
+    loadModal(url: string): Promise<Object3D<import("three").Object3DEventMap>>;
     onload: boolean;
 }
 declare const threeLoader: ThreeLoader;

package/threeLoader.js

@@ -4,7 +4,7 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-02-07 11:11:48
  */
-import { CanvasTexture, DefaultLoadingManager, EventDispatcher, RepeatWrapping, TextureLoader, VideoTexture } from "three";
+import { CanvasTexture, DefaultLoadingManager, EventDispatcher, Mesh, MeshLambertMaterial, Object3D, RepeatWrapping, TextureLoader, VideoTexture } from "three";
 import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
@@ -114,6 +114,37 @@ class ThreeLoader extends EventDispatcher {
         loader.setDRACOLoader(dracoLoader);
         return loader;
     })();
+    /** 加载模型支持glb,fbx,stl,obj */
+    async loadModal(url) {
+        let Object3d = new Object3D();
+        if (/\.fbx$/i.test(url)) {
+            await threeLoader.fbxLoader.loadAsync(url).then(res => {
+                Object3d = res;
+            }).catch(() => {
+                console.error(`${url},加载失败`);
+            });
+        }
+        else if (/\.(gltf|glb)$/i.test(url)) {
+            await threeLoader.gltfLoader.loadAsync(url).then(res => {
+                Object3d = res.scene;
+                Object3d.animations = res.animations;
+            }).catch(() => {
+                console.error(`${url},加载失败`);
+            });
+        }
+        else if (/\.stl$/i.test(url)) {
+            await threeLoader.stlLoader.loadAsync(url).then(geometry => {
+                const material = new MeshLambertMaterial();
+                Object3d = new Mesh(geometry, material);
+            }).catch(() => {
+                console.error(`${url},加载失败`);
+            });
+        }
+        else {
+            throw new Error(`${url},不支持的格式`);
+        }
+        return Object3d;
+    }
     // 是否加载完成
     onload = true;
 }

package/threeLoader.ts

@@ -5,7 +5,7 @@
  * @Last Modified time: 2023-02-07 11:11:48
  */
 
-import { CanvasTexture, DefaultLoadingManager, EventDispatcher, RepeatWrapping, SRGBColorSpace, Texture, TextureLoader, VideoTexture } from "three";
+import { CanvasTexture, DefaultLoadingManager, EventDispatcher, Mesh, MeshLambertMaterial, Object3D, RepeatWrapping, SRGBColorSpace, Texture, TextureLoader, VideoTexture } from "three";
 import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
@@ -141,6 +141,38 @@ class ThreeLoader extends EventDispatcher {
         return loader;
     })()
 
+
+    /** 加载模型支持glb,fbx,stl,obj */
+    async loadModal(url: string) {
+        let Object3d = new Object3D();
+
+        if (/\.fbx$/i.test(url)) {
+            await threeLoader.fbxLoader.loadAsync(url).then(res => {
+                Object3d = res;
+            }).catch(() => {
+                console.error(`${url},加载失败`);
+            })
+        } else if (/\.(gltf|glb)$/i.test(url)) {
+            await threeLoader.gltfLoader.loadAsync(url).then(res => {
+                Object3d = res.scene;
+                Object3d.animations = res.animations;
+            }).catch(() => {
+                console.error(`${url},加载失败`);
+            })
+        } else if (/\.stl$/i.test(url)) {
+            await threeLoader.stlLoader.loadAsync(url).then(geometry => {
+                const material = new MeshLambertMaterial();
+                Object3d = new Mesh(geometry, material);
+            }).catch(() => {
+                console.error(`${url},加载失败`);
+            })
+        } else {
+            throw new Error(`${url},不支持的格式`);
+        }
+
+        return Object3d;
+    }
+
     // 是否加载完成
     onload = true;