three-base 2.0.106 → 2.0.108

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").DebouncedFuncLeading<() => void>;
+    computeBoundingSphere: import("lodash").DebouncedFunc<() => void>;
     setCount(count?: number): Promise<void>;
     setMatrixAt(index: number, matrix?: Matrix4): Promise<void>;
     setTRS(index: number, { position, rotation, scale, }: {

package/ThreeBase.js

@@ -5,7 +5,7 @@
  * @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";
@@ -16,6 +16,7 @@ import { baseTextureToRenderShader, clearShader, copyShader, fullScreenMesh, gau
 import threeLoader from "./threeLoader";
 import threeUtils from "./threeUtils";
 import cover_pass from "./pass/cover_pass";
+import bloom_pass from "./pass/bloom_pass";
 // three.js 的基础对象
 export default class ThreeBase extends EventDispatcher {
     constructor() {
@@ -100,7 +101,9 @@ export default class ThreeBase extends EventDispatcher {
         renderer.setPixelRatio(window.devicePixelRatio);
         renderer.autoClear = false;
         renderer.clear();
-        // renderer.outputColorSpace = SRGBColorSpace;
+        renderer.outputColorSpace = SRGBColorSpace;
+        // 缓解过暗或者过亮
+        renderer.toneMapping = ReinhardToneMapping;
         threeLoader.setAnisotropy(renderer.capabilities.getMaxAnisotropy());
         return renderer;
     })();
@@ -490,6 +493,8 @@ export default class ThreeBase extends EventDispatcher {
             glow_pass(this.renderer, camera, obj, this.baseDepthTexture);
             cover_pass(this.renderer, camera, obj, this.baseDepthTexture);
         });
+        //后处理发光特效
+        bloom_pass(this.renderer, camera, this.scene, this.baseDepthTexture);
         this.dispatchEvent({ type: "afterRender" });
     }
     renderBindThis = this.render.bind(this);

package/keyContorls.d.ts

@@ -16,7 +16,7 @@ declare class KeyContorls extends EventDispatcher {
     _listeners?: {
         [key: string]: Array<any>;
     };
-    removeEvent: import("lodash").DebouncedFuncLeading<(type: string) => void>;
+    removeEvent: import("lodash").DebouncedFunc<(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.106",
+  "version": "2.0.108",
   "description": "three 3d three-base",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/pass/bloom_pass.d.ts

@@ -0,0 +1,2 @@
+import { WebGLRenderer, Camera, DepthTexture, Scene } from "three";
+export default function bloom_pass(renderer: WebGLRenderer, camera: Camera, scene: Scene, baseDepthTexture: DepthTexture): void;

package/pass/bloom_pass.js

@@ -0,0 +1,33 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2024-09-23 21:51:29
+ * @Last Modified by:   xiaosihan
+ * @Last Modified time: 2024-09-23 21:51:29
+ */
+import { DepthTexture, DepthFormat, LinearFilter, RGBAFormat, UnsignedShortType, WebGLRenderTarget, } from "three";
+// 选中对象的深度纹理
+const selectDepthTexture = (() => {
+    const baseDepthTexture = new DepthTexture(4096, 4096);
+    baseDepthTexture.format = DepthFormat;
+    baseDepthTexture.type = UnsignedShortType;
+    baseDepthTexture.anisotropy = 16;
+    return baseDepthTexture;
+})();
+// 选中对象的纹理
+const selectTextureTarget = new WebGLRenderTarget(512, 512, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+    depthTexture: selectDepthTexture,
+    anisotropy: 16,
+});
+// 深度测试后的选中纹理
+const selectDethpTestTextureTarget = new WebGLRenderTarget(512, 512, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+    anisotropy: 16,
+});
+// 发光后期通道
+export default function bloom_pass(renderer, camera, scene, baseDepthTexture) {
+}

package/pass/cover_pass.js

@@ -10,12 +10,11 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-05-09 02:33:28
  */
-import { Color, DepthFormat, DepthTexture, LinearFilter, NoBlending, RGBAFormat, Scene, ShaderChunk, ShaderMaterial, UnsignedShortType, Vector2, WebGLRenderTarget } from "three";
-import copyShader from "../shaders/copyShader";
+import { Color, DepthFormat, DepthTexture, LinearFilter, RGBAFormat, Scene, ShaderChunk, ShaderMaterial, UnsignedShortType, Vector2, WebGLRenderTarget, } from "three";
 import FullScreenQuad from "./FullScreenQuad";
 // 选中对象的深度纹理
 const selectDepthTexture = (() => {
-    const baseDepthTexture = new DepthTexture(4096, 4096);
+    const baseDepthTexture = new DepthTexture(1024, 1024);
     baseDepthTexture.format = DepthFormat;
     baseDepthTexture.type = UnsignedShortType;
     baseDepthTexture.anisotropy = 16;
@@ -47,7 +46,9 @@ const fsQuad = new FullScreenQuad(); // 渲染辅助器
 //深度比对纹理
 const depthTestShader = new ShaderMaterial({
     uniforms: {
-        color: { value: new Color("#000000") },
+        color: { value: new Color("#440000") },
+        opacity: { value: 1 },
+        depthTest: { value: true },
         baseDepth: { value: null },
         selectDepth: { value: null }, // 选中的对象深度纹理
     },
@@ -66,21 +67,31 @@ const depthTestShader = new ShaderMaterial({
     fragmentShader: `
         ${ShaderChunk.logdepthbuf_pars_fragment}
         uniform vec3 color;
+        uniform float opacity;
+        uniform bool depthTest;
         uniform sampler2D baseDepth;
         uniform sampler2D selectDepth;
         varying vec2 vUv;
         void main() {
-            if(texture2D(baseDepth, vUv).r + 0.0001 < texture2D(selectDepth, vUv).r){
-                discard;
+            if( depthTest ){
+                if(texture2D(baseDepth, vUv).r + 0.0001 < texture2D(selectDepth, vUv).r){
+                    discard;
+                }
+                if(texture2D(baseDepth, vUv).r == 1.0){
+                    discard;
+                }
+                gl_FragColor = vec4(color, opacity);
+            }else{
+               if(texture2D(selectDepth, vUv).r < 1.0){
+                    gl_FragColor = vec4(color, opacity);
+               }else{
+                   discard;
+               }
             }
-            if(texture2D(baseDepth, vUv).r == 1.0){
-                discard;
-            }
-            gl_FragColor = vec4(color, 1.0);
+
             ${ShaderChunk.logdepthbuf_fragment}
         }
     `,
-    blending: NoBlending,
     depthTest: true,
     depthWrite: true,
     transparent: true,
@@ -89,7 +100,8 @@ const depthTestShader = new ShaderMaterial({
 const scene = new Scene();
 // 给模型覆盖一层颜色 后处理通道
 export default function cover_pass(renderer, camera, object3d, baseDepthTexture) {
-    const { cover_enable = false, cover_color = "#04fa12", cover_opacity = 1, } = object3d.userData;
+    const { cover_enable = false, cover_color = "#04fa12", cover_opacity = 1, cover_depth_test = true, // 颜色叠加是否开启深度测试
+     } = object3d.userData;
     if (!cover_enable || cover_opacity === 0) {
         return;
     }
@@ -105,23 +117,19 @@ export default function cover_pass(renderer, camera, object3d, baseDepthTexture)
     scene.children = [object3d];
     renderer.clear();
     renderer.render(scene, camera);
-    //深度测试
-    renderer.setRenderTarget(selectDethpTestTextureTarget);
-    renderer.clear();
+    //更具深度测试绘制叠加颜色
+    renderer.setRenderTarget(originRenderTarget);
+    renderer.clearDepth();
     depthTestShader.uniforms.color.value.set(cover_color);
+    depthTestShader.uniforms.opacity.value = cover_opacity;
+    depthTestShader.uniforms.depthTest.value = cover_depth_test;
     depthTestShader.uniforms.baseDepth.value = baseDepthTexture;
     depthTestShader.uniforms.selectDepth.value = selectDepthTexture;
     fsQuad.render(renderer, depthTestShader);
-    // 颜色覆盖绘制到着色器
-    renderer.setRenderTarget(originRenderTarget);
-    renderer.clearDepth();
-    copyShader.uniforms.map.value = selectDethpTestTextureTarget.texture;
-    copyShader.uniforms.opacity.value = cover_opacity;
-    fsQuad.render(renderer, copyShader);
     // 调试代码
     // renderer.setRenderTarget(null);
     // renderer.clearDepth();
-    // copyShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
+    // copyShader.uniforms.map.value = blur2TextureTarget.texture;
     // fsQuad.render(renderer, copyShader);
     // return;
 }

package/threeUtils.d.ts

@@ -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;

package/threeUtils.js

@@ -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

package/pass/bool_pass.js

@@ -1,7 +0,0 @@
-/*
- * @Author: xiaosihan
- * @Date: 2024-09-23 21:51:29
- * @Last Modified by:   xiaosihan
- * @Last Modified time: 2024-09-23 21:51:29
- */
-// 发光后期通道