Spaces:

ThorAILabs
/

SceneEditor

Running

App Files Files Community

ThorAILabs commited on Apr 14, 2025

Commit

3607024

verified ·

1 Parent(s): 1680cc8

refactor

Browse files

Files changed (1) hide show

index.html +214 -169

index.html CHANGED Viewed

@@ -1,179 +1,224 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <title>3D Scene Editor with Raytracing</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <!-- TailWind CSS -->
-  <script src="https://cdn.tailwindcss.com"></script>
-  <!-- FontAwesome -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
 </head>
 <body class="bg-gray-900 text-white">
-  <!-- Header -->
-  <header class="p-4 flex items-center space-x-4">
-    <i class="fas fa-cube text-3xl"></i>
-    <h1 class="text-3xl font-bold">3D Scene Editor with Raytracing</h1>
-  </header>
-  <!-- Main Layout -->
-  <div class="flex flex-col md:flex-row">
-    <!-- Sidebar Controls -->
-    <aside class="w-full md:w-1/4 p-4 space-y-4 bg-gray-800">
-      <h2 class="text-xl font-semibold">Controls</h2>
-      <button id="toggleRaytrace" class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 rounded">
-        <i class="fas fa-bolt"></i> Toggle Raytracing
-      </button>
-      <label for="sceneInput" class="block">
-        <span class="text-sm font-medium">Load Scene JSON:</span>
-        <input id="sceneInput" type="file" accept=".json" class="mt-1 block w-full p-2 text-gray-800 rounded"/>
-      </label>
-      <div id="parserOutput" class="text-sm text-green-400"></div>
-    </aside>
-    <!-- Canvas Container -->
-    <main class="flex-1 relative">
-      <canvas id="sceneCanvas" class="w-full h-screen"></canvas>
-    </main>
-  </div>
-  <!-- Scripts -->
-  <!-- Three.js Core -->
-  <script src="https://unpkg.com/three@0.150.0/build/three.min.js"></script>
-  <!-- OrbitControls -->
-  <script src="https://unpkg.com/three@0.150.0/examples/js/controls/OrbitControls.js"></script>
-  <!-- dat.GUI for interactive controls -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
-  <!-- Main Application Script -->
-  <script type="module">
-    // Importing OBJLoader as an example of a parser library for 3D assets
-    import { OBJLoader } from 'https://unpkg.com/three@0.150.0/examples/jsm/loaders/OBJLoader.js';
-    let scene, camera, renderer, controls, gui;
-    let raytraceMode = false;
-    const canvas = document.getElementById('sceneCanvas');
-    // Initialization function to set up scene, camera, renderer, and controls.
-    function init() {
-      // Create scene
-      scene = new THREE.Scene();
-      scene.background = new THREE.Color(0x222222);
-      // Set up camera
-      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-      camera.position.set(0, 2, 5);
-      // Renderer setup with antialiasing
-      renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
-      renderer.setSize(window.innerWidth, window.innerHeight);
-      document.body.appendChild(renderer.domElement);
-      // OrbitControls for interactive scene navigation
-      controls = new THREE.OrbitControls(camera, renderer.domElement);
-      // Lighting: Ambient and directional for solid shading
-      const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-      scene.add(ambientLight);
-      const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
-      directionalLight.position.set(5, 10, 7.5);
-      scene.add(directionalLight);
-      // Add a sample cube
-      const cubeGeometry = new THREE.BoxGeometry();
-      const cubeMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
-      const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
-      cube.name = "Cube";
-      scene.add(cube);
-      // Add a sample plane as the floor
-      const planeGeometry = new THREE.PlaneGeometry(10, 10);
-      const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x808080 });
-      const plane = new THREE.Mesh(planeGeometry, planeMaterial);
-      plane.rotation.x = -Math.PI / 2;
-      plane.name = "Plane";
-      scene.add(plane);
-      // Setup dat.GUI controls within a styled container
-      gui = new dat.GUI({ autoPlace: false, width: 300 });
-      const guiContainer = document.createElement('div');
-      guiContainer.classList.add('absolute', 'top-4', 'right-4', 'bg-gray-800', 'p-4', 'rounded');
-      guiContainer.appendChild(gui.domElement);
-      document.body.appendChild(guiContainer);
-      // dat.GUI folder for cube controls
-      const cubeFolder = gui.addFolder('Cube Transform');
-      cubeFolder.add(cube.position, 'x', -5, 5, 0.1).name('Position X');
-      cubeFolder.add(cube.position, 'y', -5, 5, 0.1).name('Position Y');
-      cubeFolder.add(cube.position, 'z', -5, 5, 0.1).name('Position Z');
-      cubeFolder.open();
-      animate();
-    }
-    // Animation loop for rendering the scene continuously.
-    function animate() {
-      requestAnimationFrame(animate);
-      controls.update();
-      if (!raytraceMode) {
-        renderer.render(scene, camera);
-      } else {
-        // Here you would integrate a proper raytracing shader or postprocessing pass.
-        // For demonstration, we simulate raytracing by applying a simple overlay effect.
-        renderer.render(scene, camera);
-        // Additional raytracing effects can be added here.
-      }
-    }
-    // Adjust canvas size on window resize
-    window.addEventListener('resize', () => {
-      camera.aspect = window.innerWidth / window.innerHeight;
-      camera.updateProjectionMatrix();
-      renderer.setSize(window.innerWidth, window.innerHeight);
-    });
-    // Toggle raytracing mode and display a simple alert (simulation).
-    document.getElementById('toggleRaytrace').addEventListener('click', () => {
-      raytraceMode = !raytraceMode;
-      alert('Raytracing mode ' + (raytraceMode ? 'enabled' : 'disabled') + '. (Simulation mode)');
-    });
-    // Basic scene parser: Load a JSON file and add objects to the scene.
-    // Expected format:
-    // {
-    //   "objects": [
-    //     { "type": "sphere", "radius": 1, "color": 16711680, "position": {"x": 0, "y": 1, "z": 0} }
-    //   ]
-    // }
-    document.getElementById('sceneInput').addEventListener('change', (event) => {
-      const file = event.target.files[0];
-      if (!file) return;
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        try {
-          const sceneData = JSON.parse(e.target.result);
-          document.getElementById('parserOutput').textContent = 'Scene loaded successfully!';
-          if (Array.isArray(sceneData.objects)) {
-            sceneData.objects.forEach(obj => {
-              if (obj.type === 'sphere') {
-                const sphereGeo = new THREE.SphereGeometry(obj.radius || 1, 32, 32);
-                const sphereMat = new THREE.MeshStandardMaterial({ color: obj.color || 0xff0000 });
-                const sphere = new THREE.Mesh(sphereGeo, sphereMat);
-                sphere.position.set(obj.position?.x || 0, obj.position?.y || 0, obj.position?.z || 0);
-                scene.add(sphere);
-              }
-              // Extend here with other object types and parsers as needed.
             });
-          }
-        } catch (error) {
-          document.getElementById('parserOutput').textContent = 'Error parsing scene file!';
-        }
-      };
-      reader.readAsText(file);
     });
