Make it edit the game inside the website itself - Follow Up Deployment

index.html

@@ -57,11 +57,41 @@
         <p>Click and drag to rotate view</p>
         <p>Scroll to zoom in/out</p>
     </div>
+    
+    <div id="editor" class="fixed top-4 right-4 bg-gray-800 bg-opacity-90 p-4 rounded-lg text-white w-64">
+        <h2 class="text-xl font-bold mb-4">Scene Editor</h2>
+        
+        <div class="mb-4">
+            <label class="block mb-2">Background Color</label>
+            <input type="color" id="bgColor" value="#87CEEB" class="w-full">
+        </div>
+        
+        <div class="mb-4">
+            <label class="block mb-2">Model Rotation Speed</label>
+            <input type="range" id="rotationSpeed" min="0" max="0.1" step="0.001" value="0.005" class="w-full">
+        </div>
+        
+        <div class="mb-4">
+            <label class="block mb-2">Sun Intensity</label>
+            <input type="range" id="sunIntensity" min="0" max="3" step="0.1" value="1.5" class="w-full">
+        </div>
+        
+        <div class="mb-4">
+            <label class="block mb-2">Ambient Light</label>
+            <input type="range" id="ambientIntensity" min="0" max="2" step="0.1" value="0.8" class="w-full">
+        </div>
+        
+        <button id="randomize" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded w-full">Randomize</button>
+    </div>
 
     <script>
         // Wait for everything to load
         window.addEventListener('load', init);
 
+        // Global variables for editor
+        let model, scene, sunLight, ambientLight;
+        let rotationSpeed = 0.005;
+        
         function init() {
             // Hide loading screen
             document.getElementById('loading').style.display = 'none';
@@ -130,7 +160,7 @@
                         requestAnimationFrame(animate);
                         
                         // Rotate model slightly
-                        model.rotation.y += 0.005;
+                        model.rotation.y += rotationSpeed;
                         
                         // Update controls
                         controls.update();
@@ -202,6 +232,39 @@
                 renderer.setSize(window.innerWidth, window.innerHeight);
             });
             
+            // Editor controls
+            document.getElementById('bgColor').addEventListener('input', (e) => {
+                scene.background = new THREE.Color(e.target.value);
+            });
+            
+            document.getElementById('rotationSpeed').addEventListener('input', (e) => {
+                rotationSpeed = parseFloat(e.target.value);
+            });
+            
+            document.getElementById('sunIntensity').addEventListener('input', (e) => {
+                sunLight.intensity = parseFloat(e.target.value);
+            });
+            
+            document.getElementById('ambientIntensity').addEventListener('input', (e) => {
+                ambientLight.intensity = parseFloat(e.target.value);
+            });
+            
+            document.getElementById('randomize').addEventListener('click', () => {
+                // Random colors
+                scene.background = new THREE.Color(Math.random() * 0xffffff);
+                sunLight.color.setHSL(Math.random(), 0.7, 0.5);
+                ambientLight.color.setHSL(Math.random(), 0.2, 0.8);
+                
+                // Random rotation speed
+                rotationSpeed = Math.random() * 0.1;
+                document.getElementById('rotationSpeed').value = rotationSpeed;
+                
+                // Random intensities
+                sunLight.intensity = Math.random() * 3;
+                ambientLight.intensity = Math.random() * 2;
+                document.getElementById('sunIntensity').value = sunLight.intensity;
+                document.getElementById('ambientIntensity').value = ambientLight.intensity;
+            });
         }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=iCoderX/webgame-engine" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>