diff --git a/Week-1/Task-4/vanilla/index.html b/Week-1/Task-4/vanilla/index.html
new file mode 100644
index 0000000..5298aca
--- /dev/null
+++ b/Week-1/Task-4/vanilla/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Task 4 — Click Toggle (Vanilla Three.js)
+
+
+
+
+
+
diff --git a/Week-1/Task-4/vanilla/main.js b/Week-1/Task-4/vanilla/main.js
new file mode 100644
index 0000000..2377f5e
--- /dev/null
+++ b/Week-1/Task-4/vanilla/main.js
@@ -0,0 +1,50 @@
+import * as THREE from 'three'
+
+const scene = new THREE.Scene()
+scene.background = new THREE.Color('#111111')
+
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
+camera.position.z = 5
+
+const renderer = new THREE.WebGLRenderer()
+renderer.setSize(window.innerWidth, window.innerHeight)
+document.body.appendChild(renderer.domElement)
+
+
+const geometry = new THREE.BoxGeometry(2, 2, 2)
+const material = new THREE.MeshBasicMaterial({ color: 'lime' })
+const cube = new THREE.Mesh(geometry, material)
+scene.add(cube)
+
+
+let isBlue = false
+
+const raycaster = new THREE.Raycaster()
+const mouse = new THREE.Vector2()
+
+window.addEventListener('mousedown', (e) => {
+ mouse.x = (e.clientX / window.innerWidth) * 2 - 1
+ mouse.y = -(e.clientY / window.innerHeight) * 2 + 1
+
+ raycaster.setFromCamera(mouse, camera)
+ const hits = raycaster.intersectObject(cube)
+
+ if (hits.length > 0) {
+ isBlue = !isBlue
+ cube.material.color.set(isBlue ? 'blue' : 'lime')
+ }
+})
+
+window.addEventListener('resize', () => {
+ camera.aspect = window.innerWidth / window.innerHeight
+ camera.updateProjectionMatrix()
+ renderer.setSize(window.innerWidth, window.innerHeight)
+})
+
+function animate() {
+ requestAnimationFrame(animate)
+ cube.rotation.y += 0.01
+ renderer.render(scene, camera)
+}
+
+animate()
diff --git a/Week-1/Task-4/vanilla/package.json b/Week-1/Task-4/vanilla/package.json
new file mode 100644
index 0000000..260d11f
--- /dev/null
+++ b/Week-1/Task-4/vanilla/package.json
@@ -0,0 +1,16 @@
+{
+ "name": "task-4-vanilla",
+ "version": "0.0.0",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build"
+ },
+ "devDependencies": {
+ "vite": "^5.0.0"
+ },
+ "dependencies": {
+ "three": "^0.163.0"
+ }
+}
diff --git a/Week-1/Task-4/vanilla/style.css b/Week-1/Task-4/vanilla/style.css
new file mode 100644
index 0000000..1ce9053
--- /dev/null
+++ b/Week-1/Task-4/vanilla/style.css
@@ -0,0 +1,16 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body, html {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ background: #111;
+}
+
+canvas {
+ display: block;
+}