Spaces:

ThorAILabs
/

SceneEditor

Running

App Files Files Community

ThorAILabs commited on Apr 14, 2025

Commit

0f3c3d7

verified ·

1 Parent(s): 32ce8fe

try different model for code generation

Browse files

Files changed (1) hide show

index.html +723 -285

index.html CHANGED Viewed

@@ -3,319 +3,757 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>3D Scene Editor with Raytracing & Materials</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/STLLoader.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/OBJLoader.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/exporters/STLExporter.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/exporters/OBJExporter.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
 </head>
-<body class="bg-gray-900">
-    <div class="flex h-screen">
-        <!-- Sidebar -->
-        <div class="w-80 bg-gray-800 p-4 space-y-4 overflow-y-auto">
             <div class="space-y-2">
-                <input type="file" id="file-input" class="hidden" accept=".stl,.obj">
-                <button onclick="document.getElementById('file-input').click()"
-                        class="w-full bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg">
-                    <i class="fas fa-upload mr-2"></i>Load Model
-                </button>
-                <button onclick="exportSTL()"
-                        class="w-full bg-green-600 hover:bg-green-700 text-white p-2 rounded-lg">
-                    <i class="fas fa-file-export mr-2"></i>Export STL
-                </button>
-                <button onclick="exportOBJ()"
-                        class="w-full bg-green-600 hover:bg-green-700 text-white p-2 rounded-lg">
-                    <i class="fas fa-file-export mr-2"></i>Export OBJ
-                </button>
-                <button onclick="toggleRaytracing()"
-                        id="raytrace-btn"
-                        class="w-full bg-purple-600 hover:bg-purple-700 text-white p-2 rounded-lg">
-                    <i class="fas fa-raygun mr-2"></i>Raytracing: On
-                </button>
-            </div>
-            <div class="border-t border-gray-700 pt-4">
-                <h3 class="text-white mb-2">Lights</h3>
-                <button onclick="addLight('point')"
-                        class="w-full bg-yellow-600 hover:bg-yellow-700 text-white p-2 rounded-lg mb-2">
-                    <i class="fas fa-lightbulb mr-2"></i>Add Point Light
-                </button>
-                <button onclick="addLight('directional')"
-                        class="w-full bg-yellow-600 hover:bg-yellow-700 text-white p-2 rounded-lg">
-                    <i class="fas fa-sun mr-2"></i>Add Directional Light
-                </button>
             </div>
-            <div class="border-t border-gray-700 pt-4">
-                <h3 class="text-white mb-2">Materials</h3>
-                <div class="mb-4">
-                    <label class="text-gray-300 block mb-2">Material Type</label>
-                    <select id="material-type" class="w-full bg-gray-700 text-white rounded p-2"
-                            onchange="changeMaterialType(this.value)">
-                        <option value="MeshStandardMaterial">Standard</option>
-                        <option value="MeshPhongMaterial">Phong</option>
-                        <option value="MeshBasicMaterial">Basic</option>
-                        <option value="MeshMatcapMaterial">Matcap</option>
-                    </select>
-                </div>
-                <div class="space-y-2">
-                    <input type="file" id="albedo-map" class="hidden" accept="image/*">
-                    <button onclick="document.getElementById('albedo-map').click()"
-                            class="w-full bg-gray-700 hover:bg-gray-600 text-white p-2 rounded-lg">
-                        <i class="fas fa-image mr-2"></i>Albedo Map
                     </button>
-                    <input type="file" id="normal-map" class="hidden" accept="image/*">
-                    <button onclick="document.getElementById('normal-map').click()"
-                            class="w-full bg-gray-700 hover:bg-gray-600 text-white p-2 rounded-lg">
-                        <i class="fas fa-wave-square mr-2"></i>Normal Map
                     </button>
-                    <input type="file" id="roughness-map" class="hidden" accept="image/*">
-                    <button onclick="document.getElementById('roughness-map').click()"
-                            class="w-full bg-gray-700 hover:bg-gray-600 text-white p-2 rounded-lg">
-                        <i class="fas fa-sun mr-2"></i>Roughness Map
                     </button>
                 </div>
             </div>
-            <div class="border-t border-gray-700 pt-4">
-                <h3 class="text-white mb-2">Selected Object</h3>
-                <div id="selected-object-info" class="text-gray-400 text-sm">
-                    Click an object to select
                 </div>
             </div>
         </div>
