diff --git a/src/script.js b/src/script.js index 4261ff2..f1e33c4 100644 --- a/src/script.js +++ b/src/script.js @@ -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)