Spaces:

ThorAILabs
/

SceneEditor

Running

App Files Files Community

ThorAILabs commited on Apr 14, 2025

Commit

4a7eadc

verified ·

1 Parent(s): 04fb0ab

Update index.html

Browse files

Files changed (1) hide show

index.html +157 -242

index.html CHANGED Viewed

@@ -1,252 +1,167 @@
 <!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>

 <!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>
     <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>
+</head>
+<body class="bg-gray-900">
+    <div class="flex h-screen">
+        <!-- Sidebar -->
+        <div class="w-64 bg-gray-800 p-4 space-y-4">
+            <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>
+        <!-- Main Viewport -->
+        <div id="viewport" class="flex-1"></div>
     </div>
+<script>
+let scene, camera, renderer, raytracingEnabled = true;
+let objects = [];
+function init() {
+    // 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);
+    document.getElementById('viewport').appendChild(renderer.domElement);
+    // Basic lighting
+    const ambientLight = new THREE.AmbientLight(0x404040);
+    scene.add(ambientLight);
+    // Camera position
+    camera.position.z = 5;
+    // File input handler
+    document.getElementById('file-input').addEventListener('change', handleFileUpload);
+    // Animation loop
+    animate();
+}
+function handleFileUpload(event) {
+    const file = event.target.files[0];
+    const reader = new FileReader();
+    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);
+        scene.add(model);
+        objects.push(model);
+    };
+    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);
+    } else {
+        light = new THREE.DirectionalLight(0xffffff, 1);
+        light.position.set(5, 5, 5);
+    }
+    scene.add(light);
+}
+function animate() {
+    requestAnimationFrame(animate);
+    renderer.render(scene, camera);
+}
+// Start the application
+init();
+// Helper function to save files
+function saveAs(blob, filename) {
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = filename;
+    link.click();
+}
+// Window resize handler
+window.addEventListener('resize', () => {
+    camera.aspect = (window.innerWidth-256) / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth-256, window.innerHeight);
+});
+</script>
+</body>
 </html>