Spaces:

ThorAILabs
/

SceneEditor

Running

App Files Files Community

ThorAILabs commited on Apr 14, 2025

Commit

32ce8fe

verified ·

1 Parent(s): 4a7eadc

add material handling

Browse files

Files changed (1) hide show

index.html +170 -16

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <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>
@@ -11,11 +11,12 @@
     <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()"
@@ -51,35 +52,100 @@
                     <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();
 }
@@ -87,14 +153,29 @@ 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);
@@ -133,22 +214,93 @@ function addLight(type) {
     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);
@@ -156,12 +308,14 @@ function saveAs(blob, 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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3D Scene Editor with Raytracing & Materials</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/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>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
 </head>
 <body class="bg-gray-900">
     <div class="flex h-screen">
         <!-- Sidebar -->
+        <div class="w-80 bg-gray-800 p-4 space-y-4 overflow-y-auto">
             <div class="space-y-2">
                 <input type="file" id="file-input" class="hidden" accept=".stl,.obj">
                 <button onclick="document.getElementById('file-input').click()"
                     <i class="fas fa-sun mr-2"></i>Add Directional Light
                 </button>
             </div>
+            <div class="border-t border-gray-700 pt-4">
+                <h3 class="text-white mb-2">Materials</h3>
+                <div class="mb-4">
+                    <label class="text-gray-300 block mb-2">Material Type</label>
+                    <select id="material-type" class="w-full bg-gray-700 text-white rounded p-2"
+                            onchange="changeMaterialType(this.value)">
+                        <option value="MeshStandardMaterial">Standard</option>
+                        <option value="MeshPhongMaterial">Phong</option>
+                        <option value="MeshBasicMaterial">Basic</option>
+                        <option value="MeshMatcapMaterial">Matcap</option>
+                    </select>
+                </div>
+                <div class="space-y-2">
+                    <input type="file" id="albedo-map" class="hidden" accept="image/*">
+                    <button onclick="document.getElementById('albedo-map').click()"
+                            class="w-full bg-gray-700 hover:bg-gray-600 text-white p-2 rounded-lg">
+                        <i class="fas fa-image mr-2"></i>Albedo Map
+                    </button>
+                    <input type="file" id="normal-map" class="hidden" accept="image/*">
+                    <button onclick="document.getElementById('normal-map').click()"
+                            class="w-full bg-gray-700 hover:bg-gray-600 text-white p-2 rounded-lg">
+                        <i class="fas fa-wave-square mr-2"></i>Normal Map
+                    </button>
+                    <input type="file" id="roughness-map" class="hidden" accept="image/*">
+                    <button onclick="document.getElementById('roughness-map').click()"
+                            class="w-full bg-gray-700 hover:bg-gray-600 text-white p-2 rounded-lg">
+                        <i class="fas fa-sun mr-2"></i>Roughness Map
+                    </button>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 pt-4">
+                <h3 class="text-white mb-2">Selected Object</h3>
+                <div id="selected-object-info" class="text-gray-400 text-sm">
+                    Click an object to select
+                </div>
+            </div>
         </div>
         <!-- Main Viewport -->
+        <div id="viewport" class="flex-1 relative">
+            <div id="loading-overlay" class="absolute top-0 left-0 w-full h-full bg-gray-900 bg-opacity-50 hidden items-center justify-center">
+                <div class="text-white text-2xl"><i class="fas fa-spinner fa-spin"></i> Loading...</div>
+            </div>
+        </div>
     </div>
 <script>
 let scene, camera, renderer, raytracingEnabled = true;
 let objects = [];
+let selectedObject = null;
+const textureLoader = new THREE.TextureLoader();
+let controls;
 function init() {
     // Scene setup
     scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x1a1a1a);
     camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
     renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setSize(window.innerWidth-320, window.innerHeight);
+    renderer.shadowMap.enabled = true;
+    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
     document.getElementById('viewport').appendChild(renderer.domElement);
+    // Lighting
     const ambientLight = new THREE.AmbientLight(0x404040);
     scene.add(ambientLight);
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+    directionalLight.position.set(5, 5, 5);
+    directionalLight.castShadow = true;
+    scene.add(directionalLight);
+    // Camera and controls
+    camera.position.z = 8;
+    controls = new THREE.OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.05;
+    // Event listeners
     document.getElementById('file-input').addEventListener('change', handleFileUpload);
+    renderer.domElement.addEventListener('click', onCanvasClick, false);
+    // Texture input handlers
+    document.getElementById('albedo-map').addEventListener('change', e => loadTexture(e, 'map'));
+    document.getElementById('normal-map').addEventListener('change', e => loadTexture(e, 'normalMap'));
+    document.getElementById('roughness-map').addEventListener('change', e => loadTexture(e, 'roughnessMap'));
     animate();
 }
     const file = event.target.files[0];
     const reader = new FileReader();
