three-base 2.0.104 → 2.0.107

package/Fire/FireMaterial.js

@@ -48,7 +48,7 @@ export default class FireMaterial extends ShaderMaterial {
             gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
             gl_PointSize = ( heightOfNearPlane * size ) / gl_Position.w;
 
-            vOpacity = min( influence * 4.0, 1.0 ) * progressNeg;
+            vOpacity = min( influence * 100.0, 1.0 ) * progressNeg;
             vSprite = sprite;
             ${ShaderChunk.logdepthbuf_vertex}
         }

package/InstancedMeshBase.d.ts

@@ -18,7 +18,7 @@ export default class InstancedMeshBase extends MeshBase {
     instanceColor: InstancedBufferAttribute;
     reset(...object: Object3D[]): this;
     loadModel(url: string | File | Array<File>, filename?: string): Promise<void>;
-    computeBoundingSphere: import("lodash").DebouncedFunc<() => void>;
+    computeBoundingSphere: import("lodash").DebouncedFuncLeading<() => void>;
     setCount(count?: number): Promise<void>;
     setMatrixAt(index: number, matrix?: Matrix4): Promise<void>;
     setTRS(index: number, { position, rotation, scale, }: {

package/MeshBase.js

@@ -29,6 +29,7 @@ export default class MeshBase extends Group {
     }
     // 重置子元素
     reset(...object) {
+        threeUtils.dipose(this);
         super.clear();
         super.add(...object);
         return this;

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) | ((callback: (object: import("three").Object3D<import("three").Object3DEventMap>) => any) => void) | import("three").Object3D<import("three").Object3DEventMap>[] | import("three").Euler | import("three").Material | import("three").Quaternion | import("three").Matrix4 | import("three").Matrix3 | import("three").Layers | import("three").AnimationClip[] | Record<string, any> | ((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) | ((callback: (object: import("three").Object3D<import("three").Object3DEventMap>) => any) => void) | import("three").Object3D<import("three").Object3DEventMap>[] | import("three").Material | Record<string, any> | import("three").Euler | import("three").Quaternion | import("three").Matrix4 | 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?: import("three").JSONMeta) => import("three").Object3DJSON) | (<T extends keyof import("three").Object3DEventMap>(event: import("three").BaseEvent<T> & import("three").Object3DEventMap[T]) => void) | HTMLCanvasElement | import("three").Vector2 | import("three").SpriteMaterial | ((object: import("three").Object3D<import("three").Object3DEventMap>, recursive?: boolean) => SpriteText) | ((recursive?: boolean) => SpriteText) | {
+    } | ((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?: import("three").JSONMeta) => import("three").Object3DJSON) | (<T extends keyof import("three").Object3DEventMap>(event: import("three").BaseEvent<T> & import("three").Object3DEventMap[T]) => void) | HTMLCanvasElement | import("three").Vector2 | import("three").SpriteMaterial | ((recursive?: boolean) => SpriteText) | ((object: import("three").Object3D<import("three").Object3DEventMap>, recursive?: boolean) => SpriteText) | {
         <T_1 extends keyof import("three").Object3DEventMap>(type: T_1, listener: import("three").EventListener<import("three").Object3DEventMap[T_1], T_1, SpriteText>): void;
         <T_2 extends string>(type: T_2, listener: import("three").EventListener<{}, T_2, SpriteText>): void;
     } | {

package/ThreeBase.d.ts

@@ -69,7 +69,6 @@ export default class ThreeBase extends EventDispatcher {
     autoRender: boolean;
     needRender: boolean;
     stopRender(): void;
-    hasPass(): boolean;
     render(): void;
     private renderBindThis;
     getThumbBlob(): Promise<Blob>;
@@ -87,6 +86,6 @@ export default class ThreeBase extends EventDispatcher {
     renderObject3dStroke(obj: Object3D, strockWidth: number, color: string, opacity: number): void;
     renderTargetgaussBlur(rendererTarget: WebGLRenderTarget, radius: number, opacity: number): void;
     renderTargetAddGlow(renderTarget: WebGLRenderTarget, width: number, color: string): void;
-    renderRendererTarget(renderTarget: WebGLRenderTarget, alpha?: boolean): void;
+    renderRendererTarget(renderTarget: WebGLRenderTarget): void;
     renderTexture(texture: Texture, alpha?: boolean): void;
 }

package/ThreeBase.js

@@ -5,15 +5,14 @@
  * @Last Modified time: 2024-09-23 21:20:32
  */
 import { round } from "lodash";
-import { AxesHelper, Box3, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, MOUSE, Mesh, NoBlending, NormalBlending, OrthographicCamera, PerspectiveCamera, RGBAFormat, SRGBColorSpace, Scene, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderTarget, WebGLRenderer, } from "three";
+import { AxesHelper, Box3, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, MOUSE, Mesh, NoBlending, NormalBlending, OrthographicCamera, PerspectiveCamera, RGBAFormat, ReinhardToneMapping, SRGBColorSpace, Scene, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderTarget, WebGLRenderer, } from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { degToRad, generateUUID } from "three/src/math/MathUtils";
 import ThreeMouse from "./ThreeMouse";
 import Transition from "./Transition";
 import glow_pass from "./pass/glow_pass";
 import stroke_pass from "./pass/stroke_pass";
-import { clearShader, coptyShader, fullScreenMesh, gaussBlurShader, strokeShader, } from "./shaders";
-import FXAAShaderMaterial from "./shaders/FXAAShaderMaterial";
+import { baseTextureToRenderShader, clearShader, copyShader, fullScreenMesh, gaussBlurShader, strokeShader, } from "./shaders";
 import threeLoader from "./threeLoader";
 import threeUtils from "./threeUtils";
 import cover_pass from "./pass/cover_pass";
@@ -53,7 +52,9 @@ export default class ThreeBase extends EventDispatcher {
             stencilBuffer: false,
             depthTexture: this.baseDepthTexture,
             anisotropy: 16,
+            colorSpace: SRGBColorSpace,
         });
+        baseRenderTarget.texture.colorSpace = SRGBColorSpace;
         return baseRenderTarget;
     })();
     // 公用渲染目标1
@@ -100,6 +101,8 @@ export default class ThreeBase extends EventDispatcher {
         renderer.autoClear = false;
         renderer.clear();
         renderer.outputColorSpace = SRGBColorSpace;
+        // 缓解过暗或者过亮
+        renderer.toneMapping = ReinhardToneMapping;
         threeLoader.setAnisotropy(renderer.capabilities.getMaxAnisotropy());
         return renderer;
     })();
