diff --git a/src/script.js b/src/script.js index 7d7c536..130328d 100644 --- a/src/script.js +++ b/src/script.js @@ -3,6 +3,19 @@ import * as THREE from 'three' import { Timer } from 'three/addons/misc/Timer.js' // import gsap from 'gsap' +/** + * Cursor + */ +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') @@ -23,7 +36,10 @@ const sizes = { // 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 @@ -49,10 +65,16 @@ const tick = () => { 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) + // 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 renderer.render(scene, camera)