-        <!-- Main Viewport -->
-        <div id="viewport" class="flex-1 relative">
-            <div id="loading-overlay" class="absolute top-0 left-0 w-full h-full bg-gray-900 bg-opacity-50 hidden items-center justify-center">
-                <div class="text-white text-2xl"><i class="fas fa-spinner fa-spin"></i> Loading...</div>
-            </div>
         </div>
     </div>
-<script>
-let scene, camera, renderer, raytracingEnabled = true;
-let objects = [];
-let selectedObject = null;
-const textureLoader = new THREE.TextureLoader();
-let controls;
-function init() {
-    // Scene setup
-    scene = new THREE.Scene();
-    scene.background = new THREE.Color(0x1a1a1a);
-    camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
-    renderer = new THREE.WebGLRenderer({ antialias: true });
-    renderer.setSize(window.innerWidth-320, window.innerHeight);
-    renderer.shadowMap.enabled = true;
-    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-    document.getElementById('viewport').appendChild(renderer.domElement);
-    // Lighting
-    const ambientLight = new THREE.AmbientLight(0x404040);
-    scene.add(ambientLight);
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
-    directionalLight.position.set(5, 5, 5);
-    directionalLight.castShadow = true;
-    scene.add(directionalLight);
-    // Camera and controls
-    camera.position.z = 8;
-    controls = new THREE.OrbitControls(camera, renderer.domElement);
-    controls.enableDamping = true;
-    controls.dampingFactor = 0.05;
-    // Event listeners
-    document.getElementById('file-input').addEventListener('change', handleFileUpload);
-    renderer.domElement.addEventListener('click', onCanvasClick, false);
-    // Texture input handlers
-    document.getElementById('albedo-map').addEventListener('change', e => loadTexture(e, 'map'));
-    document.getElementById('normal-map').addEventListener('change', e => loadTexture(e, 'normalMap'));
-    document.getElementById('roughness-map').addEventListener('change', e => loadTexture(e, 'roughnessMap'));
-    animate();
-}
-function handleFileUpload(event) {
-    const file = event.target.files[0];
-    const reader = new FileReader();
-    showLoading(true);
-    reader.onload = function(e) {
-        const loader = file.name.endsWith('.stl') ?
-            new THREE.STLLoader() : new THREE.OBJLoader();
-        const model = loader.parse(e.target.result);
-        model.scale.set(0.1, 0.1, 0.1);
-        model.traverse(child => {
-            if (child.isMesh) {
-                child.material = new THREE.MeshStandardMaterial({
-                    color: 0x888888,
-                    metalness: 0.2,
-                    roughness: 0.8
                 });
-                child.castShadow = true;
-                child.receiveShadow = true;
             }
-        });
-        scene.add(model);
-        objects.push(model);
-        showLoading(false);
-    };
-    reader.readAsArrayBuffer(file);
-}
-function exportSTL() {
-    const exporter = new THREE.STLExporter();
-    const stlString = exporter.parse(scene);
-    const blob = new Blob([stlString], {type: 'text/plain'});
-    saveAs(blob, 'scene.stl');
-}
-function exportOBJ() {
-    const exporter = new THREE.OBJExporter();
-    const objString = exporter.parse(scene);
-    const blob = new Blob([objString], {type: 'text/plain'});
-    saveAs(blob, 'scene.obj');
-}
-function toggleRaytracing() {
-    raytracingEnabled = !raytracingEnabled;
-    document.getElementById('raytrace-btn').innerHTML =
-        `<i class="fas fa-raygun mr-2"></i>Raytracing: ${raytracingEnabled ? 'On' : 'Off'}`;
-    objects.forEach(obj => {
-        obj.traverse(child => {
-            if (child.isMesh) {
-                child.material.wireframe = !raytracingEnabled;
             }
-        });
-    });
-}
-function addLight(type) {
-    let light;
-    if (type === 'point') {
-        light = new THREE.PointLight(0xffffff, 1, 100);
-        light.position.set(5, 5, 5);
-        light.castShadow = true;
-    } else {
-        light = new THREE.DirectionalLight(0xffffff, 1);
-        light.position.set(5, 5, 5);
-        light.castShadow = true;
-    }
-    scene.add(light);
-}
-function changeMaterialType(type) {
-    if (!selectedObject) return;
-    const currentMaterial = selectedObject.material;
-    const newMaterial = new THREE[type]({
-        color: currentMaterial?.color || 0xffffff,
-        map: currentMaterial?.map,
-        normalMap: currentMaterial?.normalMap,
-        roughnessMap: currentMaterial?.roughnessMap,
-        metalness: 0.5,
-        roughness: 0.5
-    });
-    if (currentMaterial) currentMaterial.dispose();
-    selectedObject.material = newMaterial;
-    selectedObject.material.needsUpdate = true;
-}
-async function loadTexture(event, mapType) {
-    if (!selectedObject) return;
-    const file = event.target.files[0];
-    if (!file) return;
-    showLoading(true);
-    try {
-        const texture = await textureLoader.loadAsync(URL.createObjectURL(file));
-        texture.wrapS = THREE.RepeatWrapping;
-        texture.wrapT = THREE.RepeatWrapping;
-        selectedObject.material[mapType] = texture;
-        selectedObject.material.needsUpdate = true;
-    } catch (error) {
-        console.error('Error loading texture:', error);
-    }
-    showLoading(false);
-}
-function onCanvasClick(event) {
-    const rect = renderer.domElement.getBoundingClientRect();
-    const mouse = new THREE.Vector2(
-        ((event.clientX - rect.left) / rect.width) * 2 - 1,
-        -((event.clientY - rect.top) / rect.height) * 2 + 1
-    );
-    const raycaster = new THREE.Raycaster();
-    raycaster.setFromCamera(mouse, camera);
-    const intersects = raycaster.intersectObjects(scene.children, true);
-    if (intersects.length > 0) {
-        selectedObject = intersects[0].object;
-        updateSelectedObjectInfo();
-    }
-}
-function updateSelectedObjectInfo() {
-    const infoDiv = document.getElementById('selected-object-info');
-    if (!selectedObject) return;
-    infoDiv.innerHTML = `
-        <div class="truncate">Type: ${selectedObject.type}</div>
-        <div>Material: ${selectedObject.material.type}</div>
-        <div>Position: ${selectedObject.position.x.toFixed(2)},
-                      ${selectedObject.position.y.toFixed(2)},
-                      ${selectedObject.position.z.toFixed(2)}</div>
-    `;
-}
-function showLoading(show) {
-    document.getElementById('loading-overlay').style.display = show ? 'flex' : 'none';
-}
-function animate() {
-    requestAnimationFrame(animate);
-    controls.update();
-    renderer.render(scene, camera);
-}
-function saveAs(blob, filename) {
-    const link = document.createElement('a');
-    link.href = URL.createObjectURL(blob);
-    link.download = filename;
-    link.click();
-}
-window.addEventListener('resize', () => {
-    camera.aspect = (window.innerWidth-320) / window.innerHeight;
-    camera.updateProjectionMatrix();
-    renderer.setSize(window.innerWidth-320, window.innerHeight);
-});
-// Initialize the application
-init();
-</script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3D Scene Editor with Raytracing</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/STLLoader.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/OBJLoader.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/exporters/OBJExporter.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/exporters/STLExporter.min.js"></script>
+    <style>
+        #renderCanvas {
+            width: 100%;
+            height: 100%;
+            display: block;
+        }
+        .dragover {
+            border: 2px dashed #3b82f6 !important;
+            background-color: rgba(59, 130, 246, 0.1) !important;
+        }
+        .sidebar {
+            transition: all 0.3s ease;
+        }
+        .sidebar.collapsed {
+            transform: translateX(-100%);
+        }
+    </style>
 </head>