@@ -424,21 +427,6 @@ export default class ThreeBase extends EventDispatcher {
             this.renderer.domElement.style.opacity = "0";
         }
     }
-    // 判断是否有 发光和描边等对象 以便判断是否需要 渲染深度纹理
-    hasPass() {
-        let hasPass = false;
-        this.scene.traverse((obj) => {
-            const { stroke_enable = false, stroke_width = 1, glow_enable = false, glow_width = 1, cover_enable = false, //颜色覆盖
-            cover_opacity = 0, //透明度
-             } = obj.userData;
-            if ((stroke_enable && stroke_width > 0) ||
-                (glow_enable && glow_width > 0) ||
-                (cover_enable && cover_opacity > 0)) {
-                hasPass = true;
-            }
-        });
-        return hasPass;
-    }
     // 渲染场景
     render() {
         // canvas 没有在页面上面的话 就停止渲染
@@ -491,25 +479,19 @@ export default class ThreeBase extends EventDispatcher {
         }
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" });
-        const hasPass = this.hasPass();
-        if (hasPass) {
-            // 把基础场景渲染到 帧缓冲区 在后期通道中会用到
-            this.renderer.setRenderTarget(this.baseRenderTarget);
-            this.renderer.clear();
-            this.renderer.render(this.scene, camera);
-            this.renderer.setRenderTarget(null);
-        }
-        // 清空主画布
+        // 把基础场景渲染到 帧缓冲区 在后期通道中会用到
+        this.renderer.setRenderTarget(this.baseRenderTarget);
         this.renderer.clear();
         this.renderer.render(this.scene, camera);
-        if (hasPass) {
-            // 查找需要绘制描边的对象,并且绘制描边
-            this.scene.traverseVisible((obj) => {
-                stroke_pass(this.renderer, camera, obj, this.baseDepthTexture);
-                glow_pass(this.renderer, camera, obj, this.baseDepthTexture);
-                cover_pass(this.renderer, camera, obj, this.baseDepthTexture);
-            });
-        }
+        this.renderer.setRenderTarget(null);
+        this.renderer.clear();
+        this.renderRendererTarget(this.baseRenderTarget);
+        // 后处理特效渲染(描边,发光,颜色覆盖,磨砂玻璃,bloom)
+        this.scene.traverseVisible((obj) => {
+            stroke_pass(this.renderer, camera, obj, this.baseDepthTexture);
+            glow_pass(this.renderer, camera, obj, this.baseDepthTexture);
+            cover_pass(this.renderer, camera, obj, this.baseDepthTexture);
+        });
         this.dispatchEvent({ type: "afterRender" });
     }
     renderBindThis = this.render.bind(this);
