Spaces:

ThorAILabs
/

SceneEditor

Running

App Files Files Community

ThorAILabs commited on Apr 14, 2025

Commit

04fb0ab

verified ·

1 Parent(s): acf2d73

refactor... yet again

Browse files

Files changed (1) hide show

index.html +240 -226

index.html CHANGED Viewed

@@ -1,238 +1,252 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>3D Scene Editor with Raytracing & Import/Export</title>
-    <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
-    <!-- Font Awesome -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <!-- Three.js -->
-    <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.js"></script>
-    <!-- Loaders & Exporters -->
-    <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>
-</head>
-<body class="bg-gray-900 h-screen overflow-hidden">
-    <div class="flex h-screen">
-        <!-- Sidebar -->
-        <div class="w-64 bg-gray-800 p-4 text-white flex flex-col gap-4">
-            <h2 class="text-xl font-bold mb-4"><i class="fas fa-cube mr-2"></i>Scene Controls</h2>
-            <div class="flex flex-col gap-2">
-                <button onclick="addCube()" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded">
-                    <i class="fas fa-cube mr-2"></i>Add Cube
-                </button>
-                <button onclick="addSphere()" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded">
-                    <i class="fas fa-globe mr-2"></i>Add Sphere
-                </button>
-                <!-- Import Section -->
-                <div class="mt-4 pt-4 border-t border-gray-700">
-                    <button onclick="document.getElementById('stlInput').click()" class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded w-full">
-                        <i class="fas fa-file-import mr-2"></i>Import STL
-                    </button>
-                    <input type="file" id="stlInput" accept=".stl" hidden>
-                    <button onclick="document.getElementById('objInput').click()" class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded w-full mt-2">
-                        <i class="fas fa-file-import mr-2"></i>Import OBJ
-                    </button>
-                    <input type="file" id="objInput" accept=".obj" hidden>
-                </div>
-                <!-- Export Section -->
-                <div class="mt-4 pt-4 border-t border-gray-700">
-                    <button onclick="exportSTL()" class="bg-pink-600 hover:bg-pink-700 px-4 py-2 rounded w-full">
-                        <i class="fas fa-file-export mr-2"></i>Export STL
-                    </button>
-                    <button onclick="exportOBJ()" class="bg-pink-600 hover:bg-pink-700 px-4 py-2 rounded w-full mt-2">
-                        <i class="fas fa-file-export mr-2"></i>Export OBJ
-                    </button>
-                </div>
-                <button onclick="raytrace()" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded mt-4">
-                    <i class="fas fa-raygun mr-2"></i>Raytrace Scene
-                </button>
-            </div>
         </div>
-        <!-- 3D Viewport -->
-        <div id="viewport" class="flex-1"></div>
     </div>
