three-base 2.0.98 → 2.0.100

package/ThreeBase.d.ts

@@ -45,7 +45,7 @@ export default class ThreeBase extends EventDispatcher {
         position: Vector3;
         center: Vector3;
     }): void;
-    setLookAt({ position, center, duration }: {
+    setLookAt({ position, center, duration, }: {
         position: Vector3;
         center: Vector3;
         duration?: number;
@@ -55,7 +55,7 @@ export default class ThreeBase extends EventDispatcher {
         position: Vector3;
         centerPosition: string;
     };
-    lookatObjects({ objects, duration, direction, offset, distance }: {
+    lookatObjects({ objects, duration, direction, offset, distance, }: {
         objects: Array<Object3D>;
         duration?: number;
         direction?: Vector3;

package/ThreeBase.js

@@ -2,20 +2,21 @@
  * @Author: xiaosihan
  * @Date: 2021-12-20 13:38:22
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2024-08-10 04:23:41
+ * @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, Scene, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderTarget, WebGLRenderer } from "three";
+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 { 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 { clearShader, coptyShader, fullScreenMesh, gaussBlurShader, strokeShader, } from "./shaders";
 import FXAAShaderMaterial from "./shaders/FXAAShaderMaterial";
 import threeLoader from "./threeLoader";
 import threeUtils from "./threeUtils";
+import cover_pass from "./pass/cover_pass";
 // three.js 的基础对象
 export default class ThreeBase extends EventDispatcher {
     constructor() {
@@ -56,9 +57,17 @@ export default class ThreeBase extends EventDispatcher {
         return baseRenderTarget;
     })();
     // 公用渲染目标1
-    renderTarget = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
+    renderTarget = new WebGLRenderTarget(128, 128, {
+        minFilter: LinearFilter,
+        magFilter: LinearFilter,
+        format: RGBAFormat,
+    });
     // 渲染目标2
-    renderTarget2 = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
+    renderTarget2 = new WebGLRenderTarget(128, 128, {
+        minFilter: LinearFilter,
+        magFilter: LinearFilter,
+        format: RGBAFormat,
+    });
     // 公用二维向量
     tempVector2 = new Vector2();
     // 公用的三维向量
@@ -79,17 +88,18 @@ export default class ThreeBase extends EventDispatcher {
         });
         renderer.domElement.id = generateUUID();
         //监听上下文的销毁事件
-        renderer.domElement.addEventListener('webglcontextlost', (event) => {
+        renderer.domElement.addEventListener("webglcontextlost", (event) => {
             this.rendererLost = true;
         }, false);
         // 监听上下文的恢复事件
-        renderer.domElement.addEventListener('webglcontextrestored', (event) => {
+        renderer.domElement.addEventListener("webglcontextrestored", (event) => {
             this.rendererLost = false;
         }, false);
         renderer.localClippingEnabled = true;
         renderer.setPixelRatio(window.devicePixelRatio);
         renderer.autoClear = false;
         renderer.clear();
+        renderer.outputColorSpace = SRGBColorSpace;
         threeLoader.setAnisotropy(renderer.capabilities.getMaxAnisotropy());
         return renderer;
     })();
@@ -262,9 +272,8 @@ export default class ThreeBase extends EventDispatcher {
         return axesHelper;
     })();
     //TODO 设置帧频率 默认50帧
-    frame = 50;
-    init() {
-    }
+    frame = 30;
+    init() { }
     // 重置控制器的位置
     resetLookAt({ position = this.perspectiveCamera.position, center = this.controls.target, }) {
         // 停止控制器的惯性
@@ -273,13 +282,21 @@ export default class ThreeBase extends EventDispatcher {
         this.controls.update();
         this.controls.reset();
         this.controls.enableDamping = originEnableDamping;
-        this.controlsDistance.reset({ distance: new Vector3(position.x, position.y, position.z).distanceTo(new Vector3(center.x, center.y, center.z)) });
-        position && this.controlsPosition.reset({ x: position.x, y: position.y, z: position.z });
-        center && this.controlsCenter.reset({ x: center.x, y: center.y, z: center.z });
+        this.controlsDistance.reset({
+            distance: new Vector3(position.x, position.y, position.z).distanceTo(new Vector3(center.x, center.y, center.z)),
+        });
+        position &&
+            this.controlsPosition.reset({
+                x: position.x,
+                y: position.y,
+                z: position.z,
+            });
+        center &&
+            this.controlsCenter.reset({ x: center.x, y: center.y, z: center.z });
         this.needRender = true;
     }
     // 设置控制器的位置 以动画的方式移动控制器
-    async setLookAt({ position = this.perspectiveCamera.position, center = this.controls.target, duration = 1000 }) {
+    async setLookAt({ position = this.perspectiveCamera.position, center = this.controls.target, duration = 1000, }) {
         // 停止控制器的惯性
         const originEnableDamping = this.controls.enableDamping;
         this.controls.saveState();
@@ -291,38 +308,60 @@ export default class ThreeBase extends EventDispatcher {
         // 等待动画执行完成
         await Promise.all([
             new Promise(async (resolve, reject) => {
-                this.controlsDistance.setDuration(duration).reset({ distance: this.perspectiveCamera.position.distanceTo(this.controls.target) });
-                await this.controlsDistance.set({ distance: new Vector3(position.x, position.y, position.z).distanceTo(new Vector3(center.x, center.y, center.z)) });
+                this.controlsDistance.setDuration(duration).reset({
+                    distance: this.perspectiveCamera.position.distanceTo(this.controls.target),
+                });
+                await this.controlsDistance.set({
+                    distance: new Vector3(position.x, position.y, position.z).distanceTo(new Vector3(center.x, center.y, center.z)),
+                });
                 resolve();
             }),
             new Promise(async (resolve, reject) => {
-                this.controlsPosition.setDuration(duration).reset({ x: currentPosition.x, y: currentPosition.y, z: currentPosition.z });
-                await this.controlsPosition.set({ x: position.x, y: position.y, z: position.z });
+                this.controlsPosition.setDuration(duration).reset({
+                    x: currentPosition.x,
+                    y: currentPosition.y,
+                    z: currentPosition.z,
+                });
+                await this.controlsPosition.set({
+                    x: position.x,
+                    y: position.y,
+                    z: position.z,
+                });
                 resolve();
             }),
             new Promise(async (resolve, reject) => {
-                this.controlsCenter.setDuration(duration).reset({ x: currentCenter.x, y: currentCenter.y, z: currentCenter.z });
-                await this.controlsCenter.set({ x: center.x, y: center.y, z: center.z });
+                this.controlsCenter.setDuration(duration).reset({
+                    x: currentCenter.x,
+                    y: currentCenter.y,
+                    z: currentCenter.z,
+                });
+                await this.controlsCenter.set({
+                    x: center.x,
+                    y: center.y,
+                    z: center.z,
+                });
                 resolve();
-            })
+            }),
         ]);
     }
     // 获取控制的位置和朝向 保留3位小数
     getLookAt() {
         //判断需要使用那个相机
-        const position = this.perspectiveCamera.position.toArray().map(v => round(v, 3));
-        const center = this.controls.target.toArray().map(v => round(v, 3));
+        const position = this.perspectiveCamera.position
+            .toArray()
+            .map((v) => round(v, 3));
+        const center = this.controls.target.toArray().map((v) => round(v, 3));
         return {
             center: new Vector3(...center),
             position: new Vector3(...position),
-            centerPosition: `center: new Vector3(${center.join(",")}),position: new Vector3(${position.join(",")})`
+            centerPosition: `center: new Vector3(${center.join(",")}),position: new Vector3(${position.join(",")})`,
         };
     }
     // 查看对象
-    lookatObjects({ objects, duration = 1000, direction = new Vector3(0.3, 0.3, 1), offset = new Vector3(0, 0, 0), distance = 1 }) {
+    lookatObjects({ objects, duration = 1000, direction = new Vector3(0.3, 0.3, 1), offset = new Vector3(0, 0, 0), distance = 1, }) {
         const box3 = new Box3();
-        objects.map(o => {
-            o.traverse(oo => {
+        objects.map((o) => {
+            o.traverseVisible((oo) => {
                 box3.expandByObject(oo);
             });
         });
@@ -334,7 +373,7 @@ export default class ThreeBase extends EventDispatcher {
         const modelSize = size.length() * distance;
         if (this.cameraType === "perspectiveCamera") {
             const { fov } = this.getCamera();
-            const cameraDistance = modelSize / (2 * Math.tan(fov * Math.PI / 360));
+            const cameraDistance = modelSize / (2 * Math.tan((fov * Math.PI) / 360));
             const position = direction.setLength(cameraDistance).add(center);
             this.setLookAt({ center, position, duration });
         }
@@ -355,7 +394,11 @@ export default class ThreeBase extends EventDispatcher {
     setControlType(controlType) {
         if (controlType === "OrbitControls") {
             this.controls.screenSpacePanning = this.originScreenSpacePanning;
-            this.controls.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN };
+            this.controls.mouseButtons = {
+                LEFT: MOUSE.ROTATE,
+                MIDDLE: MOUSE.DOLLY,
+                RIGHT: MOUSE.PAN,
+            };
             this.controls.touches = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN };
         }
         else if (controlType === "MapControls") {
@@ -383,14 +426,18 @@ export default class ThreeBase extends EventDispatcher {
     }
     // 判断是否有 发光和描边等对象 以便判断是否需要 渲染深度纹理
     hasPass() {
-        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;
+        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 has_stroke_or_pass;
+        return hasPass;
     }
     // 渲染场景
     render() {
@@ -403,23 +450,33 @@ export default class ThreeBase extends EventDispatcher {
         if (this.cameraType === "perspectiveCamera") {
             const { center } = this.getLookAt();
             const { fov } = this.perspectiveCamera;
-            const distaned = this.perspectiveCamera.position.clone().sub(center).length();
+            const distaned = this.perspectiveCamera.position
+                .clone()
+                .sub(center)
+                .length();
             const zoom = 1 / (Math.tan(degToRad(fov) / 2) * distaned);
             this.orthographicCamera.zoom = zoom;
-            this.orthographicCamera.position.copy(this.perspectiveCamera.position.clone().sub(center)).setLength(2500).add(center);
+            this.orthographicCamera.position
+                .copy(this.perspectiveCamera.position.clone().sub(center))
+                .setLength(2500)
+                .add(center);
         }
         else if (this.cameraType === "orthographicCamera") {
             const { center } = this.getLookAt();
             const { fov } = this.perspectiveCamera;
             const { zoom } = this.orthographicCamera;
-            const distaned = (1 / zoom) / Math.tan(degToRad(fov) / 2);
-            this.perspectiveCamera.position.copy(this.orthographicCamera.position.clone().sub(center)).setLength(distaned).add(center);
+            const distaned = 1 / zoom / Math.tan(degToRad(fov) / 2);
+            this.perspectiveCamera.position
+                .copy(this.orthographicCamera.position.clone().sub(center))
+                .setLength(distaned)
+                .add(center);
         }
         //判断需要使用那个相机
         const camera = this.getCamera();
         //判断尺寸发生改变时重置尺寸
         const parentNode = this.renderer.domElement.parentNode;
-        if (parentNode.clientWidth !== this.size.x || parentNode.clientHeight !== this.size.y) {
+        if (parentNode.clientWidth !== this.size.x ||
+            parentNode.clientHeight !== this.size.y) {
             this.setSize(parentNode.clientWidth, parentNode.clientHeight);
         }
         // 分发鼠标事件
@@ -447,9 +504,10 @@ export default class ThreeBase extends EventDispatcher {
         this.renderer.render(this.scene, camera);
         if (hasPass) {
             // 查找需要绘制描边的对象,并且绘制描边
-            this.scene.traverseVisible(obj => {
+            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" });
@@ -459,7 +517,7 @@ export default class ThreeBase extends EventDispatcher {
     async getThumbBlob() {
         this.render();
         const blob = await new Promise((resolve, reject) => {
-            this.renderer.domElement.toBlob(blob => {
+            this.renderer.domElement.toBlob((blob) => {
                 resolve(blob);
             }, "image/png", 1);
         });
@@ -468,20 +526,20 @@ export default class ThreeBase extends EventDispatcher {
     //获取渲染图base64
     getThumbBase64() {
         this.render();
-        const base64 = this.renderer.domElement.toDataURL('image/png');
+        const base64 = this.renderer.domElement.toDataURL("image/png");
         return base64;
     }
     //获取渲染图文件对象
     async getThumbFile() {
         const blob = await this.getThumbBlob();
-        const file = new File([blob], 'thumb.png', { type: blob.type });
+        const file = new File([blob], "thumb.png", { type: blob.type });
         return file;
     }
     // 下载渲染图
     async download(fileName = "download") {
         this.render();
         const blob = await this.getThumbBlob();
-        const base64 = this.renderer.domElement.toDataURL('image/png');
+        const base64 = this.renderer.domElement.toDataURL("image/png");
         let saveLink = document.createElement("a");
         saveLink.download = `${fileName}.png`;
         saveLink.href = URL.createObjectURL(blob);
@@ -489,12 +547,17 @@ export default class ThreeBase extends EventDispatcher {
         saveLink.click();
     }
     _preMesh = new Mesh();
-    _preRT = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
+    _preRT = new WebGLRenderTarget(128, 128, {
+        minFilter: LinearFilter,
+        magFilter: LinearFilter,
+        format: RGBAFormat,
+    });
     //预加载纹理图片
     async preloadTexture(src) {
         const texture = threeLoader.getTexture(src);
-        while (texture && !texture.image || !texture.image.complete) {
-            await new Promise(resolve => setTimeout(resolve, 50));
+        while ((texture && !texture.image) ||
+            !texture.image.complete) {
+            await new Promise((resolve) => setTimeout(resolve, 50));
         }
         // 添加到计划任务中去
         threeUtils.addWork(() => {

package/package.json

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

package/pass/bool_pass.js

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

package/pass/cover_pass.d.ts

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

package/pass/cover_pass.js

@@ -0,0 +1,124 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2024-09-23 21:07:06
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2024-09-23 21:53:12
+ */
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-05-09 00:35:17
+ * @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 FullScreenQuad from "./FullScreenQuad";
+// 选中对象的深度纹理
+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,
+});
+const blur1TextureTarget = new WebGLRenderTarget(512, 512, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+});
+const size = new Vector2();
+// 创建一个渲染工具 用于处理纹理
+const fsQuad = new FullScreenQuad(); // 渲染辅助器
+//深度比对纹理
+const depthTestShader = new ShaderMaterial({
+    uniforms: {
+        color: { value: new Color("#000000") },
+        baseDepth: { value: null },
+        selectDepth: { value: null }, // 选中的对象深度纹理
+    },
+    vertexShader: `
+        ${ShaderChunk.common}
+        ${ShaderChunk.logdepthbuf_pars_vertex}
+        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}
+        }
+    `,
+    fragmentShader: `
+        ${ShaderChunk.logdepthbuf_pars_fragment}
+        uniform vec3 color;
+        uniform sampler2D baseDepth;
+        uniform sampler2D selectDepth;
+        varying vec2 vUv;
+        void main() {
+            if(texture2D(baseDepth, vUv).r + 0.0001 < texture2D(selectDepth, vUv).r){
+                discard;
+            }
+            gl_FragColor = vec4(color, 1.0);
+            ${ShaderChunk.logdepthbuf_fragment}
+        }
+    `,
+    blending: NoBlending,
+    depthTest: true,
+    depthWrite: true,
+    transparent: true,
+});
+// 场景对象
+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;
+    if (!cover_enable || cover_opacity === 0) {
+        return;
+    }
+    // 保存原帧缓冲区
+    const originRenderTarget = renderer.getRenderTarget();
+    // 设置选中目标的帧缓冲区
+    renderer.getSize(size);
+    size.multiplyScalar(window.devicePixelRatio);
+    selectTextureTarget.setSize(size.x, size.y);
+    selectDethpTestTextureTarget.setSize(size.x, size.y);
+    blur1TextureTarget.setSize(size.x, size.y);
+    renderer.setRenderTarget(selectTextureTarget);
+    scene.children = [object3d];
+    renderer.clear();
+    renderer.render(scene, camera);
+    //深度测试
+    renderer.setRenderTarget(selectDethpTestTextureTarget);
+    renderer.clear();
+    depthTestShader.uniforms.color.value.set(cover_color);
+    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;
+    // fsQuad.render(renderer, copyShader);
+    // return;
+}

package/pass/glow_pass.d.ts

@@ -1,2 +1,2 @@
-import { Camera, Object3D, WebGLRenderer, DepthTexture } from "three";
+import { Camera, DepthTexture, Object3D, WebGLRenderer } from "three";
 export default function glow_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D, baseDepthTexture: DepthTexture): void;

package/pass/glow_pass.js

@@ -2,9 +2,9 @@
  * @Author: xiaosihan
  * @Date: 2023-05-09 00:35:17
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-05-09 02:33:28
+ * @Last Modified time: 2024-09-23 22:00:48
  */
-import { LinearFilter, RGBAFormat, Vector2, WebGLRenderTarget, ShaderMaterial, NoBlending, Scene, RawShaderMaterial, Color, NormalBlending, ShaderChunk, DepthTexture, DepthFormat, UnsignedShortType } 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 = (() => {

package/pass/stroke_pass.d.ts

@@ -1,2 +1,2 @@
-import { Camera, Object3D, WebGLRenderer, DepthTexture } from "three";
+import { Camera, DepthTexture, Object3D, WebGLRenderer } from "three";
 export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D, baseDepthTexture: DepthTexture): void;

package/pass/stroke_pass.js

@@ -2,9 +2,9 @@
  * @Author: xiaosihan
  * @Date: 2023-05-09 00:35:17
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-05-09 02:33:28
+ * @Last Modified time: 2024-09-23 22:00:54
  */
-import { LinearFilter, RGBAFormat, Vector2, WebGLRenderTarget, ShaderMaterial, NoBlending, Scene, RawShaderMaterial, Color, NormalBlending, ShaderChunk, DepthTexture, DepthFormat, UnsignedShortType } 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 = (() => {

package/shaders/copyShader.d.ts

@@ -0,0 +1,3 @@
+import { ShaderMaterial } from "three";
+declare const copyShader: ShaderMaterial;
+export default copyShader;

package/shaders/copyShader.js

@@ -0,0 +1,33 @@
+import { ShaderChunk, ShaderMaterial } from "three";
+// 拷贝着色器
+const copyShader = new ShaderMaterial({
+    uniforms: {
+        map: { value: null },
+        opacity: { value: 1 }, // 透明度
+    },
+    vertexShader: `
+          ${ShaderChunk.common}
+          ${ShaderChunk.logdepthbuf_pars_vertex}
+          varying vec2 vUv;
+          void main() {
+              vUv = uv;
+              gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+              ${ShaderChunk.logdepthbuf_vertex}
+          }
+      `,
+    fragmentShader: `
+          ${ShaderChunk.logdepthbuf_pars_fragment}
+          uniform float opacity;
+          uniform sampler2D map;
+          varying vec2 vUv;
+          void main() {
+              gl_FragColor = texture2D(map, vUv);
+              gl_FragColor.a *= opacity;
+              ${ShaderChunk.logdepthbuf_fragment}
+          }
+      `,
+    depthTest: true,
+    depthWrite: true,
+    transparent: true,
+});
+export default copyShader;

package/threeLoader.js

@@ -4,7 +4,7 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2024-09-11 11:43:31
  */
-import { CanvasTexture, DefaultLoadingManager, EventDispatcher, Mesh, MeshStandardMaterial, RepeatWrapping, TextureLoader, VideoTexture, } from "three";
+import { CanvasTexture, DefaultLoadingManager, EventDispatcher, Mesh, MeshStandardMaterial, RepeatWrapping, SRGBColorSpace, TextureLoader, VideoTexture, } from "three";
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
 import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
@@ -26,6 +26,8 @@ import { isArray, isEmpty, isNull, isString, isUndefined } from "lodash";
 import { generateUUID } from "three/src/math/MathUtils";
 import dracoDecoderWASM from "./lib/draco/draco_decoder.wasm?url";
 import threeUtils from "./threeUtils";
+import { TGALoader } from "three/examples/jsm/Addons.js";
+DefaultLoadingManager.addHandler(/tga$/, new TGALoader());
 // 加载器
 class ThreeLoader extends EventDispatcher {
     constructor() {
@@ -76,7 +78,7 @@ class ThreeLoader extends EventDispatcher {
             const canvasTexture = new CanvasTexture(src);
             canvasTexture.wrapS = canvasTexture.wrapT = RepeatWrapping;
             canvasTexture.anisotropy = this.anisotropy;
-            // canvasTexture.colorSpace = SRGBColorSpace;
+            canvasTexture.colorSpace = SRGBColorSpace;
             return canvasTexture;
         }
         let texture = this.textureMap.get(src);
@@ -110,7 +112,7 @@ class ThreeLoader extends EventDispatcher {
         }
         texture.wrapS = texture.wrapT = RepeatWrapping;
         texture.anisotropy = this.anisotropy;
-        // texture.colorSpace = SRGBColorSpace;
+        texture.colorSpace = SRGBColorSpace;
         return texture;
     }
     // 资源列表
@@ -344,6 +346,11 @@ class ThreeLoader extends EventDispatcher {
                     if (stl) {
                         return await this.loadModel(stl);
                     }
+                    //如果有zip文件就加载zip文件
+                    let zipFile = Object.keys(zip.files).find((filename) => /\.stl$/.test(filename));
+                    if (zipFile) {
+                        return await this.loadModel(zipFile);
+                    }
                     if ([obj, gltf, dae, fbx, usdz, stl].every((v) => !v)) {
                         throw new Error(`${url}压缩包里没有obj.glb.gltf.dae.fbx.usde.stl等模型文件`);
                     }