+<body class="bg-gray-900 text-white h-screen flex overflow-hidden">
+    <!-- Sidebar -->
+    <div id="sidebar" class="sidebar w-64 bg-gray-800 h-full flex flex-col border-r border-gray-700">
+        <div class="p-4 border-b border-gray-700 flex justify-between items-center">
+            <h1 class="text-xl font-bold">3D Scene Editor</h1>
+            <button id="toggleSidebar" class="text-gray-400 hover:text-white">
+                <i class="fas fa-chevron-left"></i>
+            </button>
+        </div>
+        <div class="p-4 space-y-4 overflow-y-auto flex-grow">
+            <!-- Scene Controls -->
             <div class="space-y-2">
+                <h2 class="font-semibold text-blue-400 flex items-center">
+                    <i class="fas fa-cube mr-2"></i> Scene Controls
+                </h2>
+                <div class="flex space-x-2">
+                    <button id="toggleRaytracing" class="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded flex items-center">
+                        <i class="fas fa-lightbulb mr-1"></i> Toggle Raytracing
+                    </button>
+                    <button id="clearScene" class="bg-red-600 hover:bg-red-700 px-3 py-1 rounded flex items-center">
+                        <i class="fas fa-trash mr-1"></i> Clear
+                    </button>
+                </div>
+            </div>
+            <!-- Lighting Controls -->
+            <div class="space-y-2">
+                <h2 class="font-semibold text-yellow-400 flex items-center">
+                    <i class="fas fa-lightbulb mr-2"></i> Lighting
+                </h2>
+                <div class="grid grid-cols-2 gap-2">
+                    <button id="addAmbientLight" class="bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-sm flex items-center">
+                        <i class="fas fa-sun mr-1"></i> Ambient
+                    </button>
+                    <button id="addDirectionalLight" class="bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-sm flex items-center">
+                        <i class="fas fa-sun mr-1"></i> Directional
+                    </button>
+                    <button id="addPointLight" class="bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-sm flex items-center">
+                        <i class="fas fa-lightbulb mr-1"></i> Point
+                    </button>
+                    <button id="addSpotLight" class="bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-sm flex items-center">
+                        <i class="fas fa-lightbulb mr-1"></i> Spot
+                    </button>
+                </div>
+                <div id="lightControls" class="space-y-2 mt-2">
+                    <!-- Light controls will be added here dynamically -->
+                </div>
             </div>