-    <script>
-        let scene, camera, renderer, controls;
-        let raytraceMode = false;
-        function init() {
-            // Main scene setup
-            scene = new THREE.Scene();
-            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-            renderer = new THREE.WebGLRenderer({ antialias: true });
-            renderer.setSize(window.innerWidth - 256, window.innerHeight);
-            renderer.setPixelRatio(window.devicePixelRatio);
-            document.getElementById('viewport').appendChild(renderer.domElement);
-            // Lighting
-            const ambientLight = new THREE.AmbientLight(0x404040);
-            scene.add(ambientLight);
-            const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
-            directionalLight.position.set(5, 5, 5);
-            scene.add(directionalLight);
-            // Controls
-            controls = new THREE.OrbitControls(camera, renderer.domElement);
-            camera.position.z = 5;
-            // Ground plane
-            const planeGeometry = new THREE.PlaneGeometry(10, 10);
-            const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x444444 });
-            const plane = new THREE.Mesh(planeGeometry, planeMaterial);
-            plane.rotation.x = -Math.PI / 2;
-            scene.add(plane);
-            animate();
-        }
-        function animate() {
-            requestAnimationFrame(animate);
-            controls.update();
-            renderer.render(scene, camera);
-        }
-        function addCube() {
-            const geometry = new THREE.BoxGeometry();
-            const material = new THREE.MeshStandardMaterial({
-                color: new THREE.Color(Math.random(), Math.random(), Math.random()),
-                metalness: 0.3,
-                roughness: 0.8
-            });
-            const cube = new THREE.Mesh(geometry, material);
-            cube.position.set(Math.random() * 5 - 2.5, 0.5, Math.random() * 5 - 2.5);
-            scene.add(cube);
-        }
-        function addSphere() {
-            const geometry = new THREE.SphereGeometry(0.5, 32, 32);
-            const material = new THREE.MeshStandardMaterial({
-                color: new THREE.Color(Math.random(), Math.random(), Math.random()),
-                metalness: 0.8,
-                roughness: 0.2
-            });
-            const sphere = new THREE.Mesh(geometry, material);
-            sphere.position.set(Math.random() * 5 - 2.5, 0.5, Math.random() * 5 - 2.5);
-            scene.add(sphere);
-        }
-        function handleSTLUpload(event) {
-            const file = event.target.files[0];
-            if (!file) return;
-            const reader = new FileReader();
-            reader.onload = function(e) {
-                const loader = new THREE.STLLoader();
-                const geometry = loader.parse(e.target.result);
-                const material = new THREE.MeshStandardMaterial({
-                    color: new THREE.Color(Math.random(), Math.random(), Math.random()),
-                    metalness: 0.3,
-                    roughness: 0.8
-                });
-                const mesh = new THREE.Mesh(geometry, material);
-                mesh.position.set(0, 0, 0);
-                scene.add(mesh);
-            };
-            reader.readAsArrayBuffer(file);
-        }
-        function handleOBJUpload(event) {
-            const file = event.target.files[0];
-            if (!file) return;
-            const reader = new FileReader();
-            reader.onload = function(e) {
-                const loader = new THREE.OBJLoader();
-                const obj = loader.parse(e.target.result);
-                obj.traverse(child => {
-                    if (child.isMesh) {
-                        child.material = new THREE.MeshStandardMaterial({
-                            color: new THREE.Color(Math.random(), Math.random(), Math.random()),
-                            metalness: 0.3,
-                            roughness: 0.8
-                        });
-                    }
-                });
-                scene.add(obj);
-            };
-            reader.readAsText(file);
-        }
-        function exportSTL() {
-            const exporter = new THREE.STLExporter();
-            const result = exporter.parse(scene);
-            const blob = new Blob([result], { type: 'text/plain' });
-            const link = document.createElement('a');
-            link.href = URL.createObjectURL(blob);
-            link.download = 'scene.stl';
-            link.click();
         }
-        function exportOBJ() {
-            const exporter = new THREE.OBJExporter();
-            const result = exporter.parse(scene);
-            const blob = new Blob([result], { type: 'text/plain' });
-            const link = document.createElement('a');
-            link.href = URL.createObjectURL(blob);
-            link.download = 'scene.obj';
-            link.click();
         }
-        function raytrace() {
-            const raytracer = new THREE.WebGLRenderer();
-            const rtCanvas = raytracer.domElement;
-            const clonedScene = scene.clone();
-            const clonedCamera = camera.clone();
-            clonedScene.traverse(child => {
-                if (child.isMesh) {
-                    child.material = new THREE.MeshBasicMaterial({
-                        color: child.material.color,
-                        wireframe: false
-                    });
-                }
-            });
-            raytracer.setSize(window.innerWidth - 256, window.innerHeight);
-            raytracer.render(clonedScene, clonedCamera);
-            document.getElementById('viewport').replaceChild(rtCanvas, renderer.domElement);
-            renderer = raytracer;
         }
-        // Initialize on load
-        window.onload = function() {
-            init();
-            document.getElementById('stlInput').addEventListener('change', handleSTLUpload);
-            document.getElementById('objInput').addEventListener('change', handleOBJUpload);
-        };
-        window.addEventListener('resize', () => {
-            camera.aspect = (window.innerWidth - 256) / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth - 256, window.innerHeight);
-        });
     </script>
-</body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>3D Scene Editor with Raytracing</title>
+    <!-- Tailwind CSS CDN -->
     <script src="https://cdn.tailwindcss.com"></script>
