refactor: remove GSAP dependency and update camera controls with OrbitControls
This commit is contained in:
sayudhalw
@@ -12,7 +12,6 @@
|
|||||||
"vite-plugin-restart": "^0.4.2"
|
"vite-plugin-restart": "^0.4.2"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"gsap": "~3.12.7",
|
|
||||||
"three": "^0.174.0"
|
"three": "^0.174.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+1
-1
@@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Animations</title>
|
<title>Fullscreen and resizing</title>
|
||||||
<link rel="stylesheet" href="./style.css">
|
<link rel="stylesheet" href="./style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
+32
-48
@@ -1,84 +1,68 @@
|
|||||||
import './style.css'
|
|
||||||
import * as THREE from 'three'
|
import * as THREE from 'three'
|
||||||
import { Timer } from 'three/addons/misc/Timer.js'
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
|
||||||
// import gsap from 'gsap'
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 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
|
// Canvas
|
||||||
const canvas = document.querySelector('canvas.webgl')
|
const canvas = document.querySelector('canvas.webgl')
|
||||||
|
|
||||||
// Scene
|
// Scene
|
||||||
const scene = new THREE.Scene()
|
const scene = new THREE.Scene()
|
||||||
|
|
||||||
// Object
|
/**
|
||||||
|
* Object
|
||||||
|
*/
|
||||||
const geometry = new THREE.BoxGeometry(1, 1, 1)
|
const geometry = new THREE.BoxGeometry(1, 1, 1)
|
||||||
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
|
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
|
||||||
const mesh = new THREE.Mesh(geometry, material)
|
const mesh = new THREE.Mesh(geometry, material)
|
||||||
scene.add(mesh)
|
scene.add(mesh)
|
||||||
|
|
||||||
// Sizes
|
/**
|
||||||
|
* Sizes
|
||||||
|
*/
|
||||||
const sizes = {
|
const sizes = {
|
||||||
width: 800,
|
width: 800,
|
||||||
height: 600
|
height: 600
|
||||||
}
|
}
|
||||||
|
|
||||||
// Camera
|
/**
|
||||||
|
* Camera
|
||||||
|
*/
|
||||||
|
// Base camera
|
||||||
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
|
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.position.z = 3
|
||||||
camera.lookAt(mesh.position)
|
|
||||||
scene.add(camera)
|
scene.add(camera)
|
||||||
|
|
||||||
// Renderer
|
// Controls
|
||||||
|
const controls = new OrbitControls(camera, canvas)
|
||||||
|
controls.enableDamping = true
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renderer
|
||||||
|
*/
|
||||||
const renderer = new THREE.WebGLRenderer({
|
const renderer = new THREE.WebGLRenderer({
|
||||||
canvas: canvas
|
canvas: canvas
|
||||||
})
|
})
|
||||||
renderer.setSize(sizes.width, sizes.height)
|
renderer.setSize(sizes.width, sizes.height)
|
||||||
|
|
||||||
// Clock
|
/**
|
||||||
// const clock = new THREE.Clock()
|
* Animate
|
||||||
// gsap.to(mesh.position, { x: 2, duration: 1, delay: 1})
|
*/
|
||||||
// gsap.to(mesh.position, { x: 0, duration: 1, delay: 2})
|
const clock = new THREE.Clock()
|
||||||
const timer = new Timer()
|
|
||||||
timer.connect(document) // Connect the timer to the document to receive updates
|
|
||||||
|
|
||||||
|
const tick = () =>
|
||||||
|
{
|
||||||
|
const elapsedTime = clock.getElapsedTime()
|
||||||
|
|
||||||
// Animations
|
// Update controls
|
||||||
const tick = () => {
|
controls.update()
|
||||||
|
|
||||||
// // Clock
|
// Render
|
||||||
// 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
|
|
||||||
renderer.render(scene, camera)
|
renderer.render(scene, camera)
|
||||||
|
|
||||||
|
// Call tick again on the next frame
|
||||||
window.requestAnimationFrame(tick)
|
window.requestAnimationFrame(tick)
|
||||||
}
|
}
|
||||||
|
|
||||||
tick()
|
tick()
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 763 KiB |
Reference in New Issue
Block a user