Spaces:

ThorAILabs
/

SceneEditor

Running

App Files Files Community

ThorAILabs commited on Apr 14, 2025

Commit

1680cc8

verified ·

1 Parent(s): 3677c33

Update index.html

Browse files

Files changed (1) hide show

index.html +179 -19

index.html CHANGED Viewed

@@ -1,19 +1,179 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>