feat: implement interactive material color change in vanilla three.js

Week-1/Task-1/vanilla/main.js

@@ -0,0 +1,35 @@
+import * as THREE from "three";
+
+const scene = new THREE.Scene();
+scene.background = new THREE.Color('white');
+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();
+const material = new THREE.MeshBasicMaterial({ color: 'red' });
+const cube = new THREE.Mesh(geometry, material);
+scene.add(cube);
+
+function animate() {
+    requestAnimationFrame(animate);
+    cube.rotation.x += 0.01;
+    cube.rotation.y += 0.01;
+    renderer.render(scene, camera);
+}
+animate();
+
+let isGreen = true;
+
+window.addEventListener('click',()=>{
+    if (isGreen){
+        cube.material.color.set('pink');
+    }
+    else{
+        cube.material.color.set('yellow');
+    }
+    isGreen = !isGreen;
+})