refactor: replace GSAP with Timer for animation updates

This commit is contained in:
sayudhalw
2026-08-23 20:47:03 +07:00
parent ced9c2b65a
commit c7f275d784
+13 -8
View File
@@ -1,6 +1,7 @@
import './style.css'
import * as THREE from 'three'
import gsap from 'gsap'
import { Timer } from 'three/addons/misc/Timer.js'
// import gsap from 'gsap'
// Canvas
const canvas = document.querySelector('canvas.webgl')
@@ -33,8 +34,10 @@ renderer.setSize(sizes.width, sizes.height)
// Clock
// const clock = new THREE.Clock()
gsap.to(mesh.position, { x: 2, duration: 1, delay: 1})
gsap.to(mesh.position, { x: 0, duration: 1, delay: 2})
// gsap.to(mesh.position, { x: 2, duration: 1, delay: 1})
// gsap.to(mesh.position, { x: 0, duration: 1, delay: 2})
const timer = new Timer()
timer.connect(document) // Connect the timer to the document to receive updates
// Animations
@@ -42,12 +45,14 @@ const tick = () => {
// // Clock
// const elapsedTime = clock.getElapsedTime()
timer.update() // Update the timer to get the latest elapsed time
const elapsedTime = timer.getElapsed()
// // Update objects
// mesh.rotation.y = elapsedTime * Math.PI * 2
// mesh.position.y = Math.sin(elapsedTime)
// mesh.position.x = Math.cos(elapsedTime)
// camera.lookAt(mesh.position)
// Update objects
mesh.rotation.y = elapsedTime * Math.PI * 2
mesh.position.y = Math.sin(elapsedTime)
mesh.position.x = Math.cos(elapsedTime)
camera.lookAt(mesh.position)
// Renderer
renderer.render(scene, camera)