@@ -595,10 +577,10 @@ export default class ThreeBase extends EventDispatcher {
             rendererTarget.setSize(this.tempVector2.x, this.tempVector2.y);
         }
         this.renderer.setRenderTarget(rendererTarget);
-        fullScreenMesh.material = coptyShader;
-        coptyShader.uniforms.map.value = texture;
-        coptyShader.uniforms.opacity.value = opactity;
-        coptyShader.blending = alpha ? NoBlending : NormalBlending;
+        fullScreenMesh.material = copyShader;
+        copyShader.uniforms.map.value = texture;
+        copyShader.uniforms.opacity.value = opactity;
+        copyShader.blending = alpha ? NoBlending : NormalBlending;
         fullScreenMesh.render(this.renderer);
         this.renderer.setRenderTarget(originTarget);
     }
@@ -661,28 +643,18 @@ export default class ThreeBase extends EventDispatcher {
         this.renderTargetgaussBlur(renderTarget, 1, 1);
     }
     // 需要做抗锯齿处理 渲染 渲染目标
-    renderRendererTarget(renderTarget, alpha = false) {
-        FXAAShaderMaterial.uniforms.tDiffuse.value = renderTarget.texture;
-        FXAAShaderMaterial.uniforms.resolution.value.set(1 / this.size.x, 1 / this.size.y);
-        fullScreenMesh.material = FXAAShaderMaterial;
+    renderRendererTarget(renderTarget) {
+        baseTextureToRenderShader.uniforms.map.value = renderTarget.texture;
+        baseTextureToRenderShader.uniforms.opacity.value = 1.0;
+        fullScreenMesh.material = baseTextureToRenderShader;
         fullScreenMesh.render(this.renderer);
-        // const FXAAShaderMaterial = new ShaderMaterial({
-        //     uniforms: {
-        //         tDiffuse: { value: null }, // 贴图纹理
-        //         resolution: { value: new Vector2(1 / 1024, 1 / 1024) }
-        //     },
-        // coptyShader.uniforms.map.value = renderTarget.texture;
-        // coptyShader.uniforms.opacity.value = 1.0;
-        // fullScreenMesh.material = coptyShader;
-        // coptyShader.blending = alpha ? NoBlending : NormalBlending;
-        // fullScreenMesh.render(this.renderer);
     }
     // 渲染纹理
     renderTexture(texture, alpha = false) {
-        coptyShader.uniforms.map.value = texture;
-        coptyShader.uniforms.opacity.value = 1.0;
-        fullScreenMesh.material = coptyShader;
-        coptyShader.blending = alpha ? NoBlending : NormalBlending;
+        copyShader.uniforms.map.value = texture;
+        copyShader.uniforms.opacity.value = 1.0;
+        fullScreenMesh.material = copyShader;
+        copyShader.blending = alpha ? NoBlending : NormalBlending;
         fullScreenMesh.render(this.renderer);
     }
 }

