refactor: replace GSAP with Timer for animation updates
This commit is contained in:
+13
-8
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user