diff --git a/Week-2/Task-1/vanilla/index.html b/Week-2/Task-1/vanilla/index.html index 22b83e0..c171fd3 100644 --- a/Week-2/Task-1/vanilla/index.html +++ b/Week-2/Task-1/vanilla/index.html @@ -7,12 +7,80 @@ +
+

Camera Presets

+
+ + + +
+
diff --git a/Week-2/Task-1/vanilla/main.js b/Week-2/Task-1/vanilla/main.js index e69de29..2e81404 100644 --- a/Week-2/Task-1/vanilla/main.js +++ b/Week-2/Task-1/vanilla/main.js @@ -0,0 +1,99 @@ +import * as THREE from "three"; + +const scene = new THREE.Scene(); +scene.background = new THREE.Color(0xf3f5f8); + +const camera = new THREE.PerspectiveCamera( + 55, + window.innerWidth / window.innerHeight, + 0.1, + 100 +); + +const renderer = new THREE.WebGLRenderer({ antialias: true }); +renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); +renderer.setSize(window.innerWidth, window.innerHeight); +document.body.appendChild(renderer.domElement); + +const ambientLight = new THREE.AmbientLight(0xffffff, 0.85); +scene.add(ambientLight); + +const keyLight = new THREE.DirectionalLight(0xffffff, 1); +keyLight.position.set(3, 4, 5); +scene.add(keyLight); + +const cube = new THREE.Mesh( + new THREE.BoxGeometry(1.6, 1.6, 1.6), + new THREE.MeshStandardMaterial({ color: 0x2a9d8f, roughness: 0.45, metalness: 0.1 }) +); +scene.add(cube); + +const target = new THREE.Vector3(0, 0, 0); + +const cameraPresets = { + front: new THREE.Vector3(0, 1.2, 6.5), + side: new THREE.Vector3(6.5, 1.4, 0), + topAngled: new THREE.Vector3(3.8, 5.4, 4.2), +}; + +let activePreset = "front"; +let desiredPosition = cameraPresets.front.clone(); +camera.position.copy(desiredPosition); +camera.lookAt(target); + +const presetButtons = Array.from(document.querySelectorAll(".preset-btn")); + +function setActiveButton(presetName) { + presetButtons.forEach((button) => { + const isActive = button.dataset.preset === presetName; + button.classList.toggle("active", isActive); + }); +} + +function switchCameraPreset(presetName) { + const nextPreset = cameraPresets[presetName]; + if (!nextPreset) { + return; + } + + activePreset = presetName; + desiredPosition = nextPreset.clone(); + setActiveButton(activePreset); +} + +presetButtons.forEach((button) => { + button.addEventListener("click", () => { + const presetName = button.dataset.preset; + switchCameraPreset(presetName); + }); +}); + +window.addEventListener("keydown", (event) => { + if (event.key === "1") { + switchCameraPreset("front"); + } + if (event.key === "2") { + switchCameraPreset("side"); + } + if (event.key === "3") { + switchCameraPreset("topAngled"); + } +}); + +setActiveButton(activePreset); + +function animate() { + + camera.position.lerp(desiredPosition, 0.08); + camera.lookAt(target); + + renderer.render(scene, camera); +} + +renderer.setAnimationLoop(animate); + +window.addEventListener("resize", () => { + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + renderer.setSize(window.innerWidth, window.innerHeight); +});