Spaces:

ThorAILabs
/

SceneEditor

Running

App Files Files Community

ThorAILabs commited on Apr 14, 2025

Commit

acf2d73

verified ·

1 Parent(s): 3607024

refactor again

Browse files

Files changed (1) hide show

index.html +209 -195

index.html CHANGED Viewed

@@ -2,223 +2,237 @@
 <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>

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