-    // Initialize the 3D scene.
-    init();
-  </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <title>3D Scene Editor with Raytracing & Model Support</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/controls/OrbitControls.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/jsm/loaders/OBJLoader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/jsm/loaders/STLLoader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/jsm/exporters/STLExporter.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/jsm/exporters/OBJExporter.js"></script>
+    <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">
 </head>
 <body class="bg-gray-900 text-white">
+    <div class="flex h-screen">
+        <!-- Sidebar -->
+        <div class="w-64 bg-gray-800 p-4 space-y-4">
+            <h2 class="text-xl font-bold mb-4">Scene Tools</h2>
+            <div class="space-y-2">
+                <select id="shapeType" class="w-full bg-gray-700 rounded p-2">
+                    <option value="sphere">Sphere</option>
+                    <option value="cube">Cube</option>
+                    <option value="torus">Torus</option>
+                </select>
+                <input type="color" id="objectColor" class="w-full h-10">
+                <button onclick="addObject()" class="w-full bg-blue-600 hover:bg-blue-700 p-2 rounded">
+                    <i class="fas fa-plus mr-2"></i>Add Object
+                </button>
+                <button onclick="raytraceScene()" class="w-full bg-purple-600 hover:bg-purple-700 p-2 rounded">
+                    <i class="fas fa-magic mr-2"></i>Raytrace
+                </button>
+                <!-- File Import Section -->
+                <div class="border-t pt-4">
+                    <input type="file" id="modelInput" accept=".stl,.obj" class="hidden"/>
+                    <label for="modelInput" class="w-full bg-green-600 hover:bg-green-700 p-2 rounded block text-center cursor-pointer">
+                        <i class="fas fa-file-import mr-2"></i>Import Model
+                    </label>
+                    <select id="exportFormat" class="w-full bg-gray-700 rounded p-2 mt-2">
+                        <option value="stl">STL</option>
+                        <option value="obj">OBJ</option>
+                    </select>
+                    <button onclick="exportScene()" class="w-full bg-orange-600 hover:bg-orange-700 p-2 rounded">
+                        <i class="fas fa-file-export mr-2"></i>Export Scene
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Main View -->
+        <div class="flex-1 relative">
+            <canvas id="sceneCanvas" class="w-full h-full"></canvas>
+            <!-- Selected Object Controls -->
+            <div id="objectControls" class="absolute top-4 right-4 bg-gray-800 p-4 rounded-lg hidden">
+                <button onclick="deleteObject()" class="bg-red-600 hover:bg-red-700 p-2 rounded">
+                    <i class="fas fa-trash mr-2"></i>Delete
+                </button>
+            </div>
+        </div>
+    </div>
+<script>
+let scene, camera, renderer, controls;
+let selectedObject = null;
+// Initialize Three.js Scene
+function initScene() {
+    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.setClearColor(0x1a1a1a);
+    document.getElementById('sceneCanvas').appendChild(renderer.domElement);
+    // Lighting setup
+    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);
+    camera.position.z = 5;
+    controls = new THREE.OrbitControls(camera, renderer.domElement);
+    // Event listeners
+    renderer.domElement.addEventListener('click', onCanvasClick);
+    window.addEventListener('resize', onWindowResize);
+}
+// Model Import Handler
+document.getElementById('modelInput').addEventListener('change', (e) => {
+    const file = e.target.files;
+    const reader = new FileReader();
+    reader.onload = (event) => {
+        const loader = file.name.endsWith('.stl') ?
+            new THREE.STLLoader() : new THREE.OBJLoader();
+        loader.load(event.target.result, (object) => {
+            object.traverse(child => {
+                if (child.isMesh) {
+                    child.material = new THREE.MeshPhongMaterial({
+                        color: Math.random() * 0xffffff,
+                        shininess: 100
+                    });
+                    child.position.set(
+                        (Math.random() - 0.5) * 5,
+                        (Math.random() - 0.5) * 5,
+                        (Math.random() - 0.5) * 5
+                    );
+                }
             });
+            scene.add(object);
+        });
+    };
+    reader.readAsDataURL(file);
+});
+// Scene Export Handler
+function exportScene() {
+    const format = document.getElementById('exportFormat').value;
+    const exporter = format === 'stl' ?
+        new THREE.STLExporter() : 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.${format}`;
+    link.click();
+}
+// Object Management
+function addObject() {
+    const geometryType = document.getElementById('shapeType').value;
+    const color = document.getElementById('objectColor').value;
+    let geometry;
+    switch(geometryType) {
+        case 'sphere': geometry = new THREE.SphereGeometry(1, 32, 32); break;
+        case 'cube': geometry = new THREE.BoxGeometry(1, 1, 1); break;
+        case 'torus': geometry = new THREE.TorusGeometry(1, 0.4, 16, 100); break;
+    }
+    const material = new THREE.MeshPhongMaterial({
+        color: color,
+        shininess: 100
     });
+    const mesh = new THREE.Mesh(geometry, material);
+    mesh.position.set(
+        (Math.random() - 0.5) * 5,
+        (Math.random() - 0.5) * 5,
+        (Math.random() - 0.5) * 5
+    );
+    scene.add(mesh);
+}
+// Raytracing Functionality
+function raytraceScene() {
+    const raycaster = new THREE.Raycaster();
+    const sceneBoundingBox = new THREE.Box3().setFromObject(scene);
+    // Implementation placeholder for actual raytracing
+    console.log("Raytracing initiated with scene bounds:", sceneBoundingBox);
+}
+// Event Handlers
+function onCanvasClick(event) {
+    const raycaster = new THREE.Raycaster();
+    const mouse = new THREE.Vector2();
+    mouse.x = (event.clientX / renderer.domElement.width) * 2 - 1;
+    mouse.y = -(event.clientY / renderer.domElement.height) * 2 + 1;
+    raycaster.setFromCamera(mouse, camera);
+    const intersects = raycaster.intersectObjects(scene.children);
+    if(intersects.length > 0) {
+        selectedObject = intersects.object;
+        document.getElementById('objectControls').classList.remove('hidden');
+    } else {
+        selectedObject = null;
+        document.getElementById('objectControls').classList.add('hidden');
+    }
+}
+function deleteObject() {
+    if(selectedObject) {
+        scene.remove(selectedObject);
+        selectedObject = null;
+        document.getElementById('objectControls').classList.add('hidden');
+    }
+}
+function onWindowResize() {
+    camera.aspect = (window.innerWidth - 256) / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth - 256, window.innerHeight);
+}
+// Animation Loop
+function animate() {
+    requestAnimationFrame(animate);
+    controls.update();
+    renderer.render(scene, camera);
+}
+// Initialize Application
+initScene();
+animate();
+</script>
 </body>
 </html>