+    <!-- FontAwesome CDN -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-yHzo+M3GtT8OqysHzf3R+KwV/B+8/7ICiwAdgZrmEMXn1x5slIYi9PNRbE2LkoOmnJ5cZtL7B5ZpCyVQV3K8kw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <!-- Three.js and Helpers -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r146/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r146/examples/js/controls/OrbitControls.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r146/examples/js/loaders/STLLoader.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r146/examples/js/loaders/OBJLoader.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r146/examples/js/exporters/STLExporter.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r146/examples/js/exporters/OBJExporter.js"></script>
+    <style>
+      /* Remove margin and set canvas to full screen */
+      body, html {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        overflow: hidden;
+      }
+      #editorCanvas {
+        display: block;
+      }
+    </style>
+  </head>
+  <body class="bg-gray-900">
+    <!-- Toolbar -->
+    <div class="absolute top-4 left-4 z-10 space-y-4">
+      <div class="bg-gray-800 bg-opacity-80 rounded p-4 shadow-lg">
+        <h1 class="text-white text-lg font-bold mb-2"><i class="fas fa-cube"></i> 3D Scene Editor</h1>
+        <div class="space-x-2">
+          <!-- Toggle Raytracing -->
+          <button id="toggleRaytrace" class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded shadow">
+            <i class="fas fa-lightbulb"></i> Toggle Raytrace
+          </button>
+          <!-- Add Light -->
+          <select id="lightType" class="bg-gray-700 text-white rounded px-2 py-1">
+            <option value="ambient">Ambient Light</option>
+            <option value="point">Point Light</option>
+            <option value="directional">Directional Light</option>
+          </select>
+          <button id="addLight" class="bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded shadow">
+            <i class="fas fa-plus"></i> Add Light
+          </button>
         </div>
+      </div>
+      <!-- File Operations -->
+      <div class="bg-gray-800 bg-opacity-80 rounded p-4 shadow-lg">
+        <h2 class="text-white text-md font-semibold mb-2"><i class="fas fa-file"></i> Load / Export Files</h2>
+        <div class="mb-2">
+          <input type="file" id="fileInput" class="bg-gray-700 text-white rounded px-2 py-1" accept=".stl,.obj" />
+        </div>
+        <div class="space-x-2">
+          <select id="exportType" class="bg-gray-700 text-white rounded px-2 py-1">
+            <option value="stl">Export as STL</option>
+            <option value="obj">Export as OBJ</option>
+          </select>
+          <button id="exportScene" class="bg-purple-500 hover:bg-purple-600 text-white px-3 py-1 rounded shadow">
+            <i class="fas fa-download"></i> Export
+          </button>
+        </div>
+      </div>
     </div>
