Merge pull request #52 from binhtran432k/fix/bg-anim

fix(background): make animation smoother
binhtran432k · Aug 28, 2024 · 53f0ac6 · 53f0ac6
2 parents 6ed20d5 + ab45b07
commit 53f0ac6
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/components/landing/landing.tsx b/src/components/landing/landing.tsx
@@ -1,6 +1,6 @@
 import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
 import backgroundImage from "~/assets/background.jpg";
-import coolBackground from "~/utils/cool-background";
+import { coolBackground } from "~/utils/cool-background";
 import Header from "../header/header";
 import Intro from "../intro/intro";
 import ScrollDown from "../scroll-down/scroll-down";

diff --git a/src/utils/cool-background.ts b/src/utils/cool-background.ts
@@ -1,12 +1,12 @@
 import * as THREE from "three";
 
-export default function (container: Element, image: string) {
+export function coolBackground(container: Element, image: string) {
   const scene = new THREE.Scene();
   const loader = new THREE.TextureLoader();
   const camera = new THREE.PerspectiveCamera(70, getCameraAspect(), 0.1, 1000);
 
   const renderer = new THREE.WebGLRenderer({
-    antialias: true,
+    antialias: false,
   });
 
   handleSetRendererSize(renderer);
@@ -48,7 +48,8 @@ function animate(opts: {
   opts.renderer.render(opts.scene, opts.camera);
 }
 
-const MAX_FRAME = 30;
+const MAX_FRAME = 60;
+const TIME_FACTOR = MAX_FRAME / 4;
 const waveEffects: number[][] = [];
 function calculateWaveEffects(geometry: THREE.PlaneGeometry, count: number) {
   for (let frame = 0; frame < MAX_FRAME; frame++) {
@@ -71,7 +72,7 @@ function animateWaveEffect(
   time: number,
   count: number,
 ) {
-  const frame = Math.round(time * 8) % MAX_FRAME;
+  const frame = Math.round(time * TIME_FACTOR) % MAX_FRAME;
   if (oldFrame === frame) {
     return;
   }