three-base 2.0.23 → 2.0.25

package/InstancedGroupMesh.d.ts

@@ -1,10 +1,15 @@
-import * as THREE from 'three';
-export default class InstancedGroupMesh extends THREE.Mesh {
+import { Group, InstancedMesh, Matrix4, Mesh, Vector3, Color } from 'three';
+export default class InstancedGroupMesh extends Mesh {
+    url: string;
     isInstancedGroupMesh: boolean;
     count: number;
-    meshCollect: Record<string, THREE.Mesh[]>;
-    instanceCollect: Record<string, THREE.InstancedMesh>;
-    static matrix: THREE.Matrix4;
-    constructor(group: THREE.Group, count: number);
-    setMatrixAt(index: number, matrix: THREE.Matrix4): void;
+    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;
 }

package/InstancedGroupMesh.js

@@ -2,18 +2,23 @@
  * @Author: xiaosihan
  * @Date: 2023-02-21 09:55:52
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-02-26 14:42:21
+ * @Last Modified time: 2024-01-20 21:58:20
  */
-import * as THREE from 'three';
+import { throttle } from 'lodash';
+import { InstancedMesh, Matrix4, Mesh, Vector3 } from 'three';
+import threeUtils from './threeUtils';
 // 模型组转成 实例对象
-export default class InstancedGroupMesh extends THREE.Mesh {
+export default class InstancedGroupMesh extends Mesh {
+    url = "";
     isInstancedGroupMesh = true;
     count = 0;
+    size = new Vector3(1, 1, 1);
     meshCollect = {};
     instanceCollect = {};
-    static matrix = new THREE.Matrix4();
+    static matrix = new Matrix4();
     constructor(group, count) {
         super();
+        this.size.copy(threeUtils.getSize(group));
         this.count = count;
         const { meshCollect, instanceCollect } = this;
         group.updateMatrixWorld(true);
@@ -43,11 +48,19 @@ export default class InstancedGroupMesh extends THREE.Mesh {
         Object.keys(meshCollect).forEach(uuid => {
             const meshes = meshCollect[uuid];
             const mesh = meshes[0];
-            const instancedMesh = new THREE.InstancedMesh(mesh.geometry, mesh.material, meshes.length * count);
+            const instancedMesh = new InstancedMesh(mesh.geometry, mesh.material, meshes.length * count);
+            instancedMesh.name = mesh.name;
+            instancedMesh.frustumCulled = false;
             instanceCollect[uuid] = instancedMesh;
             this.add(instancedMesh);
         });
     }
+    // 更新包围盒
+    computeBoundingSphere = throttle(() => {
+        this.traverse(m => {
+            m.computeBoundingSphere();
+        });
+    }, 1000);
     setMatrixAt(index, matrix) {
         Object.keys(this.meshCollect).forEach(uuid => {
             const instancedMesh = this.instanceCollect[uuid];
@@ -59,5 +72,20 @@ export default class InstancedGroupMesh extends THREE.Mesh {
                 instancedMesh.instanceMatrix.needsUpdate = true;
             });
         });
+        this.computeBoundingSphere();
+    }
+    // 设置颜色
+    setColorAt(index, color) {
+        Object.keys(this.meshCollect).forEach(uuid => {
+            const instancedMesh = this.instanceCollect[uuid];
+            const collect = this.meshCollect[uuid];
+            collect.forEach((mesh, i) => {
+                const c = color(instancedMesh);
+                if (c) {
+                    instancedMesh.setColorAt(collect.length * index + i, c);
+                    instancedMesh.instanceColor.needsUpdate = true;
+                }
+            });
+        });
     }
 }

package/InstancedGroupMesh.ts

@@ -2,26 +2,37 @@
  * @Author: xiaosihan 
  * @Date: 2023-02-21 09:55:52 
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-02-26 14:42:21
+ * @Last Modified time: 2024-01-20 21:58:20
  */
 
-import * as THREE from 'three'
+import { throttle } from 'lodash';
+import { Group, InstancedMesh, Material, Matrix4, Mesh, Vector3, Color } from 'three'
+import threeUtils from './threeUtils';
 
 // 模型组转成 实例对象
-export default class InstancedGroupMesh extends THREE.Mesh {
+export default class InstancedGroupMesh extends Mesh {
+
+    url = "";
+
     isInstancedGroupMesh = true
 
     count: number = 0
 
-    meshCollect: Record<string, THREE.Mesh[]> = {}
+    size = new Vector3(1, 1, 1);
+
+    meshCollect: Record<string, Mesh[]> = {}
 
-    instanceCollect: Record<string, THREE.InstancedMesh> = {}
+    instanceCollect: Record<string, InstancedMesh> = {}
 
-    static matrix = new THREE.Matrix4()
+    declare children: InstancedMesh[];
 
-    constructor(group: THREE.Group, count: number) {
+    static matrix = new Matrix4()
+
+    constructor(group: Group, count: number) {
         super()
 
+        this.size.copy(threeUtils.getSize(group));
+
         this.count = count
 
         const { meshCollect, instanceCollect } = this
@@ -30,7 +41,7 @@ export default class InstancedGroupMesh extends THREE.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 THREE.Mesh
+            const mesh = obj as Mesh
             if (mesh.isMesh) {
 
                 mesh.matrixWorld.decompose(mesh.position, mesh.quaternion, mesh.scale);
@@ -38,7 +49,7 @@ export default class InstancedGroupMesh extends THREE.Mesh {
                 mesh.updateMatrix();
 
                 // same geometry and same material consider as the same mesh
-                const uuid = mesh.geometry.uuid + '/' + (mesh.material as THREE.Material).uuid
+                const uuid = mesh.geometry.uuid + '/' + (mesh.material as Material).uuid
 
                 if (meshCollect[uuid]) {
                     meshCollect[uuid].push(mesh)
@@ -57,18 +68,27 @@ export default class InstancedGroupMesh extends THREE.Mesh {
         Object.keys(meshCollect).forEach(uuid => {
             const meshes = meshCollect[uuid]
             const mesh = meshes[0]
-
-            const instancedMesh = new THREE.InstancedMesh(mesh.geometry, mesh.material, meshes.length * count)
+            const instancedMesh = new InstancedMesh(mesh.geometry, mesh.material, meshes.length * count)
+            instancedMesh.name = mesh.name;
+            instancedMesh.frustumCulled = false;
             instanceCollect[uuid] = instancedMesh
             this.add(instancedMesh)
         })
     }
 
-    setMatrixAt(index: number, matrix: THREE.Matrix4) {
+
+    // 更新包围盒
+    computeBoundingSphere = throttle(() => {
+        this.traverse(m => {
+            (m as InstancedMesh).computeBoundingSphere();
+        })
+    }, 1000)
+
+    setMatrixAt(index: number, matrix: Matrix4) {
         Object.keys(this.meshCollect).forEach(uuid => {
             const instancedMesh = this.instanceCollect[uuid]
             const collect = this.meshCollect[uuid]
-            collect.forEach((mesh: THREE.Mesh, i: number) => {
+            collect.forEach((mesh: Mesh, i: number) => {
                 InstancedGroupMesh.matrix.copy(mesh.matrix)
                 InstancedGroupMesh.matrix.premultiply(matrix)
 
@@ -76,5 +96,23 @@ export default class InstancedGroupMesh extends THREE.Mesh {
                 instancedMesh.instanceMatrix.needsUpdate = true;
             })
         })
+
+        this.computeBoundingSphere();
     }
+
+    // 设置颜色
+    setColorAt(index: number, color: (instancedMesh: InstancedMesh) => Color | undefined) {
+        Object.keys(this.meshCollect).forEach(uuid => {
+            const instancedMesh = this.instanceCollect[uuid]
+            const collect = this.meshCollect[uuid]
+            collect.forEach((mesh: Mesh, i: number) => {
+                const c = color(instancedMesh);
+                if (c) {
+                    instancedMesh.setColorAt(collect.length * index + i, c);
+                    instancedMesh.instanceColor!.needsUpdate = true;
+                }
+            })
+        })
+    }
+
 }

package/InstancedMeshBase/InstancedMeshBase.d.ts

@@ -0,0 +1,4 @@
+import { Group } from "three";
+export default class InstancedMeshBase extends Group {
+    constructor();
+}

package/InstancedMeshBase/InstancedMeshBase.js

@@ -0,0 +1,13 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2024-02-05 09:31:57
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2024-02-05 09:40:12
+ */
+import { Group } from "three";
+// 数组实例模型
+export default class InstancedMeshBase extends Group {
+    constructor() {
+        super();
+    }
+}

package/InstancedMeshBase/InstancedMeshBase.ts

@@ -0,0 +1,18 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2024-02-05 09:31:57 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2024-02-05 09:40:12
+ */
+
+import { Group } from "three";
+
+// 数组实例模型
+export default class InstancedMeshBase extends Group {
+    constructor() {
+        super();
+    }
+
+
+    
+}

package/MeshBase.d.ts

@@ -0,0 +1,4 @@
+import { Group } from "three";
+export default class MeshBase extends Group {
+    constructor();
+}

package/MeshBase.js

@@ -0,0 +1,13 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2024-01-29 10:08:40
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2024-02-05 09:40:17
+ */
+import { Group } from "three";
+// 基础模型加载对象
+export default class MeshBase extends Group {
+    constructor() {
+        super();
+    }
+}

package/MeshBase.ts

@@ -0,0 +1,19 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2024-01-29 10:08:40
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2024-02-05 09:40:17
+ */
+
+import { Group } from "three";
+
+// 基础模型加载对象
+export default class MeshBase extends Group {
+
+    constructor() {
+        super();
+    }
+
+
+
+}

package/PlaneText.d.ts

@@ -22,10 +22,10 @@ export default class PlaneText extends Mesh {
     spriteText: SpriteText;
     material: MeshBasicMaterial;
     set(parame: Props): void;
-    get(prop: keyof SpriteText): string | number | boolean | Vector3 | import("three").Object3D<import("three").Object3DEventMap> | import("three").BufferGeometry<import("three").NormalBufferAttributes> | ((force?: boolean) => void) | import("three").Object3D<import("three").Object3DEventMap>[] | HTMLCanvasElement | import("three").Vector2 | import("three").Material | Record<string, any> | import("three").Matrix4 | import("three").Quaternion | (<T extends keyof import("three").Object3DEventMap>(event: import("three").BaseEvent<T> & import("three").Object3DEventMap[T]) => void) | import("three").Euler | ((callback: (object: import("three").Object3D<import("three").Object3DEventMap>) => any) => void) | import("three").Matrix3 | import("three").Layers | import("three").AnimationClip[] | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, shadowCamera: import("three").Camera, geometry: import("three").BufferGeometry<import("three").NormalBufferAttributes>, depthMaterial: import("three").Material, group: import("three").Group<import("three").Object3DEventMap>) => void) | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, shadowCamera: import("three").Camera, geometry: import("three").BufferGeometry<import("three").NormalBufferAttributes>, depthMaterial: import("three").Material, group: import("three").Group<import("three").Object3DEventMap>) => void) | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, camera: import("three").Camera, geometry: import("three").BufferGeometry<import("three").NormalBufferAttributes>, material: import("three").Material, group: import("three").Group<import("three").Object3DEventMap>) => void) | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, camera: import("three").Camera, geometry: import("three").BufferGeometry<import("three").NormalBufferAttributes>, material: import("three").Material, group: import("three").Group<import("three").Object3DEventMap>) => void) | ((matrix: import("three").Matrix4) => void) | ((axis: Vector3, angle: number) => void) | ((euler: import("three").Euler) => void) | ((m: import("three").Matrix4) => void) | ((q: import("three").Quaternion) => void) | ((vector: Vector3) => Vector3) | ((vector: Vector3) => Vector3) | {
+    get(prop: keyof SpriteText): string | number | boolean | Vector3 | import("three").Object3D<import("three").Object3DEventMap> | import("three").BufferGeometry<import("three").NormalBufferAttributes> | ((force?: boolean) => void) | import("three").Object3D<import("three").Object3DEventMap>[] | HTMLCanvasElement | import("three").Vector2 | import("three").Material | Record<string, any> | import("three").Matrix4 | import("three").Quaternion | (<T extends keyof import("three").Object3DEventMap>(event: import("three").BaseEvent<T> & import("three").Object3DEventMap[T]) => void) | import("three").Euler | import("three").Matrix3 | import("three").Layers | import("three").AnimationClip[] | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, shadowCamera: import("three").Camera, geometry: import("three").BufferGeometry<import("three").NormalBufferAttributes>, depthMaterial: import("three").Material, group: import("three").Group<import("three").Object3DEventMap>) => void) | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, shadowCamera: import("three").Camera, geometry: import("three").BufferGeometry<import("three").NormalBufferAttributes>, depthMaterial: import("three").Material, group: import("three").Group<import("three").Object3DEventMap>) => void) | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, camera: import("three").Camera, geometry: import("three").BufferGeometry<import("three").NormalBufferAttributes>, material: import("three").Material, group: import("three").Group<import("three").Object3DEventMap>) => void) | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, camera: import("three").Camera, geometry: import("three").BufferGeometry<import("three").NormalBufferAttributes>, material: import("three").Material, group: import("three").Group<import("three").Object3DEventMap>) => void) | ((matrix: import("three").Matrix4) => void) | ((axis: Vector3, angle: number) => void) | ((euler: import("three").Euler) => void) | ((m: import("three").Matrix4) => void) | ((q: import("three").Quaternion) => void) | ((vector: Vector3) => Vector3) | ((vector: Vector3) => Vector3) | {
         (vector: Vector3): void;
         (x: number, y: number, z: number): void;
-    } | ((id: number) => import("three").Object3D<import("three").Object3DEventMap>) | ((name: string) => import("three").Object3D<import("three").Object3DEventMap>) | ((name: string, value: any) => import("three").Object3D<import("three").Object3DEventMap>) | ((name: string, value: any, optionalTarget?: import("three").Object3D<import("three").Object3DEventMap>[]) => import("three").Object3D<import("three").Object3DEventMap>[]) | ((target: Vector3) => Vector3) | ((target: import("three").Quaternion) => import("three").Quaternion) | ((target: Vector3) => Vector3) | ((target: Vector3) => Vector3) | ((raycaster: import("three").Raycaster, intersects: import("three").Intersection<import("three").Object3D<import("three").Object3DEventMap>>[]) => void) | ((callback: (object: import("three").Object3D<import("three").Object3DEventMap>) => any) => void) | ((callback: (object: import("three").Object3D<import("three").Object3DEventMap>) => any) => void) | (() => void) | ((updateParents: boolean, updateChildren: boolean) => void) | ((meta?: {
+    } | ((id: number) => import("three").Object3D<import("three").Object3DEventMap>) | ((name: string) => import("three").Object3D<import("three").Object3DEventMap>) | ((name: string, value: any) => import("three").Object3D<import("three").Object3DEventMap>) | ((name: string, value: any, optionalTarget?: import("three").Object3D<import("three").Object3DEventMap>[]) => import("three").Object3D<import("three").Object3DEventMap>[]) | ((target: Vector3) => Vector3) | ((target: import("three").Quaternion) => import("three").Quaternion) | ((target: Vector3) => Vector3) | ((target: Vector3) => Vector3) | ((raycaster: import("three").Raycaster, intersects: import("three").Intersection<import("three").Object3D<import("three").Object3DEventMap>>[]) => void) | ((callback: (object: import("three").Object3D<import("three").Object3DEventMap>) => any) => void) | ((callback: (object: import("three").Object3D<import("three").Object3DEventMap>) => any) => void) | ((callback: (object: import("three").Object3D<import("three").Object3DEventMap>) => any) => void) | (() => void) | ((updateParents: boolean, updateChildren: boolean) => void) | ((meta?: {
         geometries: any;
         materials: any;
         textures: any;

package/README.md

@@ -4,6 +4,7 @@ import { AmbientLight, BoxGeometry, Mesh, MeshLambertMaterial, PointLight } from
 import ThreeBase from "three-base";
 import Transition from "three-base/Transition";
 
+// 仅支持vite编译的项目安装 
 // 做项目找我 qq:389652405
 class HomeRender extends ThreeBase {
 

package/ThreeBase.d.ts

@@ -46,6 +46,7 @@ export default class ThreeBase extends EventDispatcher {
     autoRender: boolean;
     needRender: boolean;
     stopRender(): void;
+    hasStrokeOrPass(): boolean;
     render(): void;
     private renderBindThis;
     download(fileName?: string): void;

package/ThreeBase.js

@@ -281,10 +281,21 @@ export default class ThreeBase extends EventDispatcher {
         this.setSize(100, 100);
         this.renderer.domElement.style.opacity = "0";
     }
+    // 判断是否有 发光和描边的对象 以便判断是否需要 渲染深度纹理
+    hasStrokeOrPass() {
+        let has_stroke_or_pass = false;
+        this.scene.traverse(obj => {
+            const { stroke_enable = false, stroke_width = 1, glow_enable = false, glow_width = 1 } = obj.userData;
+            if ((stroke_enable && stroke_width > 0) || (glow_enable && glow_width > 0)) {
+                has_stroke_or_pass = true;
+            }
+        });
+        return has_stroke_or_pass;
+    }
     // 渲染场景
     render() {
         // 控制器在移动时鼠标不能操作
-        this.renderer.domElement.style.pointerEvents = (!this.controlsPosition.isDone() || !this.controlsCenter.isDone()) ? "none" : "all";
+        // this.renderer.domElement.style.pointerEvents = (!this.controlsPosition.isDone() || !this.controlsCenter.isDone()) ? "none" : "all";
         // canvas 没有在页面上面的话 就跳过渲染
         if (!threeUtils.inDocument(this.renderer.domElement)) {
             this.stopRender();
@@ -307,23 +318,24 @@ export default class ThreeBase extends EventDispatcher {
         }
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" });
-        // 把基础场景渲染到 帧缓冲区 在后期通道中会用到
-        this.renderer.setRenderTarget(this.baseRenderTarget);
-        this.renderer.clear();
-        this.renderer.render(this.scene, this.camera);
+        const has_stroke_or_pass = this.hasStrokeOrPass();
+        if (has_stroke_or_pass) {
+            // 把基础场景渲染到 帧缓冲区 在后期通道中会用到
+            this.renderer.setRenderTarget(this.baseRenderTarget);
+            this.renderer.clear();
+            this.renderer.render(this.scene, this.camera);
+            this.renderer.setRenderTarget(null);
+        }
         // 清空主画布
-        this.renderer.setRenderTarget(null);
         this.renderer.clear();
-        // this.renderer.setScissorTest(false);
-        this.renderRendererTarget(this.baseRenderTarget);
-        // this.renderer.setScissorTest(true);
-        // this.renderer.setScissor(0, 0, 800, 1000);
-        // this.renderer.render(this.scene, this.camera);
-        // 查找需要绘制描边的对象,并且绘制描边
-        this.scene.traverse(obj => {
-            stroke_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
-            glow_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
-        });
+        this.renderer.render(this.scene, this.camera);
+        if (has_stroke_or_pass) {
+            // 查找需要绘制描边的对象,并且绘制描边
+            this.scene.traverse(obj => {
+                stroke_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
+                glow_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
+            });
+        }
         this.dispatchEvent({ type: "afterRender" });
     }
     renderBindThis = this.render.bind(this);

package/ThreeBase.ts

@@ -347,10 +347,24 @@ export default class ThreeBase extends EventDispatcher {
         this.renderer.domElement.style.opacity = "0";
     }
 
+    // 判断是否有 发光和描边的对象 以便判断是否需要 渲染深度纹理
+    hasStrokeOrPass() {
+        let has_stroke_or_pass = false;
+
+        this.scene.traverse(obj => {
+            const { stroke_enable = false, stroke_width = 1, glow_enable = false, glow_width = 1 } = obj.userData;
+            if ((stroke_enable && stroke_width > 0) || (glow_enable && glow_width > 0)) {
+                has_stroke_or_pass = true;
+            }
+        });
+
+        return has_stroke_or_pass;
+    }
+
     // 渲染场景
     render() {
         // 控制器在移动时鼠标不能操作
-        this.renderer.domElement.style.pointerEvents = (!this.controlsPosition.isDone() || !this.controlsCenter.isDone()) ? "none" : "all";
+        // this.renderer.domElement.style.pointerEvents = (!this.controlsPosition.isDone() || !this.controlsCenter.isDone()) ? "none" : "all";
 
         // canvas 没有在页面上面的话 就跳过渲染
         if (!threeUtils.inDocument(this.renderer.domElement)) {
@@ -380,28 +394,27 @@ export default class ThreeBase extends EventDispatcher {
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" } as never);
 
-        // 把基础场景渲染到 帧缓冲区 在后期通道中会用到
-        this.renderer.setRenderTarget(this.baseRenderTarget);
-        this.renderer.clear();
-        this.renderer.render(this.scene, this.camera);
+        const has_stroke_or_pass = this.hasStrokeOrPass();
+
+        if (has_stroke_or_pass) {
+            // 把基础场景渲染到 帧缓冲区 在后期通道中会用到
+            this.renderer.setRenderTarget(this.baseRenderTarget);
+            this.renderer.clear();
+            this.renderer.render(this.scene, this.camera);
+            this.renderer.setRenderTarget(null);
+        }
 
         // 清空主画布
-        this.renderer.setRenderTarget(null);
         this.renderer.clear();
+        this.renderer.render(this.scene, this.camera);
 
-        // this.renderer.setScissorTest(false);
-
-        this.renderRendererTarget(this.baseRenderTarget);
-
-        // this.renderer.setScissorTest(true);
-        // this.renderer.setScissor(0, 0, 800, 1000);
-        // this.renderer.render(this.scene, this.camera);
-
-        // 查找需要绘制描边的对象,并且绘制描边
-        this.scene.traverse(obj => {
-            stroke_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
-            glow_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
-        });
+        if (has_stroke_or_pass) {
+            // 查找需要绘制描边的对象,并且绘制描边
+            this.scene.traverse(obj => {
+                stroke_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
+                glow_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
+            });
+        }
 
         this.dispatchEvent({ type: "afterRender" } as never);
     }

package/package.json

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