+    showLoading(true);
     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);
+        model.traverse(child => {
+            if (child.isMesh) {
+                child.material = new THREE.MeshStandardMaterial({
+                    color: 0x888888,
+                    metalness: 0.2,
+                    roughness: 0.8
+                });
+                child.castShadow = true;
+                child.receiveShadow = true;
+            }
+        });
         scene.add(model);
         objects.push(model);
+        showLoading(false);
     };
     reader.readAsArrayBuffer(file);
     if (type === 'point') {
         light = new THREE.PointLight(0xffffff, 1, 100);
         light.position.set(5, 5, 5);
+        light.castShadow = true;
     } else {
         light = new THREE.DirectionalLight(0xffffff, 1);
         light.position.set(5, 5, 5);
+        light.castShadow = true;
     }
     scene.add(light);
 }
+function changeMaterialType(type) {
+    if (!selectedObject) return;
+    const currentMaterial = selectedObject.material;
+    const newMaterial = new THREE[type]({
+        color: currentMaterial?.color || 0xffffff,
+        map: currentMaterial?.map,
+        normalMap: currentMaterial?.normalMap,
+        roughnessMap: currentMaterial?.roughnessMap,
+        metalness: 0.5,
+        roughness: 0.5
+    });
+    if (currentMaterial) currentMaterial.dispose();
+    selectedObject.material = newMaterial;
+    selectedObject.material.needsUpdate = true;
+}
+async function loadTexture(event, mapType) {
+    if (!selectedObject) return;
+    const file = event.target.files[0];
+    if (!file) return;
+    showLoading(true);
+    try {
+        const texture = await textureLoader.loadAsync(URL.createObjectURL(file));
+        texture.wrapS = THREE.RepeatWrapping;
+        texture.wrapT = THREE.RepeatWrapping;
+        selectedObject.material[mapType] = texture;
+        selectedObject.material.needsUpdate = true;
+    } catch (error) {
+        console.error('Error loading texture:', error);
+    }
+    showLoading(false);
+}
+function onCanvasClick(event) {
+    const rect = renderer.domElement.getBoundingClientRect();
+    const mouse = new THREE.Vector2(
+        ((event.clientX - rect.left) / rect.width) * 2 - 1,
+        -((event.clientY - rect.top) / rect.height) * 2 + 1
+    );
+    const raycaster = new THREE.Raycaster();
+    raycaster.setFromCamera(mouse, camera);
+    const intersects = raycaster.intersectObjects(scene.children, true);
+    if (intersects.length > 0) {
+        selectedObject = intersects[0].object;
+        updateSelectedObjectInfo();
+    }
+}
+function updateSelectedObjectInfo() {
+    const infoDiv = document.getElementById('selected-object-info');
+    if (!selectedObject) return;
+    infoDiv.innerHTML = `
+        <div class="truncate">Type: ${selectedObject.type}</div>
+        <div>Material: ${selectedObject.material.type}</div>
+        <div>Position: ${selectedObject.position.x.toFixed(2)},
+                      ${selectedObject.position.y.toFixed(2)},
+                      ${selectedObject.position.z.toFixed(2)}</div>
+    `;
+}
+function showLoading(show) {
+    document.getElementById('loading-overlay').style.display = show ? 'flex' : 'none';
+}
 function animate() {
     requestAnimationFrame(animate);
+    controls.update();
     renderer.render(scene, camera);
 }
 function saveAs(blob, filename) {
     const link = document.createElement('a');
     link.href = URL.createObjectURL(blob);
     link.click();
 }
 window.addEventListener('resize', () => {
+    camera.aspect = (window.innerWidth-320) / window.innerHeight;
     camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth-320, window.innerHeight);
 });
+// Initialize the application
+init();
 </script>
 </body>
 </html>