+    <!-- Three.js Canvas -->
+    <canvas id="editorCanvas"></canvas>
+    <!-- Script -->
+    <script>
+      let scene, camera, renderer, controls;
+      let raytraceOn = true; // state for raytrace mode
+      // Store original materials to toggle between modes
+      const originalMaterials = new Map();
+      // Initialize scene, camera, renderer
+      function init() {
+        const canvas = document.getElementById('editorCanvas');
+        renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setPixelRatio(window.devicePixelRatio);
+        renderer.setClearColor(0x222222);
+        scene = new THREE.Scene();
+        camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
+        camera.position.set(3, 3, 3);
+        scene.add(camera);
+        // Add a default ambient light
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+        scene.add(ambientLight);
+        // Add grid helper to orient the scene
+        const gridHelper = new THREE.GridHelper(10, 10);
+        scene.add(gridHelper);
+        // Add OrbitControls
+        controls = new THREE.OrbitControls(camera, renderer.domElement);
+        // Start render loop
+        animate();
+        // Window resize listener
+        window.addEventListener('resize', onWindowResize, false);
+      }
+      function onWindowResize() {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+      }
+      // Render loop
+      function animate() {
+        requestAnimationFrame(animate);
+        controls.update();
+        renderer.render(scene, camera);
+      }
+      // Toggle raytracing mode by switching materials.
+      function toggleRaytrace() {
+        raytraceOn = !raytraceOn;
+        scene.traverse((child) => {
+          if (child.isMesh) {
+            if (raytraceOn) {
+              // Store original material if not stored yet
+              if (!originalMaterials.has(child)) {
+                originalMaterials.set(child, child.material);
+              }
+              // Use a physical material to simulate raytraced appearance
+              child.material = new THREE.MeshPhysicalMaterial({
+                color: child.material.color ? child.material.color.getHex() : 0xffffff,
+                metalness: 0.5,
+                roughness: 0.1,
+                clearcoat: 1.0,
+                clearcoatRoughness: 0.1,
+              });
+            } else {
+              // revert to original material
+              if (originalMaterials.has(child)) {
+                child.material = originalMaterials.get(child);
+              }
+            }
+          }
+        });
+      }
+      // Add light to scene from the select dropdown
+      function addLight() {
+        const type = document.getElementById('lightType').value;
+        let light;
+        switch (type) {
+          case "ambient":
+            light = new THREE.AmbientLight(0xffffff, 0.5);
+            break;
+          case "point":
+            light = new THREE.PointLight(0xffffff, 1);
+            light.position.set(2, 2, 2);
+            break;
+          case "directional":
+            light = new THREE.DirectionalLight(0xffffff, 1);
+            light.position.set(5, 5, 5);
+            break;
+          default:
+            light = new THREE.AmbientLight(0xffffff, 0.5);
         }
+        scene.add(light);
+      }
+      // Handle file loading for STL and OBJ files
+      function handleFile(files) {
+        if (files.length === 0) return;
+        const file = files[0];
+        const reader = new FileReader();
+        reader.addEventListener("load", function (event) {
+          const contents = event.target.result;
+          let loader;
+          const extension = file.name.split('.').pop().toLowerCase();
+          if (extension === 'stl') {
+            loader = new THREE.STLLoader();
+            const geometry = loader.parse(contents);
+            const material = new THREE.MeshStandardMaterial({ color: 0x606060 });
+            const mesh = new THREE.Mesh(geometry, material);
+            mesh.name = file.name;
+            mesh.position.set(0, 0, 0);
+            scene.add(mesh);
+          } else if (extension === 'obj') {
+            loader = new THREE.OBJLoader();
+            const object = loader.parse(contents);
+            object.name = file.name;
+            scene.add(object);
+          } else {
+            alert("Unsupported file type. Please load an STL or OBJ file.");
+          }
+        }, false);
+        // Read file as appropriate (for STL use arraybuffer; for OBJ use text)
+        if (file.name.endsWith(".stl")) {
+          reader.readAsArrayBuffer(file);
+        } else {
+          reader.readAsText(file);
         }
+      }
+      // Export scene objects as STL or OBJ
+      function exportScene() {
+        const exportType = document.getElementById("exportType").value;
+        let exportedData;
+        if (exportType === "stl") {
+          const exporter = new THREE.STLExporter();
+          // Export only mesh objects (ignoring helpers)
+          const meshes = [];
+          scene.traverse((child) => {
+            if (child.isMesh) {
+              meshes.push(child);
+            }
+          });
+          exportedData = exporter.parse(meshes);
+          downloadFile(exportedData, "scene.stl", "application/sla");
+        } else if (exportType === "obj") {
+          const exporter = new THREE.OBJExporter();
+          exportedData = exporter.parse(scene);
+          downloadFile(exportedData, "scene.obj", "text/plain");
         }
+      }
+      // Utility to force download
+      function downloadFile(data, filename, type) {
+        const blob = new Blob([data], { type: type });
+        const link = document.createElement("a");
+        link.href = window.URL.createObjectURL(blob);
+        link.download = filename;
+        link.click();
+      }
+      // Event listeners
+      document.getElementById('toggleRaytrace').addEventListener('click', toggleRaytrace);
+      document.getElementById('addLight').addEventListener('click', addLight);
+      document.getElementById('fileInput').addEventListener('change', (e) => handleFile(e.target.files));
+      document.getElementById('exportScene').addEventListener('click', exportScene);
+      // Initialize the scene
+      init();
     </script>
+  </body>
 </html>