package/keyContorls.d.ts

@@ -16,7 +16,7 @@ declare class KeyContorls extends EventDispatcher {
     _listeners?: {
         [key: string]: Array<any>;
     };
-    removeEvent: import("lodash").DebouncedFunc<(type: string) => void>;
+    removeEvent: import("lodash").DebouncedFuncLeading<(type: string) => void>;
     addEventListener<T extends string>(type: T, listener: EventListener<{}, T, this>): void;
     addEvent(): void;
     dispose(): void;

package/package.json

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

package/pass/cover_pass.js

@@ -73,6 +73,9 @@ const depthTestShader = new ShaderMaterial({
             if(texture2D(baseDepth, vUv).r + 0.0001 < texture2D(selectDepth, vUv).r){
                 discard;
             }
+            if(texture2D(baseDepth, vUv).r == 1.0){
+                discard;
+            }
             gl_FragColor = vec4(color, 1.0);
             ${ShaderChunk.logdepthbuf_fragment}
         }

package/pass/glow_pass.js

@@ -4,7 +4,7 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2024-09-23 22:00:48
  */
-import { Color, DepthFormat, DepthTexture, LinearFilter, NoBlending, NormalBlending, RGBAFormat, RawShaderMaterial, Scene, ShaderChunk, ShaderMaterial, UnsignedShortType, Vector2, WebGLRenderTarget } from "three";
+import { Color, DepthFormat, DepthTexture, LinearFilter, NoBlending, NormalBlending, RGBAFormat, RawShaderMaterial, Scene, ShaderChunk, ShaderMaterial, UnsignedShortType, Vector2, WebGLRenderTarget, } from "three";
 import FullScreenQuad from "./FullScreenQuad";
 // 选中对象的深度纹理
 const selectDepthTexture = (() => {
@@ -29,10 +29,18 @@ const selectDethpTestTextureTarget = new WebGLRenderTarget(512, 512, {
     format: RGBAFormat,
     anisotropy: 16,
 });
-// 由于不能同时读写自己的纹理 
-const blur1TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
+// 由于不能同时读写自己的纹理
+const blur1TextureTarget = new WebGLRenderTarget(512, 512, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+});
 // 所以需要用2个模糊纹理相互读写
-const blur2TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
+const blur2TextureTarget = new WebGLRenderTarget(512, 512, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+});
 const size = new Vector2();
 // 创建一个渲染工具 用于处理纹理
 const fsQuad = new FullScreenQuad(); // 渲染辅助器
@@ -49,8 +57,6 @@ const depthTestShader = new ShaderMaterial({
         varying vec2 vUv;
         void main() {
             vUv = uv;
-            // gl_Position = vec4(position, 1.0);
-            // gl_Position = projectionMatrix * modelViewMatrix * instanceMatrix * vec4(position, 1.0);
             gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
             ${ShaderChunk.logdepthbuf_vertex}
         }
@@ -65,6 +71,9 @@ const depthTestShader = new ShaderMaterial({
             if(texture2D(baseDepth, vUv).r < texture2D(selectDepth, vUv).r){
                 discard;
             }
+            if(texture2D(baseDepth, vUv).r == 1.0){
+                discard;
+            }
             gl_FragColor = texture2D(map, vUv);
             ${ShaderChunk.logdepthbuf_fragment}
         }
@@ -72,13 +81,13 @@ const depthTestShader = new ShaderMaterial({
     blending: NoBlending,
     depthTest: true,
     depthWrite: true,
-    transparent: true
+    transparent: true,
 });
 // 抗锯齿着色器
 const FXAAShaderMaterial = new ShaderMaterial({
     uniforms: {
         tDiffuse: { value: null },
-        resolution: { value: new Vector2(1 / 1024, 1 / 1024) }
+        resolution: { value: new Vector2(1 / 1024, 1 / 1024) },
     },
     vertexShader: `
         ${ShaderChunk.common}
@@ -308,7 +317,7 @@ const FXAAShaderMaterial = new ShaderMaterial({
     blending: NoBlending,
     depthTest: false,
     depthWrite: false,
-    transparent: true
+    transparent: true,
 });
 // 描边着色器
 const blurShader = new RawShaderMaterial({
@@ -320,32 +329,32 @@ const blurShader = new RawShaderMaterial({
         resolution: { value: new Vector2(1 / 512, 1 / 512) },
         offset: {
             value: [
-                new Vector2(0.000, 1.000),
+                new Vector2(0.0, 1.0),
                 new Vector2(0.259, 0.966),
-                new Vector2(0.500, 0.866),
+                new Vector2(0.5, 0.866),
                 new Vector2(0.707, 0.707),
-                new Vector2(0.866, 0.500),
+                new Vector2(0.866, 0.5),
                 new Vector2(0.966, 0.259),
-                new Vector2(1.000, 0.000),
+                new Vector2(1.0, 0.0),
                 new Vector2(0.966, -0.259),
-                new Vector2(0.866, -0.500),
+                new Vector2(0.866, -0.5),
                 new Vector2(0.707, -0.707),
-                new Vector2(0.500, -0.866),
+                new Vector2(0.5, -0.866),
                 new Vector2(0.259, -0.966),
-                new Vector2(0.000, -1.000),
+                new Vector2(0.0, -1.0),
                 new Vector2(-0.259, -0.966),
-                new Vector2(-0.500, -0.866),
+                new Vector2(-0.5, -0.866),
                 new Vector2(-0.707, -0.707),
-                new Vector2(-0.866, -0.500),
+                new Vector2(-0.866, -0.5),
                 new Vector2(-0.966, -0.259),
-                new Vector2(-1.000, -0.000),
+                new Vector2(-1.0, -0.0),
                 new Vector2(-0.966, 0.259),
-                new Vector2(-0.866, 0.500),
+                new Vector2(-0.866, 0.5),
                 new Vector2(-0.707, 0.707),
-                new Vector2(-0.500, 0.866),
-                new Vector2(-0.259, 0.966)
-            ]
-        }
+                new Vector2(-0.5, 0.866),
+                new Vector2(-0.259, 0.966),
+            ],
+        },
     },
     vertexShader: `
 		attribute vec3 position;
@@ -395,7 +404,7 @@ const blurShader = new RawShaderMaterial({
     blending: NoBlending,
     depthTest: false,
     depthWrite: false,
-    transparent: true
+    transparent: true,
 });
 // 过滤着色器
 const filterSelectShader = new RawShaderMaterial({
@@ -431,7 +440,7 @@ const filterSelectShader = new RawShaderMaterial({
     blending: NoBlending,
     depthTest: false,
     depthWrite: false,
-    transparent: true
+    transparent: true,
 });
 const copyShader = new ShaderMaterial({
     uniforms: {
@@ -460,13 +469,13 @@ const copyShader = new ShaderMaterial({
     `,
     depthTest: true,
     depthWrite: true,
-    transparent: true
+    transparent: true,
 });
 // 场景对象
 const scene = new Scene();
 // 对象发光
 export default function glow_pass(renderer, camera, object3d, baseDepthTexture) {
-    const { glow_enable = false, glow_color = "#04fa12", glow_width = 1, glow_opacity = 1 } = object3d.userData;
+    const { glow_enable = false, glow_color = "#04fa12", glow_width = 1, glow_opacity = 1, } = object3d.userData;
     if (!glow_enable || glow_width === 0) {
         return;
     }
@@ -553,7 +562,8 @@ export default function glow_pass(renderer, camera, object3d, baseDepthTexture)
     fsQuad.render(renderer, FXAAShaderMaterial);
     // 还原帧缓冲区 减去原始纹理保留描边
     renderer.setRenderTarget(originRenderTarget);
-    filterSelectShader.uniforms.selectTexture.value = selectDethpTestTextureTarget.texture;
+    filterSelectShader.uniforms.selectTexture.value =
+        selectDethpTestTextureTarget.texture;
     filterSelectShader.uniforms.blurTexture.value = blur1TextureTarget.texture;
     filterSelectShader.uniforms.opacity.value = glow_opacity;
     filterSelectShader.blending = NormalBlending; // 与有的纹理融合计算 保留前面通道传递下来的纹理
@@ -561,7 +571,7 @@ export default function glow_pass(renderer, camera, object3d, baseDepthTexture)
     // 调试代码
     // renderer.setRenderTarget(null);
     // renderer.clearDepth();
-    // copyShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
+    // copyShader.uniforms.map.value = blur2TextureTarget.texture;
     // fsQuad.render(renderer, copyShader);
     // return;
 }

package/pass/stroke_pass.js

@@ -65,6 +65,9 @@ const depthTestShader = new ShaderMaterial({
             if(texture2D(baseDepth, vUv).r < texture2D(selectDepth, vUv).r){
                 discard;
             }
+            if(texture2D(baseDepth, vUv).r == 1.0){
+                discard;
+            }
             gl_FragColor = texture2D(map, vUv);
             ${ShaderChunk.logdepthbuf_fragment}
         }

package/shaders.d.ts

@@ -11,7 +11,8 @@ export declare const fullScreenMesh: FullScreenQuad;
 export declare const orthographicCamera: OrthographicCamera;
 export declare const clearShader: ShaderMaterial;
 export declare const intersectionShader: ShaderMaterial;
-export declare const coptyShader: ShaderMaterial;
+export declare const copyShader: ShaderMaterial;
+export declare const baseTextureToRenderShader: ShaderMaterial;
 export declare const strokeShader: ShaderMaterial;
 export declare const gaussBlurShader: ShaderMaterial;
 export {};

package/shaders.js

@@ -4,7 +4,7 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2022-04-02 18:28:38
  */
-import { BufferGeometry, Color, Float32BufferAttribute, Mesh, NoBlending, OrthographicCamera, ShaderChunk, ShaderMaterial, Vector2 } from "three";
+import { BufferGeometry, Color, Float32BufferAttribute, Mesh, NoBlending, OrthographicCamera, ShaderChunk, ShaderMaterial, Vector2, } from "three";
 // https://github.com/mrdoob/three.js/pull/21358
 const _geometry = new BufferGeometry();
 _geometry.setAttribute("position", new Float32BufferAttribute([-1, 3, 0, -1, -1, 0, 3, -1, 0], 3));
@@ -48,7 +48,7 @@ export const clearShader = new ShaderMaterial({
     blending: NoBlending,
     depthTest: false,
     depthWrite: false,
-    transparent: true
+    transparent: true,
 });
 // 交集着色器提取相同的像素点
 export const intersectionShader = new ShaderMaterial({
@@ -83,32 +83,74 @@ export const intersectionShader = new ShaderMaterial({
     blending: NoBlending,
     depthTest: true,
     depthWrite: true,
-    transparent: true
+    transparent: true,
 });
 // 拷贝着色器
-export const coptyShader = new ShaderMaterial({
+export const copyShader = new ShaderMaterial({
     uniforms: {
         map: { value: null },
         opacity: { value: 1.0 } // 透明度
     },
     vertexShader: `
+        ${ShaderChunk.common}
+        ${ShaderChunk.logdepthbuf_pars_vertex}
         varying vec2 vUv;
         void main() {
             vUv = uv;
             gl_Position = vec4(position, 1.0);
+            ${ShaderChunk.logdepthbuf_vertex}
         }
     `,
     fragmentShader: `
+        ${ShaderChunk.logdepthbuf_pars_fragment}
         uniform sampler2D map;
         uniform float opacity;
+        uniform bool linear_to_srgb;
         varying vec2 vUv;
         void main() {
-
-            gl_FragColor = texture2D(map, vUv) * opacity;
-
+            vec4 diffuseColor = texture(map, vUv);
+            gl_FragColor = diffuseColor * opacity;
+            ${ShaderChunk.logdepthbuf_fragment}
+        }
+    `,
+    depthTest: true,
+    depthWrite: true,
+    transparent: true,
+});
+// 渲染目标绘制到渲染器着色器
+export const baseTextureToRenderShader = new ShaderMaterial({
+    uniforms: {
+        map: { value: null },
+        opacity: { value: 1.0 }, // 透明度
+    },
+    vertexShader: `
+        ${ShaderChunk.common}
+        ${ShaderChunk.logdepthbuf_pars_vertex}
+        varying vec2 vUv;
+        void main() {
+            vUv = uv;
+            gl_Position = vec4(position, 1.0);
+            ${ShaderChunk.logdepthbuf_vertex}
         }
     `,
-    // blending: NoBlending, // 渲染时不与背景融合计算 直接替换
+    fragmentShader: `
+    ${ShaderChunk.logdepthbuf_pars_fragment}
+    uniform sampler2D map;
+    uniform float opacity;
+    uniform bool linear_to_srgb;
+    varying vec2 vUv;
+    float linearToSrgb(float v) {
+        return pow(v, 1.0 / 2.2);
+    }
+    void main() {
+        vec4 diffuseColor = texture(map, vUv);
+        diffuseColor.r = linearToSrgb(diffuseColor.r);
+        diffuseColor.g = linearToSrgb(diffuseColor.g);
+        diffuseColor.b = linearToSrgb(diffuseColor.b);
+        gl_FragColor = diffuseColor * opacity;
+        ${ShaderChunk.logdepthbuf_fragment}
+    }
+`,
     depthTest: true,
     depthWrite: true,
     transparent: true,
@@ -120,7 +162,7 @@ export const strokeShader = new ShaderMaterial({
         resolution: { value: new Vector2(512, 512) },
         strokeWidth: { value: 1.0 },
         strokeColor: { value: new Color("#B2F2FF") },
-        opacity: { value: 1.0 } // 透明度
+        opacity: { value: 1.0 }, // 透明度
     },
     vertexShader: `
             varying vec2 vUv;
@@ -175,7 +217,7 @@ export const strokeShader = new ShaderMaterial({
     blending: NoBlending,
     depthTest: true,
     depthWrite: true,
-    transparent: true
+    transparent: true,
 });
 // 高斯模糊着色器 让颜色过渡更自然
 export const gaussBlurShader = new ShaderMaterial({
@@ -241,5 +283,5 @@ export const gaussBlurShader = new ShaderMaterial({
     blending: NoBlending,
     depthTest: false,
     depthWrite: false,
-    transparent: true
+    transparent: true,
 });

package/threeLoader.js

@@ -359,7 +359,7 @@ class ThreeLoader extends EventDispatcher {
                         return await this.loadModel(stl);
                     }
                     //如果有zip文件就加载zip文件
-                    let zipFile = Object.keys(zip.files).find((filename) => /\.stl$/.test(filename));
+                    let zipFile = Object.keys(zip.files).find((filename) => /\.zip$/.test(filename));
                     if (zipFile) {
                         return await this.loadModel(zipFile);
                     }

package/threeUtils.d.ts

@@ -1,4 +1,4 @@
-import { Box3, BufferGeometry, Clock, EventDispatcher, Object3D, Vector3 } from "three";
+import { Box3, BufferGeometry, Clock, EventDispatcher, Material, Object3D, Vector3 } from "three";
 declare class ThreeUtils extends EventDispatcher {
     constructor();
     isProd: boolean;
@@ -37,7 +37,7 @@ declare class ThreeUtils extends EventDispatcher {
     center(object3d: Object3D | BufferGeometry): void;
     scaleTo(object3d: Object3D | BufferGeometry, size?: number, key?: Array<"x" | "y" | "z">): void;
     applyAllTranstion(object3d: Object3D): void;
-    exportGLB(input: Object3D, fileName?: string): void;
+    exportGLB(input: Object3D, fileName?: string, maxTextureSize?: number): void;
     exportUsdz(): void;
     getVolume(geometry: BufferGeometry): number;
     signedVolumeOfTriangle(p1: Vector3, p2: Vector3, p3: Vector3): number;
@@ -45,6 +45,8 @@ declare class ThreeUtils extends EventDispatcher {
     getSuffix(filename: string): string;
     getFilename(url: string): string;
     fileToBloburl(file: File): Promise<string>;
+    toMeshBasicMaterial<P extends Material | Material[]>(material: P): P;
+    toMeshLambertMaterial<P extends Material | Material[]>(material: P): P;
 }
 declare const threeUtils: ThreeUtils;
 export default threeUtils;

package/threeUtils.js

@@ -4,7 +4,7 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-05-03 00:36:18
  */
-import { Box3, Clock, EventDispatcher, Material, Vector3, } from "three";
+import { Box3, Clock, EventDispatcher, Material, MeshBasicMaterial, MeshLambertMaterial, Vector3, } from "three";
 import { GLTFExporter } from "three/examples/jsm/exporters/GLTFExporter";
 class ThreeUtils extends EventDispatcher {
     constructor() {
@@ -187,7 +187,7 @@ class ThreeUtils extends EventDispatcher {
         });
     }
     // 导出 glb
-    exportGLB(input, fileName = "threeUtils.exportGLB") {
+    exportGLB(input, fileName = "threeUtils.exportGLB", maxTextureSize = 4096) {
         const gltfExporter = new GLTFExporter();
         gltfExporter.parse(input, (result) => {
             if (result instanceof ArrayBuffer) {
@@ -202,7 +202,7 @@ class ThreeUtils extends EventDispatcher {
             trs: true,
             onlyVisible: true,
             binary: true,
-            maxTextureSize: 4096,
+            maxTextureSize: maxTextureSize,
         });
     }
     //导出usdz
@@ -289,6 +289,42 @@ class ThreeUtils extends EventDispatcher {
             reader.readAsArrayBuffer(file);
         });
     }
+    //材质转为基础材质
+    toMeshBasicMaterial(material) {
+        if (material instanceof Array) {
+            return material.map((m) => this.toMeshBasicMaterial(m));
+        }
+        else {
+            const meshBasicMaterial = new MeshBasicMaterial();
+            for (let i in meshBasicMaterial) {
+                if (!["type"].includes(i) &&
+                    meshBasicMaterial.hasOwnProperty(i) &&
+                    material.hasOwnProperty(i)) {
+                    //@ts-ignore
+                    meshBasicMaterial[i] = material[i];
+                }
+            }
+            return meshBasicMaterial;
+        }
+    }
+    toMeshLambertMaterial(material) {
+        //@ts-ignore
+        if (material instanceof Array) {
+            //@ts-ignore
+            return material.map((m) => toMeshLambertMaterial(m));
+        }
+        else {
+            const meshLambertMaterial = new MeshLambertMaterial();
+            for (let i in meshLambertMaterial) {
+                if (!["type"].includes(i) &&
+                    meshLambertMaterial.hasOwnProperty(i) &&
+                    material.hasOwnProperty(i)) {
+                    meshLambertMaterial[i] = material[i];
+                }
+            }
+            return meshLambertMaterial;
+        }
+    }
 }
 const threeUtils = new ThreeUtils();
 export default threeUtils;