diff --git a/Week-1/Task-3/vanilla/group.js b/Week-1/Task-3/vanilla/group.js
new file mode 100644
index 0000000..530d93c
--- /dev/null
+++ b/Week-1/Task-3/vanilla/group.js
@@ -0,0 +1,68 @@
+import * as THREE from "three"
+
+const renderer = new THREE.WebGLRenderer({ antialias: true })
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
+document.body.appendChild(renderer.domElement)
+
+const scene = new THREE.Scene()
+scene.background = new THREE.Color(0x101418)
+
+const camera = new THREE.PerspectiveCamera(60, 2, 0.1, 100)
+camera.position.set(0, 1.2, 8)
+
+scene.add(new THREE.AmbientLight(0xffffff, 0.65))
+
+const light = new THREE.DirectionalLight(0xffffff, 1.1)
+light.position.set(4, 6, 5)
+scene.add(light)
+
+const pillarGeometry = new THREE.BoxGeometry(0.7, 1.6, 0.7)
+const pillarMaterial = new THREE.MeshStandardMaterial({ color: 0xf6bd60 })
+const capGeometry = new THREE.SphereGeometry(0.4, 24, 24)
+const capMaterial = new THREE.MeshStandardMaterial({ color: 0x84a59d })
+
+const groupedStructure = new THREE.Group()
+
+const pillar = new THREE.Mesh(pillarGeometry, pillarMaterial)
+pillar.position.y = -0.2
+groupedStructure.add(pillar)
+
+const cap = new THREE.Mesh(capGeometry, capMaterial)
+cap.position.y = 0.95
+groupedStructure.add(cap)
+
+groupedStructure.position.set(-1.4, 0, 0)
+scene.add(groupedStructure)
+
+const groupedStructureClone = groupedStructure.clone()
+groupedStructureClone.position.set(1.4, 0, 0)
+scene.add(groupedStructureClone)
+
+function resizeRendererToDisplaySize() {
+ const width = window.innerWidth
+ const height = window.innerHeight
+ const needResize = renderer.domElement.width !== width || renderer.domElement.height !== height
+
+ if (needResize) {
+ renderer.setSize(width, height, false)
+ camera.aspect = width / height
+ camera.updateProjectionMatrix()
+ }
+}
+
+function animate(time) {
+ const seconds = time * 0.001
+
+ resizeRendererToDisplaySize()
+
+ groupedStructure.rotation.y = seconds * 0.7
+ groupedStructure.rotation.x = Math.sin(seconds * 1.1) * 0.2
+
+ groupedStructureClone.rotation.y = -seconds * 0.7
+ groupedStructureClone.rotation.x = Math.sin(seconds * 1.1) * 0.2
+
+ renderer.render(scene, camera)
+ requestAnimationFrame(animate)
+}
+
+requestAnimationFrame(animate)
diff --git a/Week-1/Task-3/vanilla/index.html b/Week-1/Task-3/vanilla/index.html
new file mode 100644
index 0000000..9e23b4f
--- /dev/null
+++ b/Week-1/Task-3/vanilla/index.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+ Task 3 Vanilla - Duplication Tests
+
+
+
+
+
+
+
+
diff --git a/Week-1/Task-3/vanilla/main.js b/Week-1/Task-3/vanilla/main.js
new file mode 100644
index 0000000..f97407a
--- /dev/null
+++ b/Week-1/Task-3/vanilla/main.js
@@ -0,0 +1,56 @@
+import * as THREE from "three"
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+document.body.appendChild(renderer.domElement);
+
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0x101418);
+
+const camera = new THREE.PerspectiveCamera(60, 2, 0.1, 100);
+camera.position.set(0, 0, 6);
+
+scene.add(new THREE.AmbientLight(0xffffff, 0.6));
+
+const light = new THREE.DirectionalLight(0xffffff, 1.1);
+light.position.set(4, 6, 5);
+scene.add(light);
+
+const geometry = new THREE.BoxGeometry(1, 1, 1);
+const material = new THREE.MeshStandardMaterial({ color: 0x5bc0eb });
+
+const cube = new THREE.Mesh(geometry, material);
+cube.position.x = -1.2;
+scene.add(cube);
+
+const cubeClone = cube.clone();
+cubeClone.position.x = 1.2;
+scene.add(cubeClone);
+
+function resizeRendererToDisplaySize() {
+ const width = window.innerWidth;
+ const height = window.innerHeight;
+ const needResize = renderer.domElement.width !== width || renderer.domElement.height !== height;
+
+ if (needResize) {
+ renderer.setSize(width, height, false);
+ camera.aspect = width / height;
+ camera.updateProjectionMatrix();
+ }
+}
+
+function animate(time) {
+ const seconds = time * 0.001;
+
+ resizeRendererToDisplaySize();
+
+ cube.rotation.x = seconds;
+ cube.rotation.y = seconds;
+
+ cubeClone.rotation.x = seconds;
+ cubeClone.rotation.y = -seconds;
+
+ renderer.render(scene, camera);
+ requestAnimationFrame(animate);
+}
+
+requestAnimationFrame(animate);
diff --git a/Week-1/Task-3/vanilla/package.json b/Week-1/Task-3/vanilla/package.json
index 324f5fa..1c1fe33 100644
--- a/Week-1/Task-3/vanilla/package.json
+++ b/Week-1/Task-3/vanilla/package.json
@@ -4,8 +4,10 @@
"version": "0.0.0",
"packageManager": "yarn@1.22.22",
"scripts": {
- "dev": "echo 'Add your Three.js dev script here'",
- "build": "echo 'Add your Three.js build script here'",
+ "dev": "vite",
+ "dev:object": "vite --open '/'",
+ "dev:group": "vite --open '/?test=group'",
+ "build": "vite build",
"lint": "echo 'Add your lint script here'",
"clean": "rm -rf dist build"
}