@canvas3/nuxt 0.1.21 → 0.1.23

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "canvas-nuxt-layout",
   "configKey": "canvas3Layout",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.0"

package/dist/runtime/utils/canvas3/canvas3.d.ts

@@ -9,6 +9,7 @@ declare class Canvas3Class {
     canvasInitiated: import("vue").Ref<boolean, boolean>;
     mouseMoveInProgress: boolean;
     animationsRender: boolean;
+    documentVisibility: boolean;
     resizeInProgress: boolean;
     meshPositionsUpdate: boolean;
     canvasContainer: HTMLElement | null;

package/dist/runtime/utils/canvas3/canvas3.js

@@ -16,6 +16,7 @@ class Canvas3Class {
   canvasInitiated = canvasInitiated;
   mouseMoveInProgress = false;
   animationsRender = false;
+  documentVisibility = true;
   resizeInProgress = false;
   meshPositionsUpdate = false;
   canvasContainer = null;
@@ -77,6 +78,14 @@ class Canvas3Class {
         this.mouseMoveInProgress = false;
       }, 0);
     });
+    document.addEventListener("visibilitychange", () => {
+      if (document.hidden) {
+        this.documentVisibility = false;
+      } else {
+        this.documentVisibility = true;
+        this.render();
+      }
+    });
     this.canvasInitiated.value = true;
     studio783log();
   }
@@ -403,21 +412,24 @@ class Canvas3Class {
     if (this.meshPositionsUpdate) {
       this.resizeImageStore();
     }
-    this.externalAnimationsRender();
+    if (this.animations.size > 0)
+      this.externalAnimationsRender();
     if (this.materials.length > 0) {
       for (const material of this.materials) {
         if (material.uniforms.uTime)
           material.uniforms.uTime.value = this.time;
-        if (material.uniforms.uMouse)
-          material.uniforms.uMouse.value.set(
-            this.mouse.x,
-            this.mouse.y
-          );
-        if (material.uniforms.uMouseMovement)
-          material.uniforms.uMouseMovement.value.set(
-            this.mouse.movementX,
-            this.mouse.movementY
-          );
+        if (this.mouseMoveInProgress) {
+          if (material.uniforms.uMouse)
+            material.uniforms.uMouse.value.set(
+              this.mouse.x,
+              this.mouse.y
+            );
+          if (material.uniforms.uMouseMovement)
+            material.uniforms.uMouseMovement.value.set(
+              this.mouse.movementX,
+              this.mouse.movementY
+            );
+        }
       }
     }
     if (this.composer) {
@@ -426,6 +438,7 @@ class Canvas3Class {
       this.renderer.render(this.scene, this.camera);
     }
     try {
+      if (!this.documentVisibility) return;
       requestAnimationFrame(this.render.bind(this));
     } catch (e) {
       console.error(e);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canvas3/nuxt",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "publishConfig": {
     "access": "public"
   },