three-base 2.0.15 → 2.0.17

package/ThreeBase.js

@@ -106,6 +106,7 @@ export default class ThreeBase extends EventDispatcher {
             div.append(this.renderer.domElement);
             // 如果上下文被销毁了,  就恢复上下文
             if (this.isRendererContextLost) {
+                this.isRendererContextLost = false;
                 this.renderer.forceContextRestore();
                 await new Promise(resolve => requestAnimationFrame(resolve));
                 await new Promise(resolve => requestAnimationFrame(resolve));
@@ -119,7 +120,7 @@ export default class ThreeBase extends EventDispatcher {
     }
     // 修改尺寸
     setSize(width, height) {
-        if (this.camera instanceof PerspectiveCamera) {
+        if (this.camera.type == 'PerspectiveCamera') {
             this.camera.aspect = width / height;
             this.camera.updateProjectionMatrix();
         }
@@ -295,8 +296,7 @@ export default class ThreeBase extends EventDispatcher {
         this.renderer.render(this.scene, this.camera);
         this.renderer.setRenderTarget(null);
         this.renderer.clear();
-        this.renderRendererTarget(this.baseRenderTarget);
-        // this.renderer.render(this.scene, this.camera);
+        this.renderer.render(this.scene, this.camera);
         // 查找需要绘制描边的对象,并且绘制描边
         this.scene.traverse(obj => {
             stroke_pass(this.renderer, this.camera, obj, this.baseDepthTexture);

package/ThreeBase.ts

@@ -125,6 +125,7 @@ export default class ThreeBase extends EventDispatcher {
 
             // 如果上下文被销毁了,  就恢复上下文
             if (this.isRendererContextLost) {
+                this.isRendererContextLost = false;
                 this.renderer.forceContextRestore();
                 await new Promise(resolve => requestAnimationFrame(resolve));
                 await new Promise(resolve => requestAnimationFrame(resolve));
@@ -141,9 +142,9 @@ export default class ThreeBase extends EventDispatcher {
 
     // 修改尺寸
     setSize(width: number, height: number) {
-        if (this.camera instanceof PerspectiveCamera) {
-            this.camera.aspect = width / height;
-            this.camera.updateProjectionMatrix();
+        if ((this.camera as PerspectiveCamera).type == 'PerspectiveCamera') {
+            (this.camera as PerspectiveCamera).aspect = width / height;
+            (this.camera as PerspectiveCamera).updateProjectionMatrix();
         }
 
         this.renderer.setPixelRatio(window.devicePixelRatio);
@@ -354,8 +355,7 @@ export default class ThreeBase extends EventDispatcher {
 
         this.renderer.setRenderTarget(null);
         this.renderer.clear();
-        this.renderRendererTarget(this.baseRenderTarget);
-        // this.renderer.render(this.scene, this.camera);
+        this.renderer.render(this.scene, this.camera);
 
         // 查找需要绘制描边的对象,并且绘制描边
         this.scene.traverse(obj => {

package/package.json

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

package/pass/stroke_pass.js

@@ -371,7 +371,6 @@ const blurShader = new RawShaderMaterial({
 		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) {
@@ -485,7 +484,7 @@ export default function stroke_pass(renderer, camera, object3d, baseDepthTexture
     FXAAShaderMaterial.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
     //描边颜色
     blurShader.uniforms.color.value.set(stroke_color);
-    blurShader.uniforms.width.value = stroke_width / 4;
+    blurShader.uniforms.width.value = 1;
     //深度测试
     renderer.setRenderTarget(selectDethpTestTextureTarget);
     renderer.clear();
@@ -501,14 +500,16 @@ export default function stroke_pass(renderer, camera, object3d, baseDepthTexture
     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);
+    for (let i = 0; i < stroke_width - 2; i++) {
+        //一次描边
+        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(blur1TextureTarget);
     FXAAShaderMaterial.uniforms.tDiffuse.value = blur2TextureTarget.texture;

package/pass/stroke_pass.ts

@@ -383,7 +383,6 @@ const blurShader = new RawShaderMaterial({
 		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) {
@@ -505,7 +504,7 @@ export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, obj
     FXAAShaderMaterial.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
     //描边颜色
     blurShader.uniforms.color.value.set(stroke_color);
-    blurShader.uniforms.width.value = stroke_width / 4;
+    blurShader.uniforms.width.value = 1;
 
 
     //深度测试
@@ -516,7 +515,6 @@ export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, obj
     depthTestShader.uniforms.selectDepth.value = selectDepthTexture;
     fsQuad.render(renderer, depthTestShader);
 
-
     //一次描边
     renderer.setRenderTarget(blur1TextureTarget);
     blurShader.uniforms.tDiffuse.value = selectDethpTestTextureTarget.texture;
@@ -527,15 +525,18 @@ export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, obj
     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);
+    for (let i = 0; i < stroke_width - 2; i++) {
+        //一次描边
+        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(blur1TextureTarget);

package/threeLoader.js

@@ -4,7 +4,7 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-02-07 11:11:48
  */
-import { CanvasTexture, DefaultLoadingManager, EventDispatcher, RepeatWrapping, SRGBColorSpace, TextureLoader, VideoTexture } from "three";
+import { CanvasTexture, DefaultLoadingManager, EventDispatcher, RepeatWrapping, TextureLoader, VideoTexture } from "three";
 import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
@@ -33,7 +33,7 @@ class ThreeLoader extends EventDispatcher {
         };
     }
     // 各向异性
-    anisotropy = 1;
+    anisotropy = 16;
     // 设置各向异性 由渲染器来调用并设置
     setAnisotropy(v) {
         this.anisotropy = v;
@@ -49,7 +49,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);
@@ -77,7 +77,7 @@ class ThreeLoader extends EventDispatcher {
         }
         texture.wrapS = texture.wrapT = RepeatWrapping;
         texture.anisotropy = this.anisotropy;
-        texture.colorSpace = SRGBColorSpace;
+        // texture.colorSpace = SRGBColorSpace;
         return texture;
     }
     ;

package/threeLoader.ts

@@ -41,7 +41,7 @@ class ThreeLoader extends EventDispatcher {
     }
 
     // 各向异性
-    anisotropy = 1;
+    anisotropy = 16;
 
     // 设置各向异性 由渲染器来调用并设置
     setAnisotropy(v: number) {
@@ -62,7 +62,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;
         }
@@ -96,7 +96,7 @@ class ThreeLoader extends EventDispatcher {
 
         texture.wrapS = texture.wrapT = RepeatWrapping;
         texture.anisotropy = this.anisotropy;
-        texture.colorSpace = SRGBColorSpace;
+        // texture.colorSpace = SRGBColorSpace;
 
         return texture as Texture;
     };

package/threeUtils.js

@@ -4,7 +4,7 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-05-03 00:36:18
  */
-import { Box3, BufferGeometry, Clock, EventDispatcher, Object3D, Vector3 } from "three";
+import { Box3, Clock, EventDispatcher, Vector3 } from "three";
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter';
 class ThreeUtils extends EventDispatcher {
     constructor() {
@@ -108,11 +108,11 @@ class ThreeUtils extends EventDispatcher {
     }
     // 获取中心点
     getCenter(object3d) {
-        if (object3d instanceof Object3D) {
+        if (object3d.isObject3D) {
             this._box3.setFromObject(object3d);
             this._box3.getCenter(this._center);
         }
-        else if (object3d instanceof BufferGeometry) {
+        else if (object3d.isBufferGeometry) {
             object3d.computeBoundingBox();
             object3d.boundingBox.getCenter(this._center);
         }
@@ -120,11 +120,11 @@ class ThreeUtils extends EventDispatcher {
     }
     // 获取模型大小
     getSize(object3d) {
-        if (object3d instanceof Object3D) {
+        if (object3d.isObject3D) {
             this._box3.setFromObject(object3d);
             this._box3.getSize(this._size);
         }
-        else if (object3d instanceof BufferGeometry) {
+        else if (object3d.isBufferGeometry) {
             object3d.computeBoundingBox();
             object3d.boundingBox.getSize(this._size);
         }
@@ -132,7 +132,7 @@ class ThreeUtils extends EventDispatcher {
     }
     // 模型对齐底面
     alignBottom(object3d, y = 0) {
-        if (object3d instanceof Object3D) {
+        if (object3d.isObject3D) {
             this._box3.setFromObject(object3d);
             this._box3.getCenter(this._center);
             this._box3.getSize(this._size);
@@ -140,20 +140,20 @@ class ThreeUtils extends EventDispatcher {
             object3d.position.y += y;
             object3d.updateMatrixWorld(true);
         }
-        else if (object3d instanceof BufferGeometry) {
+        else if (object3d.isBufferGeometry) {
             object3d.computeBoundingBox();
             object3d.translate(0, -object3d.boundingBox.min.y + y, 0);
         }
     }
     // 居中对象
     centerObject3D(object3d) {
-        if (object3d instanceof Object3D) {
+        if (object3d.isObject3D) {
             this._box3.setFromObject(object3d);
             this._box3.getCenter(this._center);
             object3d.position.sub(this._center);
             object3d.updateMatrixWorld(true);
         }
-        else if (object3d instanceof BufferGeometry) {
+        else if (object3d.isBufferGeometry) {
             object3d.center();
         }
     }
@@ -161,15 +161,15 @@ class ThreeUtils extends EventDispatcher {
     center(object3d) {
         this.centerObject3D(object3d);
     }
-    // 使用指定的纬度计算, 缩放至指定大小
+    // 使用指定的维度(xyz)计算, 缩放至指定大小;
     scaleTo(object3d, size = 1, key = ["x", "y", "z"]) {
         const originSize = this.getSize(object3d);
         const scale = size / Math.max(...key.map(k => originSize[k]));
-        if (object3d instanceof Object3D) {
+        if (object3d.isObject3D) {
             object3d.scale.multiplyScalar(scale);
             object3d.updateMatrixWorld(true);
         }
-        else if (object3d instanceof BufferGeometry) {
+        else if (object3d.isBufferGeometry) {
             object3d.scale(scale, scale, scale);
         }
     }

package/threeUtils.ts

@@ -131,12 +131,12 @@ class ThreeUtils extends EventDispatcher {
 
     // 获取中心点
     getCenter(object3d: Object3D | BufferGeometry) {
-        if (object3d instanceof Object3D) {
-            this._box3.setFromObject(object3d);
+        if ((object3d as Object3D).isObject3D) {
+            this._box3.setFromObject(object3d as Object3D);
             this._box3.getCenter(this._center);
-        } else if (object3d instanceof BufferGeometry) {
-            object3d.computeBoundingBox();
-            object3d.boundingBox!.getCenter(this._center);
+        } else if ((object3d as BufferGeometry).isBufferGeometry) {
+            (object3d as BufferGeometry).computeBoundingBox();
+            (object3d as BufferGeometry).boundingBox!.getCenter(this._center);
         }
 
         return this._center;
@@ -144,12 +144,12 @@ class ThreeUtils extends EventDispatcher {
 
     // 获取模型大小
     getSize(object3d: Object3D | BufferGeometry) {
-        if (object3d instanceof Object3D) {
-            this._box3.setFromObject(object3d);
+        if ((object3d as Object3D).isObject3D) {
+            this._box3.setFromObject(object3d as Object3D);
             this._box3.getSize(this._size);
-        } else if (object3d instanceof BufferGeometry) {
-            object3d.computeBoundingBox();
-            object3d.boundingBox!.getSize(this._size);
+        } else if ((object3d as BufferGeometry).isBufferGeometry) {
+            (object3d as BufferGeometry).computeBoundingBox();
+            (object3d as BufferGeometry).boundingBox!.getSize(this._size);
         }
 
         return this._size;
@@ -157,28 +157,28 @@ class ThreeUtils extends EventDispatcher {
 
     // 模型对齐底面
     alignBottom(object3d: Object3D | BufferGeometry, y = 0) {
-        if (object3d instanceof Object3D) {
-            this._box3.setFromObject(object3d);
+        if ((object3d as Object3D).isObject3D) {
+            this._box3.setFromObject(object3d as Object3D);
             this._box3.getCenter(this._center);
             this._box3.getSize(this._size);
-            object3d.position.y -= (this._center.y - (this._size.y * 0.5));
-            object3d.position.y += y;
-            object3d.updateMatrixWorld(true);
-        } else if (object3d instanceof BufferGeometry) {
-            object3d.computeBoundingBox();
-            object3d.translate(0, -object3d.boundingBox!.min.y + y, 0);
+            (object3d as Object3D).position.y -= (this._center.y - (this._size.y * 0.5));
+            (object3d as Object3D).position.y += y;
+            (object3d as Object3D).updateMatrixWorld(true);
+        } else if ((object3d as BufferGeometry).isBufferGeometry) {
+            (object3d as BufferGeometry).computeBoundingBox();
+            (object3d as BufferGeometry).translate(0, -(object3d as BufferGeometry).boundingBox!.min.y + y, 0);
         }
     }
 
     // 居中对象
     centerObject3D(object3d: Object3D | BufferGeometry) {
-        if (object3d instanceof Object3D) {
-            this._box3.setFromObject(object3d);
+        if ((object3d as Object3D).isObject3D) {
+            this._box3.setFromObject(object3d as Object3D);
             this._box3.getCenter(this._center);
-            object3d.position.sub(this._center);
-            object3d.updateMatrixWorld(true);
-        } else if (object3d instanceof BufferGeometry) {
-            object3d.center();
+            (object3d as Object3D).position.sub(this._center);
+            (object3d as Object3D).updateMatrixWorld(true);
+        } else if ((object3d as BufferGeometry).isBufferGeometry) {
+            (object3d as BufferGeometry).center();
         }
     }
 
@@ -187,16 +187,16 @@ class ThreeUtils extends EventDispatcher {
         this.centerObject3D(object3d);
     }
 
-    // 使用指定的纬度计算, 缩放至指定大小
+    // 使用指定的维度(xyz)计算, 缩放至指定大小;
     scaleTo(object3d: Object3D | BufferGeometry, size: number = 1, key: Array<"x" | "y" | "z"> = ["x", "y", "z"]) {
         const originSize = this.getSize(object3d);
         const scale = size / Math.max(...key.map(k => originSize[k]));
 
-        if (object3d instanceof Object3D) {
-            object3d.scale.multiplyScalar(scale);
-            object3d.updateMatrixWorld(true);
-        } else if (object3d instanceof BufferGeometry) {
-            object3d.scale(scale, scale, scale);
+        if ((object3d as Object3D).isObject3D) {
+            (object3d as Object3D).scale.multiplyScalar(scale);
+            (object3d as Object3D).updateMatrixWorld(true);
+        } else if ((object3d as BufferGeometry).isBufferGeometry) {
+            (object3d as BufferGeometry).scale(scale, scale, scale);
         }
     }