refactor: remove GSAP dependency and update camera controls with OrbitControls

src/script.js

@@ -1,84 +1,68 @@
-import './style.css'
 import * as THREE from 'three'
-import { Timer } from 'three/addons/misc/Timer.js'
-// import gsap from 'gsap'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 
 /**
- * Cursor
+ * Base
  */
-const cursor = {
-    x: 0,
-    y: 0
-}
-window.addEventListener('mousemove', (event) => {
-    cursor.x = event.clientX / sizes.width - 0.5 // -0.5 to center the cursor coordinates
-    cursor.y = -(event.clientY / sizes.height - 0.5) // Invert the y-coordinate to match the 3D coordinate system
-    console.log(cursor.x, cursor.y)
-})
-
 // Canvas
 const canvas = document.querySelector('canvas.webgl')
 
 // Scene
 const scene = new THREE.Scene()
 
-// Object
+/**
+ * Object
+ */
 const geometry = new THREE.BoxGeometry(1, 1, 1)
 const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
 const mesh = new THREE.Mesh(geometry, material)
 scene.add(mesh)
 
-// Sizes
+/**
+ * Sizes
+ */
 const sizes = {
     width: 800,
     height: 600
 }
 
-// Camera
+/**
+ * Camera
+ */
+// Base camera
 const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
-// camera.position.x = 2
-// camera.position.y = 2
 camera.position.z = 3
-camera.lookAt(mesh.position)
 scene.add(camera)
 
-// Renderer
+// Controls
+const controls = new OrbitControls(camera, canvas)
+controls.enableDamping = true
+
+/**
+ * Renderer
+ */
 const renderer = new THREE.WebGLRenderer({
     canvas: canvas
 })
 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})
-const timer = new Timer()
-timer.connect(document) // Connect the timer to the document to receive updates
+/**
+ * Animate
+ */
+const clock = new THREE.Clock()
 
+const tick = () =>
+{
+    const elapsedTime = clock.getElapsedTime()
 
-// Animations
-const tick = () => {
+    // Update controls
+    controls.update()
 
-    // // 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 camera position based on cursor
-    camera.position.x = Math.sin(cursor.x * Math.PI * 2) * 3  // Move the camera in a circular path around the mesh based on cursor x position
-    camera.position.z = Math.cos(cursor.x * Math.PI * 2) * 3  // Move the camera in a circular path around the mesh based on cursor x position
-    camera.position.y = cursor.y * 5 // Move the camera up/down based on cursor y position
-    camera.lookAt(mesh.position) // Make the camera look at the mesh
-    
-    // Renderer
+    // Render
     renderer.render(scene, camera)
-    
+
+    // Call tick again on the next frame
     window.requestAnimationFrame(tick)
 }
+
 tick()