Update index.html

index.html

@@ -7,6 +7,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three/examples/js/loaders/GLTFLoader.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three/examples/js/controls/OrbitControls.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three/examples/js/loaders/RGBELoader.js"></script>
     <style>
         body { margin: 0; }
         canvas { display: block; }
@@ -23,6 +24,8 @@
 
             renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.toneMapping = THREE.ACESFilmicToneMapping;
+            renderer.toneMappingExposure = 1;
             document.body.appendChild(renderer.domElement);
 
             controls = new THREE.OrbitControls(camera, renderer.domElement);
@@ -32,12 +35,24 @@
             controls.minDistance = 1;
             controls.maxDistance = 10;
 
-            const light = new THREE.DirectionalLight(0xffffff, 1);
-            light.position.set(5, 10, 5).normalize();
+            // Load HDR Environment Map
+            const rgbeLoader = new THREE.RGBELoader();
+            rgbeLoader.load('https://threejs.org/examples/textures/equirectangular/royal_esplanade_1k.hdr', function (texture) {
+                texture.mapping = THREE.EquirectangularReflectionMapping;
+                scene.environment = texture;
+                scene.background = texture;
+            });
+
+            // Adjusted lighting
+            const light = new THREE.DirectionalLight(0xffffff, 2);
+            light.position.set(5, 10, 5);
             scene.add(light);
 
+            const ambientLight = new THREE.AmbientLight(0x404040, 3);
+            scene.add(ambientLight);
+
             const loader = new THREE.GLTFLoader();
-            loader.load('attack_drone_scifi.glb', function (gltf) {
+            loader.load('model.glb', function (gltf) {
                 let model = gltf.scene;
                 model.scale.set(2, 2, 2);
                 model.position.y = 0;