Update index.html

index.html

@@ -22,21 +22,43 @@
     renderer.setSize(window.innerWidth, window.innerHeight);
     document.body.appendChild(renderer.domElement);
 
-    // Create a cube geometry and material
-    const geometry = new THREE.BoxGeometry();
-    const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
+    // Add lighting to the scene
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+    scene.add(ambientLight);
+    const pointLight = new THREE.PointLight(0xffffff, 1);
+    pointLight.position.set(5, 5, 5);
+    scene.add(pointLight);
 
-    // Create a cube mesh and add it to the scene
-    const cube = new THREE.Mesh(geometry, material);
-    scene.add(cube);
+    // Create a complex shaded shape geometry and material
+    const geometry = new THREE.TorusKnotGeometry(1, 0.4, 256, 32, 2, 3, 1);
+    const material = new THREE.MeshPhongMaterial({
+      color: 0xffaaff,
+      specular: 0x999999,
+      shininess: 50,
+      flatShading: false,
+    });
+
+    // Create a shape mesh and add it to the scene
+    const shape = new THREE.Mesh(geometry, material);
+    scene.add(shape);
 
     // Set up animation loop
     const animate = function () {
       requestAnimationFrame(animate);
 
-      // Rotate the cube
-      cube.rotation.x += 0.01;
-      cube.rotation.y += 0.01;
+      // Rotate the shape
+      shape.rotation.x += 0.01;
+      shape.rotation.y += 0.01;
+
+      // Move the camera in a circle around the shape
+      const time = Date.now() * 0.001;
+      const radius = 10;
+      camera.position.x = Math.sin(time) * radius;
+      camera.position.z = Math.cos(time) * radius;
+      camera.lookAt(new THREE.Vector3());
+
+      // Update the lighting position to follow the camera
+      pointLight.position.copy(camera.position);
 
       renderer.render(scene, camera);
     };
@@ -45,7 +67,7 @@
     animate();
 
     // Adjust camera position
-    camera.position.z = 5;
+    camera.position.z = 10;
   </script>
 </body>
 </html>