diff --git a/package.json b/package.json
index 5cdabd4..779dd82 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,6 @@
"vite-plugin-restart": "^0.4.2"
},
"dependencies": {
- "gsap": "~3.12.7",
"three": "^0.174.0"
}
}
diff --git a/src/index.html b/src/index.html
index 04e323b..bd38d4d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,7 +3,7 @@
- Animations
+ Fullscreen and resizing
diff --git a/src/script.js b/src/script.js
index 130328d..3e943c4 100644
--- a/src/script.js
+++ b/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()
\ No newline at end of file
diff --git a/static/door.jpg b/static/door.jpg
deleted file mode 100644
index 614d9cd..0000000
Binary files a/static/door.jpg and /dev/null differ