+            <!-- Import/Export -->
+            <div class="space-y-2">
+                <h2 class="font-semibold text-green-400 flex items-center">
+                    <i class="fas fa-file-import mr-2"></i> Import/Export
+                </h2>
+                <div class="grid grid-cols-2 gap-2">
+                    <button id="importSTL" class="bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-sm flex items-center">
+                        <i class="fas fa-file-upload mr-1"></i> Import STL
+                    </button>
+                    <button id="importOBJ" class="bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-sm flex items-center">
+                        <i class="fas fa-file-upload mr-1"></i> Import OBJ
                     </button>
+                    <button id="exportSTL" class="bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-sm flex items-center">
+                        <i class="fas fa-file-download mr-1"></i> Export STL
                     </button>
+                    <button id="exportOBJ" class="bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-sm flex items-center">
+                        <i class="fas fa-file-download mr-1"></i> Export OBJ
                     </button>
                 </div>
+                <div id="dropZone" class="border-2 border-dashed border-gray-600 rounded p-4 text-center mt-2 cursor-pointer hover:border-blue-500 transition">
+                    <i class="fas fa-cloud-upload-alt text-3xl mb-2 text-gray-400"></i>
+                    <p class="text-sm text-gray-400">Drop 3D files here</p>
+                    <p class="text-xs text-gray-500">(STL, OBJ)</p>
+                </div>
             </div>
+            <!-- Object List -->
+            <div class="space-y-2">
+                <h2 class="font-semibold text-purple-400 flex items-center">
+                    <i class="fas fa-shapes mr-2"></i> Scene Objects
+                </h2>
+                <div id="objectList" class="space-y-1 max-h-40 overflow-y-auto">
+                    <!-- Objects will be listed here -->
                 </div>
             </div>
         </div>
+        <div class="p-4 border-t border-gray-700 text-xs text-gray-500">
+            <p>3D Scene Editor v1.0</p>
+            <p>With Raytracing support</p>
         </div>
     </div>
