three-base 2.0.34 → 2.0.36

package/MeshBase.js

@@ -1,4 +1,4 @@
-import { AnimationMixer, Clock, Group, Mesh, Object3D, Vector3 } from "three";
+import { AnimationMixer, Clock, Group, Object3D, Vector3 } from "three";
 import threeUtils from "./threeUtils";
 import threeLoader from "./threeLoader";
 import * as SkeletonUtils from 'three/examples/jsm/utils/SkeletonUtils';
@@ -45,13 +45,6 @@ export default class MeshBase extends Group {
                     console.error(`${url},加载失败`);
                 });
             }
-            else if (/\.stl$/i.test(url)) {
-                await threeLoader.stlLoader.loadAsync(url).then(stlGeo => {
-                    modal = new Mesh(stlGeo);
-                }).catch(() => {
-                    console.error(`${url},加载失败`);
-                });
-            }
             else {
                 console.error(`${url},不支持的格式`);
             }

package/MeshBase.ts

@@ -56,12 +56,6 @@ export default class MeshBase extends Group {
                 }).catch(() => {
                     console.error(`${url},加载失败`);
                 })
-            } else if (/\.stl$/i.test(url)) {
-                await threeLoader.stlLoader.loadAsync(url).then(stlGeo => {
-                    modal = new Mesh(stlGeo);
-                }).catch(() => {
-                    console.error(`${url},加载失败`);
-                })
             } else {
                 console.error(`${url},不支持的格式`);
             }

package/Text3D/Text3D.ts

