three-base 1.0.86 → 1.0.88

package/lib/SpriteText.ts

@@ -67,7 +67,7 @@ export default class SpriteText extends Sprite {
 
     _genCanvas() {
         const canvas = this._canvas;
-        const ctx = canvas.getContext('2d');
+        const ctx = canvas.getContext('2d')!;
 
         const border = Array.isArray(this.borderWidth) ? this.borderWidth : [this.borderWidth, this.borderWidth]; // x,y border
         const relBorder = border.map(b => b * this.fontSize * 0.1) as [number, number]; // border in canvas units
@@ -118,12 +118,12 @@ export default class SpriteText extends Sprite {
                 const hb = cornerWidth / 2;
                 ctx.lineWidth = cornerWidth;
                 ctx.beginPath();
-                [
+                ([
                     !!relBorderRadius[0] && [relBorderRadius[0], hb, hb, relBorderRadius[0]],
                     !!relBorderRadius[1] && [canvas.width - relBorderRadius[1], canvas.width - hb, hb, relBorderRadius[1]],
                     !!relBorderRadius[2] && [canvas.width - relBorderRadius[2], canvas.width - hb, canvas.height - hb, canvas.height - relBorderRadius[2]],
                     !!relBorderRadius[3] && [relBorderRadius[3], hb, canvas.height - hb, canvas.height - relBorderRadius[3]]
-                ].filter(d => d).forEach(([x0, x1, y0, y1]) => {
+                ].filter(d => d) as [number, number, number, number][]).forEach(([x0, x1, y0, y1]) => {
                     ctx.moveTo(x0, y0);
                     ctx.quadraticCurveTo(x1, y0, x1, y1);
                 });

package/lib/SpriteText2.d.ts

@@ -43,5 +43,5 @@ export default class SpriteText2 extends Sprite {
     set strokeColor(strokeColor: string);
     _genCanvas(): void;
     raycast(raycaster: Raycaster, intersects: Intersection[]): void;
-    copy(source: any): this;
+    copy(source: SpriteText2): this;
 }

package/lib/SpriteText2.ts

@@ -136,12 +136,12 @@ export default class SpriteText2 extends Sprite {
                 const hb = cornerWidth / 2;
                 ctx.lineWidth = cornerWidth;
                 ctx.beginPath();
-                [
+                ([
                     !!relBorderRadius[0] && [relBorderRadius[0], hb, hb, relBorderRadius[0]],
                     !!relBorderRadius[1] && [canvas.width - relBorderRadius[1], canvas.width - hb, hb, relBorderRadius[1]],
                     !!relBorderRadius[2] && [canvas.width - relBorderRadius[2], canvas.width - hb, ((canvas.height - 40) / 2) - hb, ((canvas.height - 40) / 2) - relBorderRadius[2]],
                     !!relBorderRadius[3] && [relBorderRadius[3], hb, ((canvas.height - 40) / 2) - hb, ((canvas.height - 40) / 2) - relBorderRadius[3]]
-                ].filter(d => d).forEach(([x0, x1, y0, y1]) => {
+                ].filter(d => d) as [number, number, number, number][]).forEach(([x0, x1, y0, y1]) => {
                     ctx.moveTo(x0, y0);
                     ctx.quadraticCurveTo(x1, y0, x1, y1);
                 });
@@ -220,7 +220,7 @@ export default class SpriteText2 extends Sprite {
 
     }
 
-    copy(source) {
+    copy(source: SpriteText2) {
         this.color = source.color;
         this.backgroundColor = source.backgroundColor;
         this.padding = source.padding;

package/lib/ThreeBase.d.ts

@@ -19,6 +19,8 @@ export default class ThreeBase extends EventDispatcher {
     setsize(width: number, height: number): void;
     controlsPosition: Transition;
     controlsCenter: Transition;
+    gridHelper: void;
+    axesHelper: void;
     init(): void;
     resetLookAt({ position, center, }: {
         position?: Vector3;

package/lib/ThreeBase.js

@@ -2,7 +2,7 @@
  * @Author: xiaosihan
  * @Date: 2021-12-20 13:38:22
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-03-16 14:31:32
+ * @Last Modified time: 2023-05-09 01:11:17
  */
 import { round } from "lodash";
 import { AxesHelper, EventDispatcher, GridHelper, LinearFilter, Mesh, MOUSE, NoBlending, NormalBlending, PerspectiveCamera, RGBAFormat, Scene, TOUCH, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
@@ -13,6 +13,7 @@ import threeLoader from "./threeLoader";
 import ThreeMouse from "./ThreeMouse";
 import threeUtils from "./threeUtils";
 import Transition from "./Transition";
+import stroke_pass from "./stroke_pass/stroke_pass";
 // three.js 的基础对象
 export default class ThreeBase extends EventDispatcher {
     constructor() {
@@ -121,15 +122,19 @@ export default class ThreeBase extends EventDispatcher {
         });
         return controlsCenter;
     })();
+    // 网格辅助线
+    gridHelper = (() => {
+        const gridHelper = new GridHelper(1000, 100, 0x303030, 0x303030);
+        gridHelper.visible = threeUtils.isDev;
+        this.scene.add(gridHelper);
+    })();
+    //坐标轴线
+    axesHelper = (() => {
+        const axesHelper = new AxesHelper(10000);
+        axesHelper.visible = threeUtils.isDev;
+        this.scene.add(axesHelper);
+    })();
     init() {
-        // 非开发模式添加网格辅助线
-        if (threeUtils.isDev) {
-            const gridHelper = new GridHelper(1000, 100, 0x303030, 0x303030);
-            gridHelper.position.set(0, -0.001, 0);
-            this.scene.add(gridHelper);
-            const axesHelper = new AxesHelper(10000);
-            this.scene.add(axesHelper);
-        }
         // 资源加载进度有更新时, 需要渲染
         threeLoader.addEventListener("progress", () => {
             this.needRender = true;
@@ -253,6 +258,12 @@ export default class ThreeBase extends EventDispatcher {
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" });
         this.renderer.render(this.scene, this.camera);
+        // 查找需要绘制描边的对象,并且绘制描边
+        this.scene.traverse(obj => {
+            if (obj.userData.stroke_enable) {
+                stroke_pass(this.renderer, this.camera, obj);
+            }
+        });
         this.dispatchEvent({ type: "afterRender" });
     }
     renderBindThis = this.render.bind(this);

package/lib/ThreeBase.ts

@@ -2,7 +2,7 @@
  * @Author: xiaosihan 
  * @Date: 2021-12-20 13:38:22 
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-03-16 14:31:32
+ * @Last Modified time: 2023-05-09 01:11:17
  */
 
 import { round } from "lodash";
@@ -14,6 +14,7 @@ import threeLoader from "./threeLoader";
 import ThreeMouse from "./ThreeMouse";
 import threeUtils from "./threeUtils";
 import Transition from "./Transition";
+import stroke_pass from "./stroke_pass/stroke_pass";
 
 // three.js 的基础对象
 export default class ThreeBase extends EventDispatcher {
@@ -145,16 +146,21 @@ export default class ThreeBase extends EventDispatcher {
         return controlsCenter;
     })();
 
-    init() {
-        // 非开发模式添加网格辅助线
-        if (threeUtils.isDev) {
-            const gridHelper = new GridHelper(1000, 100, 0x303030, 0x303030);
-            gridHelper.position.set(0, -0.001, 0);
-            this.scene.add(gridHelper);
-            const axesHelper = new AxesHelper(10000);
-            this.scene.add(axesHelper);
-        }
+    // 网格辅助线
+    gridHelper = (() => {
+        const gridHelper = new GridHelper(1000, 100, 0x303030, 0x303030);
+        gridHelper.visible = threeUtils.isDev;
+        this.scene.add(gridHelper);
+    })();
+    
+    //坐标轴线
+    axesHelper=(()=>{
+        const axesHelper = new AxesHelper(10000);
+        axesHelper.visible = threeUtils.isDev;
+        this.scene.add(axesHelper);
+    })();
 
+    init() {
         // 资源加载进度有更新时, 需要渲染
         threeLoader.addEventListener("progress", () => {
             this.needRender = true;
@@ -306,6 +312,14 @@ export default class ThreeBase extends EventDispatcher {
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" });
         this.renderer.render(this.scene, this.camera);
+
+        // 查找需要绘制描边的对象,并且绘制描边
+        this.scene.traverse(obj => {
+            if (obj.userData.stroke_enable) {
+                stroke_pass(this.renderer, this.camera, obj);
+            }
+        });
+
         this.dispatchEvent({ type: "afterRender" });
     }
 

package/lib/stroke_pass/FullScreenQuad.d.ts

@@ -0,0 +1,7 @@
+import { BufferGeometry, Material, Mesh, OrthographicCamera, Scene, WebGLRenderer } from "three";
+export default class FullScreenQuad extends Scene {
+    constructor();
+    mesh: Mesh<BufferGeometry, Material>;
+    orthographicCamera: OrthographicCamera;
+    render(renderer: WebGLRenderer, material: Material): void;
+}

package/lib/stroke_pass/FullScreenQuad.js

@@ -0,0 +1,25 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-05-09 01:36:35
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-05-09 01:47:07
+ */
+import { BufferGeometry, Float32BufferAttribute, Mesh, MeshBasicMaterial, OrthographicCamera, Scene } from "three";
+export default class FullScreenQuad extends Scene {
+    constructor() {
+        super();
+    }
+    mesh = (() => {
+        const geometry = new BufferGeometry();
+        geometry.setAttribute("position", new Float32BufferAttribute([-1, 3, 0, -1, -1, 0, 3, -1, 0], 3));
+        geometry.setAttribute("uv", new Float32BufferAttribute([0, 2, 0, 0, 2, 0], 2));
+        const mesh = new Mesh(geometry, new MeshBasicMaterial());
+        this.add(mesh);
+        return mesh;
+    })();
+    orthographicCamera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+    render(renderer, material) {
+        this.mesh.material = material;
+        renderer.render(this, this.orthographicCamera);
+    }
+}

package/lib/stroke_pass/FullScreenQuad.ts

@@ -0,0 +1,33 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2023-05-09 01:36:35 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-05-09 01:47:07
+ */
+
+
+import { BufferGeometry, Float32BufferAttribute, Material, Mesh, MeshBasicMaterial, OrthographicCamera, Scene, WebGLRenderer } from "three";
+
+
+export default class FullScreenQuad extends Scene {
+    constructor() {
+        super();
+    }
+
+    mesh = (() => {
+        const geometry = new BufferGeometry();
+        geometry.setAttribute("position", new Float32BufferAttribute([- 1, 3, 0, - 1, - 1, 0, 3, - 1, 0], 3));
+        geometry.setAttribute("uv", new Float32BufferAttribute([0, 2, 0, 0, 2, 0], 2));
+        const mesh = new Mesh<BufferGeometry, Material>(geometry, new MeshBasicMaterial());
+        this.add(mesh);
+        return mesh;
+    })();
+
+    orthographicCamera = new OrthographicCamera(- 1, 1, 1, - 1, 0, 1);
+
+    render(renderer: WebGLRenderer, material: Material) {
+        this.mesh.material = material;
+        renderer.render(this, this.orthographicCamera);
+    }
+
+}

package/lib/stroke_pass/stroke_pass.d.ts

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

package/lib/stroke_pass/stroke_pass.js

@@ -0,0 +1,190 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-05-09 00:35:17
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-05-09 02:33:28
+ */
+import { LinearFilter, RGBAFormat, Vector2, WebGLRenderTarget, NoBlending, Scene, RawShaderMaterial, Color, NormalBlending } from "three";
+import FullScreenQuad from "./FullScreenQuad";
+// 选中对象的纹理
+const selectTextureTarget = 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 size = new Vector2();
+// 创建一个渲染工具 用于处理纹理
+const fsQuad = new FullScreenQuad(); // 渲染辅助器
+// 描边着色器
+const blurShader = new RawShaderMaterial({
+    uniforms: {
+        tDiffuse: { value: null },
+        color: { value: new Color("#0f0") },
+        width: { value: 1.0 },
+        opacity: { value: 1.0 },
+        resolution: { value: new Vector2(1 / 512, 1 / 512) },
+        offset: {
+            value: [
+                new Vector2(0.000, 1.000),
+                new Vector2(0.259, 0.966),
+                new Vector2(0.500, 0.866),
+                new Vector2(0.707, 0.707),
+                new Vector2(0.866, 0.500),
+                new Vector2(0.966, 0.259),
+                new Vector2(1.000, 0.000),
+                new Vector2(0.966, -0.259),
+                new Vector2(0.866, -0.500),
+                new Vector2(0.707, -0.707),
+                new Vector2(0.500, -0.866),
+                new Vector2(0.259, -0.966),
+                new Vector2(0.000, -1.000),
+                new Vector2(-0.259, -0.966),
+                new Vector2(-0.500, -0.866),
+                new Vector2(-0.707, -0.707),
+                new Vector2(-0.866, -0.500),
+                new Vector2(-0.966, -0.259),
+                new Vector2(-1.000, -0.000),
+                new Vector2(-0.966, 0.259),
+                new Vector2(-0.866, 0.500),
+                new Vector2(-0.707, 0.707),
+                new Vector2(-0.500, 0.866),
+                new Vector2(-0.259, 0.966)
+            ]
+        }
+    },
+    vertexShader: `
+		attribute vec3 position;
+		attribute vec2 uv;
+		varying vec2 vUv;
+		void main() {
+			vUv = uv;
+			gl_Position = vec4(position, 1.0);
+		}`,
+    fragmentShader: `
+		#ifdef GL_ES
+			precision highp float;
+		#endif
+		uniform sampler2D tDiffuse;
+		uniform vec3 color;
+		uniform float width;
+		uniform float opacity;
+		uniform vec2 resolution;
+		uniform vec2 offset[24];
+		varying vec2 vUv;
+		vec2 piexl = resolution * width; // 描边厚度
+
+		vec4 stroke(){
+			vec4 blurColor = vec4(0.0);
+			vec4 Color = vec4(0.0);
+			int vSum = 0; // 周围像素点中和 visibleColor 相似的数量
+			for (int i = 0; i < 24; i++ ) {
+				Color = texture2D(tDiffuse, vUv + (offset[i] * piexl));
+				if (Color.a > 0.0) {
+					blurColor += Color;
+				}
+			}
+			if (blurColor.a < 0.001) {
+				return vec4(0.0);
+			} else {
+				return vec4(color, opacity);
+			}
+		}
+		void main() {
+			vec4 Color = texture2D(tDiffuse, vUv);
+			if (Color.a > 0.0 || width == 0.0) {
+				gl_FragColor = Color;
+			} else {
+				gl_FragColor = stroke();
+			}
+		}`,
+    blending: NoBlending,
+    depthTest: false,
+    depthWrite: false,
+    transparent: true
+});
+// 过滤着色器
+const filterSelectShader = new RawShaderMaterial({
+    uniforms: {
+        selectTexture: { value: null },
+        blurTexture: { value: null }
+    },
+    vertexShader: `
+		attribute vec3 position;
+		attribute vec2 uv;
+		varying vec2 vUv;
+		void main() {
+			vUv = uv;
+			gl_Position = vec4(position, 1.0);
+		}
+	`,
+    fragmentShader: `
+		#ifdef GL_ES
+			precision highp float;
+		#endif
+		uniform sampler2D selectTexture;
+		uniform sampler2D blurTexture;
+		varying vec2 vUv;
+
+		void main() {
+			gl_FragColor = texture2D(blurTexture, vUv);
+			gl_FragColor.a -= (texture2D(selectTexture, vUv).a);
+		}
+	`,
+    blending: NoBlending,
+    depthTest: false,
+    depthWrite: false,
+    transparent: true
+});
+// 场景对象
+const scene = new Scene();
+// 对象描边
+export default function stroke_pass(renderer, camera, object3d) {
+    const { stroke_enable = false, stroke_color = "#04fa12", stroke_width = 1 } = object3d.userData;
+    if (!stroke_enable) {
+        return;
+    }
+    // 保存原帧缓冲区
+    const originRenderTarget = renderer.getRenderTarget();
+    // 设置选中目标的帧缓冲区
+    renderer.getSize(size);
+    selectTextureTarget.setSize(size.x, size.y);
+    blur1TextureTarget.setSize(size.x, size.y);
+    blur2TextureTarget.setSize(size.x, size.y);
+    renderer.setRenderTarget(selectTextureTarget);
+    scene.children = [object3d];
+    renderer.clear();
+    renderer.render(object3d, camera);
+    // 设置描边着色器的分辨率
+    blurShader.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
+    //描边颜色
+    blurShader.uniforms.color.value.set(stroke_color);
+    blurShader.uniforms.width.value = stroke_width / 4;
+    //一次描边
+    renderer.setRenderTarget(blur1TextureTarget);
+    blurShader.uniforms.tDiffuse.value = selectTextureTarget.texture;
+    fsQuad.render(renderer, blurShader);
+    //二次描边
+    renderer.setRenderTarget(blur2TextureTarget);
+    blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
+    fsQuad.render(renderer, blurShader);
+    //三次描边
+    renderer.setRenderTarget(blur1TextureTarget);
+    blurShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
+    fsQuad.render(renderer, blurShader);
+    //四次描边
+    renderer.setRenderTarget(blur2TextureTarget);
+    blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
+    fsQuad.render(renderer, blurShader);
+    // 还原帧缓冲区 减去原始纹理保留描边
+    renderer.setRenderTarget(originRenderTarget);
+    filterSelectShader.uniforms.selectTexture.value = selectTextureTarget.texture;
+    filterSelectShader.uniforms.blurTexture.value = blur2TextureTarget.texture;
+    filterSelectShader.blending = NormalBlending; // 与有的纹理融合计算 保留前面通道传递下来的纹理
+    fsQuad.render(renderer, filterSelectShader);
+    // 调试代码
+    // renderer.setRenderTarget(null);
+    // renderer.clearDepth();
+    // copyShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
+    // fsQuad.render(renderer, copyShader);
+    // return;
+}

package/lib/stroke_pass/stroke_pass.ts

@@ -0,0 +1,211 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2023-05-09 00:35:17 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-05-09 02:33:28
+ */
+
+import { Camera, LinearFilter, Object3D, RGBAFormat, Vector2, WebGLRenderTarget, WebGLRenderer, ShaderMaterial, NoBlending, Scene, RawShaderMaterial, Color, NormalBlending } from "three";
+import FullScreenQuad from "./FullScreenQuad";
+
+// 选中对象的纹理
+const selectTextureTarget = 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 size = new Vector2();
+
+// 创建一个渲染工具 用于处理纹理
+const fsQuad = new FullScreenQuad(); // 渲染辅助器
+
+// 描边着色器
+const blurShader = new RawShaderMaterial({
+    uniforms: {
+        tDiffuse: { value: null },
+        color: { value: new Color("#0f0") }, // 没有被挡住的地方的颜色绿色
+        width: { value: 1.0 },
+        opacity: { value: 1.0 },
+        resolution: { value: new Vector2(1 / 512, 1 / 512) }, // 渲染器的分辨率
+        offset: {
+            value: [
+                new Vector2(0.000, 1.000),
+                new Vector2(0.259, 0.966),
+                new Vector2(0.500, 0.866),
+                new Vector2(0.707, 0.707),
+                new Vector2(0.866, 0.500),
+                new Vector2(0.966, 0.259),
+                new Vector2(1.000, 0.000),
+                new Vector2(0.966, -0.259),
+                new Vector2(0.866, -0.500),
+                new Vector2(0.707, -0.707),
+                new Vector2(0.500, -0.866),
+                new Vector2(0.259, -0.966),
+                new Vector2(0.000, -1.000),
+                new Vector2(-0.259, -0.966),
+                new Vector2(-0.500, -0.866),
+                new Vector2(-0.707, -0.707),
+                new Vector2(-0.866, -0.500),
+                new Vector2(-0.966, -0.259),
+                new Vector2(-1.000, -0.000),
+                new Vector2(-0.966, 0.259),
+                new Vector2(-0.866, 0.500),
+                new Vector2(-0.707, 0.707),
+                new Vector2(-0.500, 0.866),
+                new Vector2(-0.259, 0.966)
+            ]
+        }
+    },
+    vertexShader: `
+		attribute vec3 position;
+		attribute vec2 uv;
+		varying vec2 vUv;
+		void main() {
+			vUv = uv;
+			gl_Position = vec4(position, 1.0);
+		}`,
+    fragmentShader: `
+		#ifdef GL_ES
+			precision highp float;
+		#endif
+		uniform sampler2D tDiffuse;
+		uniform vec3 color;
+		uniform float width;
+		uniform float opacity;
+		uniform vec2 resolution;
+		uniform vec2 offset[24];
+		varying vec2 vUv;
+		vec2 piexl = resolution * width; // 描边厚度
+
+		vec4 stroke(){
+			vec4 blurColor = vec4(0.0);
+			vec4 Color = vec4(0.0);
+			int vSum = 0; // 周围像素点中和 visibleColor 相似的数量
+			for (int i = 0; i < 24; i++ ) {
+				Color = texture2D(tDiffuse, vUv + (offset[i] * piexl));
+				if (Color.a > 0.0) {
+					blurColor += Color;
+				}
+			}
+			if (blurColor.a < 0.001) {
+				return vec4(0.0);
+			} else {
+				return vec4(color, opacity);
+			}
+		}
+		void main() {
+			vec4 Color = texture2D(tDiffuse, vUv);
+			if (Color.a > 0.0 || width == 0.0) {
+				gl_FragColor = Color;
+			} else {
+				gl_FragColor = stroke();
+			}
+		}`,
+    blending: NoBlending, // 渲染时不与背景融合计算 直接替换
+    depthTest: false,
+    depthWrite: false,
+    transparent: true
+});
+
+// 过滤着色器
+const filterSelectShader = new RawShaderMaterial({
+    uniforms: {
+        selectTexture: { value: null },
+        blurTexture: { value: null }
+    },
+    vertexShader: `
+		attribute vec3 position;
+		attribute vec2 uv;
+		varying vec2 vUv;
+		void main() {
+			vUv = uv;
+			gl_Position = vec4(position, 1.0);
+		}
+	`,
+    fragmentShader: `
+		#ifdef GL_ES
+			precision highp float;
+		#endif
+		uniform sampler2D selectTexture;
+		uniform sampler2D blurTexture;
+		varying vec2 vUv;
+
+		void main() {
+			gl_FragColor = texture2D(blurTexture, vUv);
+			gl_FragColor.a -= (texture2D(selectTexture, vUv).a);
+		}
+	`,
+    blending: NoBlending, // 渲染时不与背景融合计算 直接替换
+    depthTest: false,
+    depthWrite: false,
+    transparent: true
+});
+
+// 场景对象
+const scene = new Scene();
+
+// 对象描边
+export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D) {
+
+    const { stroke_enable = false, stroke_color = "#04fa12", stroke_width = 1 } = object3d.userData;
+    if (!stroke_enable) {
+        return;
+    }
+
+    // 保存原帧缓冲区
+    const originRenderTarget = renderer.getRenderTarget();
+
+    // 设置选中目标的帧缓冲区
+    renderer.getSize(size);
+    selectTextureTarget.setSize(size.x, size.y);
+    blur1TextureTarget.setSize(size.x, size.y);
+    blur2TextureTarget.setSize(size.x, size.y);
+    renderer.setRenderTarget(selectTextureTarget);
+    scene.children = [object3d];
+    renderer.clear();
+    renderer.render(object3d, camera);
+
+    // 设置描边着色器的分辨率
+    blurShader.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
+    //描边颜色
+    blurShader.uniforms.color.value.set(stroke_color);
+    blurShader.uniforms.width.value = stroke_width / 4;
+
+    //一次描边
+    renderer.setRenderTarget(blur1TextureTarget);
+    blurShader.uniforms.tDiffuse.value = selectTextureTarget.texture;
+    fsQuad.render(renderer, blurShader);
+
+    //二次描边
+    renderer.setRenderTarget(blur2TextureTarget);
+    blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
+    fsQuad.render(renderer, blurShader);
+
+    //三次描边
+    renderer.setRenderTarget(blur1TextureTarget);
+    blurShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
+    fsQuad.render(renderer, blurShader);
+
+    //四次描边
+    renderer.setRenderTarget(blur2TextureTarget);
+    blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
+    fsQuad.render(renderer, blurShader);
+
+    // 还原帧缓冲区 减去原始纹理保留描边
+    renderer.setRenderTarget(originRenderTarget);
+    filterSelectShader.uniforms.selectTexture.value = selectTextureTarget.texture;
+    filterSelectShader.uniforms.blurTexture.value = blur2TextureTarget.texture;
+    filterSelectShader.blending = NormalBlending; // 与有的纹理融合计算 保留前面通道传递下来的纹理
+    fsQuad.render(renderer, filterSelectShader);
+
+
+    // 调试代码
+    // renderer.setRenderTarget(null);
+    // renderer.clearDepth();
+    // copyShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
+    // fsQuad.render(renderer, copyShader);
+    // return;
+}

package/lib/threeUtils.d.ts

@@ -35,7 +35,7 @@ declare class ThreeUtils extends EventDispatcher {
     alignBottom(object3d: Object3D | BufferGeometry, y?: number): void;
     centerObject3D(object3d: Object3D | BufferGeometry): void;
     center(object3d: Object3D | BufferGeometry): void;
-    scaleTo(object3d: Object3D | BufferGeometry, size?: number): void;
+    scaleTo(object3d: Object3D | BufferGeometry, size?: number, key?: Partial<["x", "y", "z"]>): void;
 }
 declare const threeUtils: ThreeUtils;
 export default threeUtils;

package/lib/threeUtils.js

@@ -162,10 +162,10 @@ class ThreeUtils extends EventDispatcher {
     center(object3d) {
         this.centerObject3D(object3d);
     }
-    //缩放至指定大小
-    scaleTo(object3d, size = 1) {
+    // 使用指定的纬度计算, 缩放至指定大小
+    scaleTo(object3d, size = 1, key = ["x", "y", "z"]) {
         const originSize = this.getSize(object3d);
-        const scale = size / Math.max(originSize.x, originSize.y, originSize.z);
+        const scale = size / Math.max(...key.map(k => originSize[k]));
         if (object3d instanceof Object3D) {
             object3d.scale.multiplyScalar(scale);
             object3d.updateMatrixWorld(true);

package/lib/threeUtils.ts

@@ -188,10 +188,11 @@ class ThreeUtils extends EventDispatcher {
         this.centerObject3D(object3d);
     }
 
-    //缩放至指定大小
-    scaleTo(object3d: Object3D | BufferGeometry, size: number = 1) {
+    // 使用指定的纬度计算, 缩放至指定大小
+    scaleTo(object3d: Object3D | BufferGeometry, size: number = 1, key: Partial<["x", "y", "z"]> = ["x", "y", "z"]) {
         const originSize = this.getSize(object3d);
-        const scale = size / Math.max(originSize.x, originSize.y, originSize.z);
+        const scale = size / Math.max(...key.map(k => originSize[k]));
+
         if (object3d instanceof Object3D) {
             object3d.scale.multiplyScalar(scale);
             object3d.updateMatrixWorld(true);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "three-base",
-    "version": "1.0.86",
+    "version": "1.0.88",
     "description": "three 3d three-base",
     "repository": {
         "type": "git",