+    <!-- Main Content -->
+    <div class="flex-grow relative">
+        <div id="renderCanvas"></div>
+        <!-- Stats Panel -->
+        <div id="stats" class="absolute top-2 right-2 bg-gray-800 bg-opacity-70 p-2 rounded text-xs">
+            <div>FPS: <span id="fps">0</span></div>
+            <div>Objects: <span id="objectCount">0</span></div>
+            <div>Vertices: <span id="vertexCount">0</span></div>
+        </div>
+        <!-- Loading Indicator -->
+        <div id="loadingIndicator" class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
+            <div class="bg-gray-800 p-6 rounded-lg shadow-lg text-center">
+                <i class="fas fa-spinner fa-spin text-4xl text-blue-500 mb-4"></i>
+                <p class="text-xl">Loading...</p>
+            </div>
+        </div>
+    </div>
+    <!-- File Input (hidden) -->
+    <input type="file" id="fileInput" accept=".stl,.obj" class="hidden" multiple>
+    <script>
+        // Initialize Three.js scene
+        let scene, camera, renderer, controls;
+        let raytracingEnabled = false;
+        let objects = [];
+        let lights = [];
+        let clock = new THREE.Clock();
+        let stats = {
+            fps: 0,
+            objectCount: 0,
+            vertexCount: 0
+        };
+        // Initialize the application
+        function init() {
+            // Create scene
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x111111);
+            // Create camera
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.set(5, 5, 5);
+            camera.lookAt(0, 0, 0);
+            // Create renderer
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+            document.getElementById('renderCanvas').appendChild(renderer.domElement);
+            // Add orbit controls
+            controls = new THREE.OrbitControls(camera, renderer.domElement);
+            controls.enableDamping = true;
+            controls.dampingFactor = 0.05;
+            // Add axes helper
+            const axesHelper = new THREE.AxesHelper(5);
+            scene.add(axesHelper);
+            // Add grid helper
+            const gridHelper = new THREE.GridHelper(20, 20);
+            scene.add(gridHelper);
+            // Add default ambient light
+            addAmbientLight();
+            // Add default directional light
+            addDirectionalLight();
+            // Event listeners
+            setupEventListeners();
+            // Start animation loop
+            animate();
+        }
+        // Animation loop
+        function animate() {
+            requestAnimationFrame(animate);
+            // Update controls
+            controls.update();
+            // Calculate FPS
+            const delta = clock.getDelta();
+            stats.fps = Math.round(1 / delta);
+            // Update stats
+            updateStats();
+            // Render scene
+            renderer.render(scene, camera);
+        }
+        // Update statistics display
+        function updateStats() {
+            document.getElementById('fps').textContent = stats.fps;
+            document.getElementById('objectCount').textContent = objects.length;
+            // Calculate total vertices
+            let vertexCount = 0;
+            objects.forEach(obj => {
+                if (obj.geometry) {
+                    vertexCount += obj.geometry.attributes.position.count;
+                }
+            });
+            document.getElementById('vertexCount').textContent = vertexCount;
+        }
+        // Setup event listeners
+        function setupEventListeners() {
+            // Window resize
+            window.addEventListener('resize', () => {
+                camera.aspect = window.innerWidth / window.innerHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(window.innerWidth, window.innerHeight);
+            });
+            // Sidebar toggle
+            document.getElementById('toggleSidebar').addEventListener('click', () => {
+                document.getElementById('sidebar').classList.toggle('collapsed');
+                document.getElementById('toggleSidebar').innerHTML =
+                    document.getElementById('sidebar').classList.contains('collapsed') ?
+                    '<i class="fas fa-chevron-right"></i>' : '<i class="fas fa-chevron-left"></i>';
+            });
+            // Raytracing toggle
+            document.getElementById('toggleRaytracing').addEventListener('click', () => {
+                raytracingEnabled = !raytracingEnabled;
+                // In a real implementation, you would switch to a raytracing renderer here
+                alert(raytracingEnabled ? 'Raytracing enabled (simulated)' : 'Raytracing disabled');
+            });
+            // Clear scene
+            document.getElementById('clearScene').addEventListener('click', () => {
+                clearScene();
+            });
+            // Light buttons
+            document.getElementById('addAmbientLight').addEventListener('click', addAmbientLight);
+            document.getElementById('addDirectionalLight').addEventListener('click', addDirectionalLight);
+            document.getElementById('addPointLight').addEventListener('click', addPointLight);
+            document.getElementById('addSpotLight').addEventListener('click', addSpotLight);
+            // Import/Export buttons
+            document.getElementById('importSTL').addEventListener('click', () => {
+                document.getElementById('fileInput').accept = '.stl';
+                document.getElementById('fileInput').click();
+            });
+            document.getElementById('importOBJ').addEventListener('click', () => {
+                document.getElementById('fileInput').accept = '.obj';
+                document.getElementById('fileInput').click();
+            });
+            document.getElementById('exportSTL').addEventListener('click', exportSTL);
+            document.getElementById('exportOBJ').addEventListener('click', exportOBJ);
+            // File input handling
+            document.getElementById('fileInput').addEventListener('change', handleFileSelect);
+            // Drag and drop
+            const dropZone = document.getElementById('dropZone');
+            dropZone.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                dropZone.classList.add('dragover');
+            });
+            dropZone.addEventListener('dragleave', () => {
+                dropZone.classList.remove('dragover');
+            });
+            dropZone.addEventListener('drop', (e) => {
+                e.preventDefault();
+                dropZone.classList.remove('dragover');
+                if (e.dataTransfer.files.length > 0) {
+                    handleFileSelect({ target: { files: e.dataTransfer.files } });
+                }
+            });
+            dropZone.addEventListener('click', () => {
+                document.getElementById('fileInput').accept = '.stl,.obj';
+                document.getElementById('fileInput').click();
+            });
+        }
+        // Add ambient light
+        function addAmbientLight(color = 0x404040, intensity = 0.5) {
+            const light = new THREE.AmbientLight(color, intensity);
+            scene.add(light);
+            lights.push(light);
+            addLightControl(light, 'Ambient Light');
+        }
+        // Add directional light
+        function addDirectionalLight(color = 0xffffff, intensity = 1, x = 5, y = 5, z = 5) {
+            const light = new THREE.DirectionalLight(color, intensity);
+            light.position.set(x, y, z);
+            light.castShadow = true;
+            light.shadow.mapSize.width = 1024;
+            light.shadow.mapSize.height = 1024;
+            scene.add(light);
+            lights.push(light);
+            // Add helper
+            const helper = new THREE.DirectionalLightHelper(light, 1);
+            scene.add(helper);
+            addLightControl(light, 'Directional Light', helper);
+        }
+        // Add point light
+        function addPointLight(color = 0xffffff, intensity = 1, distance = 10, x = 0, y = 5, z = 0) {
+            const light = new THREE.PointLight(color, intensity, distance);
+            light.position.set(x, y, z);
+            light.castShadow = true;
+            scene.add(light);
+            lights.push(light);
+            // Add helper
+            const helper = new THREE.PointLightHelper(light, 1);
+            scene.add(helper);
+            addLightControl(light, 'Point Light', helper);
+        }
+        // Add spot light
+        function addSpotLight(color = 0xffffff, intensity = 1, distance = 10, angle = Math.PI / 4, penumbra = 0.1, x = 0, y = 5, z = 0) {
+            const light = new THREE.SpotLight(color, intensity, distance, angle, penumbra);
+            light.position.set(x, y, z);
+            light.castShadow = true;
+            scene.add(light);
+            lights.push(light);
+            // Add helper
+            const helper = new THREE.SpotLightHelper(light);
+            scene.add(helper);
+            addLightControl(light, 'Spot Light', helper);
+        }
+        // Add light control UI
+        function addLightControl(light, name, helper = null) {
+            const lightControls = document.getElementById('lightControls');
+            const lightId = lights.length - 1;
+            const controlDiv = document.createElement('div');
+            controlDiv.className = 'bg-gray-700 p-2 rounded';
+            controlDiv.id = `lightControl-${lightId}`;
+            controlDiv.innerHTML = `
+                <div class="flex justify-between items-center mb-1">
+                    <span class="text-sm font-medium">${name}</span>
+                    <button class="text-red-400 hover:text-red-300 text-xs" data-light-id="${lightId}">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="grid grid-cols-2 gap-1 text-xs">
+                    <div>
+                        <label>Intensity</label>
+                        <input type="range" min="0" max="2" step="0.1" value="${light.intensity}"
+                               class="w-full" data-light-id="${lightId}" data-property="intensity">
+                    </div>
+                    <div>
+                        <label>Color</label>
+                        <input type="color" value="#${light.color.getHexString()}"
+                               class="w-full" data-light-id="${lightId}" data-property="color">
+                    </div>
+                </div>
+            `;
+            lightControls.appendChild(controlDiv);
+            // Add event listeners for the controls
+            controlDiv.querySelectorAll('input').forEach(input => {
+                input.addEventListener('input', (e) => {
+                    const id = parseInt(e.target.dataset.lightId);
+                    const property = e.target.dataset.property;
+                    const value = e.target.value;
+                    if (property === 'color') {
+                        lights[id].color.setHex(parseInt(value.substring(1), 16));
+                    } else if (property === 'intensity') {
+                        lights[id].intensity = parseFloat(value);
+                    }
+                    if (helper) helper.update();
+                });
+            });
+            // Add delete button event
+            controlDiv.querySelector('button').addEventListener('click', (e) => {
+                const id = parseInt(e.target.dataset.lightId || e.target.closest('button').dataset.lightId);
+                scene.remove(lights[id]);
+                if (helper) scene.remove(helper);
+                lights.splice(id, 1);
+                controlDiv.remove();
+                // Update remaining controls
+                document.querySelectorAll('[data-light-id]').forEach(el => {
+                    const currentId = parseInt(el.dataset.lightId);
+                    if (currentId > id) {
+                        el.dataset.lightId = currentId - 1;
+                    }
+                });
+            });
+        }
+        // Clear the scene
+        function clearScene() {
+            // Remove all objects
+            objects.forEach(obj => {
+                scene.remove(obj);
+            });
+            objects = [];
+            // Remove all lights except the first two (ambient and directional)
+            while (lights.length > 2) {
+                const light = lights.pop();
+                scene.remove(light);
+                // Remove helper if exists
+                light.children.forEach(child => {
+                    if (child instanceof THREE.LightHelper) {
+                        scene.remove(child);
+                    }
                 });
             }
+            // Clear light controls except the first two
+            const lightControls = document.getElementById('lightControls');
+            while (lightControls.children.length > 2) {
+                lightControls.removeChild(lightControls.lastChild);
+            }
+            // Reset the first two lights to default
+            if (lights.length > 0) {
+                lights[0].color.setHex(0x404040);
+                lights[0].intensity = 0.5;
+            }
+            if (lights.length > 1) {
+                lights[1].color.setHex(0xffffff);
+                lights[1].intensity = 1;
+                lights[1].position.set(5, 5, 5);
+            }
+            // Update UI controls
+            document.querySelectorAll('#lightControls input[data-property="color"]').forEach((input, index) => {
+                if (index === 0) input.value = '#404040';
+                if (index === 1) input.value = '#ffffff';
+            });
+            document.querySelectorAll('#lightControls input[data-property="intensity"]').forEach((input, index) => {
+                if (index === 0) input.value = 0.5;
+                if (index === 1) input.value = 1;
+            });
+            // Update object list
+            updateObjectList();
+        }
+        // Handle file selection
+        function handleFileSelect(event) {
+            const files = event.target.files;
+            if (!files || files.length === 0) return;
+            showLoading(true);
+            // Process each file
+            Array.from(files).forEach(file => {
+                const fileName = file.name.toLowerCase();
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    if (fileName.endsWith('.stl')) {
+                        loadSTL(e.target.result, file.name);
+                    } else if (fileName.endsWith('.obj')) {
+                        loadOBJ(e.target.result, file.name);
+                    }
+                };
+                reader.onerror = function() {
+                    console.error('Error reading file');
+                    showLoading(false);
+                };
+                if (fileName.endsWith('.stl') || fileName.endsWith('.obj')) {
+                    reader.readAsArrayBuffer(file);
+                } else {
+                    alert('Unsupported file format. Please upload STL or OBJ files.');
+                    showLoading(false);
+                }
+            });
+            // Reset file input
+            event.target.value = '';
+        }
+        // Load STL file
+        function loadSTL(buffer, name) {
+            try {
+                const loader = new THREE.STLLoader();
+                const geometry = loader.parse(buffer);
+                const material = new THREE.MeshStandardMaterial({
+                    color: 0xaaaaaa,
+                    metalness: 0.5,
+                    roughness: 0.5
+                });
+                const mesh = new THREE.Mesh(geometry, material);
+                mesh.castShadow = true;
+                mesh.receiveShadow = true;
+                mesh.name = name;
+                // Center and scale the model
+                geometry.computeBoundingBox();
+                const boundingBox = geometry.boundingBox;
+                const center = new THREE.Vector3();
+                boundingBox.getCenter(center);
+                mesh.position.sub(center);
+                // Scale to reasonable size
+                const size = boundingBox.getSize(new THREE.Vector3());
+                const maxDim = Math.max(size.x, size.y, size.z);
+                const scale = 5 / maxDim;
+                mesh.scale.set(scale, scale, scale);
+                scene.add(mesh);
+                objects.push(mesh);
+                updateObjectList();
+                showLoading(false);
+            } catch (e) {
+                console.error('Error loading STL:', e);
+                alert('Error loading STL file');
+                showLoading(false);
             }
+        }
+        // Load OBJ file
+        function loadOBJ(buffer, name) {
+            try {
+                const loader = new THREE.OBJLoader();
+                const obj = loader.parse(buffer);
+                // Apply material to all children
+                obj.traverse(child => {
+                    if (child instanceof THREE.Mesh) {
+                        child.material = new THREE.MeshStandardMaterial({
+                            color: 0xaaaaaa,
+                            metalness: 0.5,
+                            roughness: 0.5
+                        });
+                        child.castShadow = true;
+                        child.receiveShadow = true;
+                    }
+                });
+                obj.name = name;
+                // Center and scale the model
+                const box = new THREE.Box3().setFromObject(obj);
+                const center = new THREE.Vector3();
+                box.getCenter(center);
+                obj.position.sub(center);
+                // Scale to reasonable size
+                const size = box.getSize(new THREE.Vector3());
+                const maxDim = Math.max(size.x, size.y, size.z);
+                const scale = 5 / maxDim;
+                obj.scale.set(scale, scale, scale);
+                scene.add(obj);
+                objects.push(obj);
+                updateObjectList();
+                showLoading(false);
+            } catch (e) {
+                console.error('Error loading OBJ:', e);
+                alert('Error loading OBJ file');
+                showLoading(false);
+            }
+        }
+        // Export STL
+        function exportSTL() {
+            if (objects.length === 0) {
+                alert('No objects to export');
+                return;
+            }
+            const exporter = new THREE.STLExporter();
+            let stlString = '';
+            // Export all objects
+            objects.forEach(obj => {
+                stlString += exporter.parse(obj);
+            });
+            // Create download link
+            const blob = new Blob([stlString], { type: 'text/plain' });
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = 'scene.stl';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            URL.revokeObjectURL(url);
+        }
+        // Export OBJ
+        function exportOBJ() {
+            if (objects.length === 0) {
+                alert('No objects to export');
+                return;
+            }
+            const exporter = new THREE.OBJExporter();
+            let objString = '';
+            // Export all objects
+            objects.forEach(obj => {
+                objString += exporter.parse(obj);
+            });
+            // Create download link
+            const blob = new Blob([objString], { type: 'text/plain' });
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = 'scene.obj';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            URL.revokeObjectURL(url);
+        }
+        // Update object list in UI
+        function updateObjectList() {
+            const objectList = document.getElementById('objectList');
+            objectList.innerHTML = '';
+            if (objects.length === 0) {
+                objectList.innerHTML = '<p class="text-gray-500 text-sm">No objects in scene</p>';
+                return;
+            }
+            objects.forEach((obj, index) => {
+                const item = document.createElement('div');
+                item.className = 'flex justify-between items-center bg-gray-700 px-2 py-1 rounded text-sm';
+                item.innerHTML = `
+                    <span class="truncate">${obj.name || 'Unnamed Object'}</span>
+                    <div class="flex space-x-1">
+                        <button class="text-blue-400 hover:text-blue-300" data-action="focus" data-index="${index}">
+                            <i class="fas fa-crosshairs"></i>
+                        </button>
+                        <button class="text-red-400 hover:text-red-300" data-action="remove" data-index="${index}">
+                            <i class="fas fa-trash"></i>
+                        </button>
+                    </div>
+                `;
+                objectList.appendChild(item);
+            });
+            // Add event listeners
+            document.querySelectorAll('[data-action="focus"]').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    const index = parseInt(e.target.dataset.index || e.target.closest('button').dataset.index);
+                    focusObject(objects[index]);
+                });
+            });
+            document.querySelectorAll('[data-action="remove"]').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    const index = parseInt(e.target.dataset.index || e.target.closest('button').dataset.index);
+                    removeObject(index);
+                });
+            });
+        }
+        // Focus on object
+        function focusObject(obj) {
+            const box = new THREE.Box3().setFromObject(obj);
+            const size = box.getSize(new THREE.Vector3());
+            const center = box.getCenter(new THREE.Vector3());
+            // Position camera to view the entire object
+            const maxDim = Math.max(size.x, size.y, size.z);
+            const cameraDistance = maxDim * 2;
+            camera.position.copy(center);
+            camera.position.z += cameraDistance;
+            camera.lookAt(center);
+            controls.target.copy(center);
+            controls.update();
+        }
+        // Remove object
+        function removeObject(index) {
+            if (index >= 0 && index < objects.length) {
+                scene.remove(objects[index]);
+                objects.splice(index, 1);
+                updateObjectList();
+            }
+        }
+        // Show/hide loading indicator
+        function showLoading(show) {
+            document.getElementById('loadingIndicator').classList.toggle('hidden', !show);
+        }
+        // Initialize the app when DOM is loaded
+        document.addEventListener('DOMContentLoaded', init);
+    </script>
 </body>
 </html>