@@ -36,6 +36,7 @@ export default class Text3D extends Mesh {
     // 字体的存储路径 例如 : "http://drm.gitee.io/three-base-font/simhei/字.js"
     static path = "//www.3dkeshihua.com/three-base-font/";
 
+
     material = new MeshStandardMaterial({
         metalness: 1, // 金属度，值为0到1
         roughness: 0.5, // 粗糙度，值为0到1

package/ThreeBase.d.ts

@@ -11,6 +11,7 @@ export default class ThreeBase extends EventDispatcher {
     tempVector2: Vector2;
     tempVector3: Vector3;
     size: Vector2;
+    rendererLost: boolean;
     renderer: WebGLRenderer;
     perspectiveCamera: PerspectiveCamera;
     orthographicCamera: OrthographicCamera;

package/ThreeBase.js

@@ -5,7 +5,7 @@
  * @Last Modified time: 2024-01-20 05:33:28
  */
 import { round } from "lodash";
-import { AxesHelper, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, LinearSRGBColorSpace, MOUSE, Mesh, NoBlending, NormalBlending, OrthographicCamera, PerspectiveCamera, RGBAFormat, Scene, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderTarget, WebGLRenderer } from "three";
+import { AxesHelper, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, MOUSE, Mesh, NoBlending, NormalBlending, OrthographicCamera, PerspectiveCamera, RGBAFormat, 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";
@@ -52,6 +52,8 @@ export default class ThreeBase extends EventDispatcher {
     tempVector3 = new Vector3();
     //渲染器的尺寸
     size = new Vector2(0, 0);
+    //上下文丢失
+    rendererLost = false;
     // 渲染器对象
     renderer = (() => {
         const renderer = new WebGLRenderer({
@@ -63,8 +65,15 @@ export default class ThreeBase extends EventDispatcher {
             stencil: false, // 模版
         });
         renderer.domElement.id = generateUUID();
+        //监听上下文的销毁事件
+        renderer.domElement.addEventListener('webglcontextlost', (event) => {
+            this.rendererLost = true;
+        }, false);
+        // 监听上下文的恢复事件
+        renderer.domElement.addEventListener('webglcontextrestored', (event) => {
+            this.rendererLost = false;
+        }, false);
         renderer.localClippingEnabled = true;
-        renderer.outputColorSpace = LinearSRGBColorSpace;
         renderer.setPixelRatio(window.devicePixelRatio);
         renderer.autoClear = false;
         renderer.clear();
@@ -121,8 +130,10 @@ export default class ThreeBase extends EventDispatcher {
             div.style.overflow = "hidden";
             div.innerHTML = "";
             div.append(this.renderer.domElement);
-            this.renderer.forceContextRestore();
-            this.renderer.domElement.style.opacity = "1";
+            if (this.rendererLost) {
+                this.renderer.forceContextRestore();
+                this.renderer.domElement.style.opacity = "1";
+            }
             this.setSize(div.clientWidth, div.clientHeight);
             // 开启时时渲染
             threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
@@ -322,9 +333,11 @@ export default class ThreeBase extends EventDispatcher {
     // 停止渲染
     stopRender() {
         threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
-        this.renderer.forceContextLoss();
-        this.setSize(100, 100);
-        this.renderer.domElement.style.opacity = "0";
+        if (!this.rendererLost) {
+            this.renderer.forceContextLoss();
+            this.setSize(100, 100);
+            this.renderer.domElement.style.opacity = "0";
+        }
     }
     // 判断是否有 发光和描边的对象 以便判断是否需要 渲染深度纹理
     hasStrokeOrPass() {

package/ThreeBase.ts

@@ -6,7 +6,7 @@
  */
 
 import { add, round } from "lodash";
-import { AxesHelper, BufferGeometry, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, LinearSRGBColorSpace, MOUSE, Mesh, MeshBasicMaterial, NoBlending, NormalBlending, Object3D, OrthographicCamera, PerspectiveCamera, RGBAFormat, Scene, TOUCH, Texture, UnsignedShortType, Vector2, Vector3, WebGLRenderTarget, WebGLRenderer } from "three";
+import { AxesHelper, BufferGeometry, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, LinearSRGBColorSpace, MOUSE, Mesh, MeshBasicMaterial, NoBlending, NormalBlending, Object3D, OrthographicCamera, PerspectiveCamera, RGBAFormat, SRGBColorSpace, Scene, TOUCH, Texture, 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";
@@ -63,6 +63,9 @@ export default class ThreeBase extends EventDispatcher {
     //渲染器的尺寸
     size = new Vector2(0, 0);
 
+    //上下文丢失
+    rendererLost = false;
+
     // 渲染器对象
     renderer = (() => {
         const renderer = new WebGLRenderer({
@@ -75,8 +78,15 @@ export default class ThreeBase extends EventDispatcher {
         });
 
         renderer.domElement.id = generateUUID();
+        //监听上下文的销毁事件
+        renderer.domElement.addEventListener('webglcontextlost', (event) => {
+            this.rendererLost = true;
+        }, false);
+        // 监听上下文的恢复事件
+        renderer.domElement.addEventListener('webglcontextrestored', (event) => {
+            this.rendererLost = false;
+        }, false);
         renderer.localClippingEnabled = true;
-        renderer.outputColorSpace = LinearSRGBColorSpace;
         renderer.setPixelRatio(window.devicePixelRatio);
         renderer.autoClear = false;
         renderer.clear();
@@ -139,8 +149,10 @@ export default class ThreeBase extends EventDispatcher {
             div.innerHTML = "";
             div.append(this.renderer.domElement);
 
-            this.renderer.forceContextRestore();
-            this.renderer.domElement.style.opacity = "1";
+            if (this.rendererLost) {
+                this.renderer.forceContextRestore();
+                this.renderer.domElement.style.opacity = "1";
+            }
 
             this.setSize(div.clientWidth, div.clientHeight);
 
@@ -390,9 +402,11 @@ export default class ThreeBase extends EventDispatcher {
     // 停止渲染
     stopRender() {
         threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
-        this.renderer.forceContextLoss();
-        this.setSize(100, 100);
-        this.renderer.domElement.style.opacity = "0";
+        if (!this.rendererLost) {
+            this.renderer.forceContextLoss();
+            this.setSize(100, 100);
+            this.renderer.domElement.style.opacity = "0";
+        }
     }
 
     // 判断是否有 发光和描边的对象 以便判断是否需要 渲染深度纹理

package/package.json

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