@canvas3/nuxt 0.1.31 → 0.1.32

package/dist/module.json

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

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

@@ -16,6 +16,8 @@ declare class Canvas3Class {
     canvasContainer: HTMLElement | null;
     scrollableContent: HTMLElement | null;
     time: number;
+    rafId: number | null;
+    lastTime: number;
     scene: THREE.Scene;
     materials: ShaderMaterial[];
     imageStore: MeshType[];
@@ -65,7 +67,9 @@ declare class Canvas3Class {
     setAnimationsToRender(state: boolean): void;
     setAnimationToRender(callBackName: string, state: boolean, animationId: string): void;
     externalAnimationsRender(): void;
-    render(): void;
+    startRenderLoop(): void;
+    stopRenderLoop(): void;
+    render(delta: number): void;
 }
 export declare const Canvas3: Canvas3Class;
 export {};

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

@@ -24,6 +24,8 @@ class Canvas3Class {
   canvasContainer = null;
   scrollableContent = null;
   time = 0;
+  rafId = null;
+  lastTime = 0;
   scene = new THREE.Scene();
   // MSDFTextGeometryAtlas: any
   // MSDFTextGeometryFont: any
@@ -63,7 +65,7 @@ class Canvas3Class {
     this.setCanvasAndCamera();
     this.setSize();
     this.composerPass();
-    this.render();
+    this.startRenderLoop();
     window.addEventListener("mousemove", (event) => {
       this.mouseMoveInProgress = true;
       this.mouse.x = event.clientX / this.width;
@@ -83,9 +85,10 @@ class Canvas3Class {
     document.addEventListener("visibilitychange", () => {
       if (document.hidden) {
         this.documentVisibility = false;
+        this.stopRenderLoop();
       } else {
         this.documentVisibility = true;
-        this.render();
+        this.startRenderLoop();
       }
     });
     this.canvasInitiated.value = true;
@@ -94,9 +97,11 @@ class Canvas3Class {
   setRenderDisabled(status) {
     if (!status && this.renderDisabled) {
       this.renderDisabled = false;
-      this.render();
+      this.startRenderLoop();
+    } else if (status && !this.renderDisabled) {
+      this.renderDisabled = true;
+      this.stopRenderLoop();
     }
-    this.renderDisabled = status;
   }
   setCanvasAndCamera() {
     this.width = this.canvasContainer?.offsetWidth ?? 0;
@@ -436,8 +441,28 @@ class Canvas3Class {
       }
     }
   }
-  render() {
-    this.time += 0.05;
+  startRenderLoop() {
+    if (this.rafId !== null) return;
+    const loop = (timestamp) => {
+      this.rafId = null;
+      if (!this.documentVisibility || this.renderDisabled) return;
+      if (!this.lastTime) this.lastTime = timestamp;
+      const delta = (timestamp - this.lastTime) / 1e3;
+      this.lastTime = timestamp;
+      this.render(delta);
+      this.rafId = requestAnimationFrame(loop);
+    };
+    this.rafId = requestAnimationFrame(loop);
+  }
+  stopRenderLoop() {
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    this.lastTime = 0;
+  }
+  render(delta) {
+    this.time += delta;
     this.scroll?.render(null, null);
     if (this.scroll?.scrollInProgress) {
       if (this.customPass && this.customPass.uniforms.scrollSpeed)
@@ -472,14 +497,6 @@ class Canvas3Class {
     } else if (this.renderer && this.camera) {
       this.renderer.render(this.scene, this.camera);
     }
-    try {
-      if (!this.documentVisibility) return;
-      if (this.renderDisabled) return;
-      requestAnimationFrame(this.render.bind(this));
-    } catch (e) {
-      console.error(e);
-      setImmediate(this.render.bind(this));
-    }
   }
 }
 export const Canvas3 = new Canvas3Class();

package/package.json

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