three-base 2.0.23 → 2.0.24

package/README.md

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

package/ThreeBase.d.ts

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

package/ThreeBase.js

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

package/ThreeBase.ts

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

package/package.json

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