Spaces:

namelessai
/

STL-Editor

Running

File size: 36,720 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>3D STL & OBJ Editor v.0.0.5</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/STLLoader.min.js"></script>
  <!-- Added OBJLoader script -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/OBJLoader.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/exporters/STLExporter.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
  <style>
    /* Keep the render canvas full size */
    #renderCanvas {
      width: 100%;
      height: 100%;
      display: block;
    }
    .transform-controls {
      transition: all 0.3s ease;
    }
    .transform-controls:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .sidebar {
      transition: transform 0.3s ease;
    }
    .sidebar.collapsed {
      transform: translateX(-90%);
    }
    .model-list-item {
      transition: all 0.2s ease;
    }
    .model-list-item:hover {
      background-color: rgba(59, 130, 246, 0.1);
    }
    .tab-button {
      transition: all 0.2s ease;
    }
    .tab-button.active {
      border-bottom: 2px solid #3b82f6;
      color: #3b82f6;
    }
    .color-picker {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      width: 30px;
      height: 30px;
      border: none;
      cursor: pointer;
      border-radius: 50%;
    }
    .color-picker::-webkit-color-swatch {
      border-radius: 50%;
      border: 2px solid #fff;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    }
    .export-options {
      display: none;
      position: absolute;
      right: 10px;
      top: 40px;
      background: white;
      border-radius: 4px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      z-index: 100;
      padding: 8px;
      min-width: 200px;
    }
    .export-options.show {
      display: block;
    }
    .export-option {
      padding: 8px 12px;
      cursor: pointer;
      border-radius: 4px;
    }
    .export-option:hover {
      background-color: #f3f4f6;
    }
    /* New CSS for the transform handle */
    #transformHandle {
      width: 100%;
      height: 6px;
      background-color: #ccc;
      cursor: ns-resize;
      margin-bottom: 4px;
    }
    /* Make sure the transform controls have a default height and hidden overflow */
    #transformControls {
      height: 40px;
      overflow: hidden;
    }
  </style>
</head>
<body class="bg-gray-100 h-screen flex flex-col">
  <!-- Header -->
  <header class="bg-white shadow-sm py-3 px-4 flex items-center justify-between">
    <div class="flex items-center space-x-2">
      <i class="fas fa-cube text-blue-500 text-2xl"></i>
      <h1 class="text-xl font-bold text-gray-800">3D STL & OBJ Editor v.0.0.5 (Broken, fix is being worked on.)</h1>
    </div>
    <div class="flex space-x-4">
      <button id="toggleSidebar" class="p-2 rounded-full hover:bg-gray-200 transition">
        <i class="fas fa-bars text-gray-600"></i>
      </button>
    </div>
  </header>

  <div class="flex flex-1 overflow-hidden">
    <!-- Sidebar -->
    <div id="sidebar" class="sidebar w-64 bg-white shadow-md flex flex-col transition-all duration-300">
      <div class="p-4 border-b">
        <h2 class="font-semibold text-gray-700">Project</h2>
        <div class="mt-2 flex space-x-2">
          <button id="loadModelBtn" class="flex-1 bg-blue-500 hover:bg-blue-600 text-white py-2 px-3 rounded text-sm flex items-center justify-center">
            <i class="fas fa-folder-open mr-2"></i> Load Model
          </button>
          <!-- Updated accept attribute to support both .stl and .obj -->
          <input type="file" id="fileInput" accept=".stl,.obj" class="hidden" />
          <div class="relative">
            <button id="exportModelBtn" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-3 rounded text-sm flex items-center justify-center">
              <i class="fas fa-download mr-2"></i> Export
            </button>
            <div id="exportOptions" class="export-options">
              <div class="export-option" id="exportSelectedBtn">
                <i class="fas fa-cube mr-2"></i> Export Selected
              </div>
              <div class="export-option" id="exportAllBtn">
                <i class="fas fa-cubes mr-2"></i> Export All
              </div>
              <div class="border-t my-1"></div>
              <div class="export-option" id="exportSceneBtn">
                <i class="fas fa-scene mr-2"></i> Export Scene
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="flex border-b">
        <button id="modelsTab" class="tab-button flex-1 py-2 text-sm font-medium active">Models</button>
        <button id="settingsTab" class="tab-button flex-1 py-2 text-sm font-medium">Settings</button>
      </div>

      <div id="modelsPanel" class="flex-1 overflow-y-auto p-4">
        <div class="mb-4">
          <h3 class="text-sm font-medium text-gray-700 mb-2">Loaded Models</h3>
          <div id="modelList" class="space-y-2">
            <!-- Models will be added here dynamically -->
          </div>
        </div>
      </div>

      <div id="settingsPanel" class="hidden flex-1 overflow-y-auto p-4">
        <div class="mb-4">
          <h3 class="text-sm font-medium text-gray-700 mb-2">Scene Settings</h3>
          <div class="space-y-3">
            <div>
              <label class="block text-xs text-gray-500 mb-1">Background Color</label>
              <input type="color" id="bgColorPicker" class="color-picker" value="#f3f4f6" />
            </div>
            <div>
              <label class="block text-xs text-gray-500 mb-1">Grid Visibility</label>
              <div class="flex items-center">
                <input type="checkbox" id="gridToggle" class="mr-2" checked />
                <span class="text-sm">Show Grid</span>
              </div>
            </div>
          </div>
        </div>
        <div class="mb-4">
          <h3 class="text-sm font-medium text-gray-700 mb-2">Camera Controls</h3>
          <div class="space-y-3">
            <div>
              <label class="block text-xs text-gray-500 mb-1">Rotation Speed</label>
              <input type="range" id="rotationSpeed" min="0.1" max="2" step="0.1" value="1" class="w-full" />
            </div>
            <div>
              <label class="block text-xs text-gray-500 mb-1">Zoom Speed</label>
              <input type="range" id="zoomSpeed" min="0.1" max="2" step="0.1" value="1" class="w-full" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Main Content -->
    <div class="flex-1 flex flex-col">
      <!-- Toolbar -->
      <div class="bg-white border-b p-2 flex items-center justify-between">
        <div class="flex space-x-2">
          <button id="selectTool" class="p-2 rounded hover:bg-gray-200 text-blue-500">
            <i class="fas fa-mouse-pointer"></i>
          </button>
          <button id="moveTool" class="p-2 rounded hover:bg-gray-200">
            <i class="fas fa-arrows-alt"></i>
          </button>
          <button id="rotateTool" class="p-2 rounded hover:bg-gray-200">
            <i class="fas fa-sync-alt"></i>
          </button>
          <button id="scaleTool" class="p-2 rounded hover:bg-gray-200">
            <i class="fas fa-expand-alt"></i>
          </button>
        </div>
        <div class="flex space-x-2">
          <button id="resetViewBtn" class="p-2 rounded hover:bg-gray-200">
            <i class="fas fa-home"></i> Reset View
          </button>
        </div>
      </div>

      <!-- 3D Viewport -->
      <div id="viewportContainer" class="flex-1 relative">
        <div id="renderCanvas"></div>
        <div id="loadingOverlay" class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
          <div class="bg-white p-6 rounded-lg shadow-lg flex flex-col items-center">
            <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mb-4"></div>
            <p class="text-gray-700">Loading model...</p>
          </div>
        </div>
      </div>

      <!-- Transform Controls with draggable handle -->
      <div id="transformControls" class="bg-white border-t p-4 transform-controls hidden">
        <!-- Draggable handle -->
        <div id="transformHandle"></div>
        <h3 class="text-sm font-medium text-gray-700 mb-3">Transform</h3>
        <div class="grid grid-cols-3 gap-4">
          <div>
            <label class="block text-xs text-gray-500 mb-1">Position X</label>
            <input type="number" id="posX" class="w-full p-2 border rounded text-sm" step="0.1" />
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Position Y</label>
            <input type="number" id="posY" class="w-full p-2 border rounded text-sm" step="0.1" />
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Position Z</label>
            <input type="number" id="posZ" class="w-full p-2 border rounded text-sm" step="0.1" />
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Rotation X</label>
            <input type="number" id="rotX" class="w-full p-2 border rounded text-sm" step="1" />
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Rotation Y</label>
            <input type="number" id="rotY" class="w-full p-2 border rounded text-sm" step="1" />
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Rotation Z</label>
            <input type="number" id="rotZ" class="w-full p-2 border rounded text-sm" step="1" />
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Scale X</label>
            <input type="number" id="scaleX" class="w-full p-2 border rounded text-sm" value="1" step="0.1" />
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Scale Y</label>
            <input type="number" id="scaleY" class="w-full p-2 border rounded text-sm" value="1" step="0.1" />
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Scale Z</label>
            <input type="number" id="scaleZ" class="w-full p-2 border rounded text-sm" value="1" step="0.1" />
          </div>
        </div>
        <div class="mt-3 flex justify-between">
          <div>
            <label class="block text-xs text-gray-500 mb-1">Model Color</label>
            <input type="color" id="modelColorPicker" class="color-picker" value="#3b82f6" />
          </div>
          <button id="deleteModelBtn" class="bg-red-500 hover:bg-red-600 text-white py-1 px-3 rounded text-sm">
            <i class="fas fa-trash mr-1"></i> Delete
          </button>
        </div>
      </div>

      <!-- Status Bar -->
      <div class="bg-gray-800 text-gray-300 text-xs p-1 px-3 flex justify-between">
        <div>
          <span id="cameraPosition">Camera: (0, 0, 0)</span>
        </div>
        <div>
          <span id="fpsCounter">FPS: 0</span>
        </div>
        <div>
          <span id="selectedModelInfo">No model selected</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Main application
    document.addEventListener('DOMContentLoaded', function() {
      // UI Elements
      const toggleSidebarBtn = document.getElementById('toggleSidebar');
      const sidebar = document.getElementById('sidebar');
      const loadModelBtn = document.getElementById('loadModelBtn');
      const fileInput = document.getElementById('fileInput');
      const exportModelBtn = document.getElementById('exportModelBtn');
      const exportOptions = document.getElementById('exportOptions');
      const exportSelectedBtn = document.getElementById('exportSelectedBtn');
      const exportAllBtn = document.getElementById('exportAllBtn');
      const exportSceneBtn = document.getElementById('exportSceneBtn');
      const modelsTab = document.getElementById('modelsTab');
      const settingsTab = document.getElementById('settingsTab');
      const modelsPanel = document.getElementById('modelsPanel');
      const settingsPanel = document.getElementById('settingsPanel');
      const modelList = document.getElementById('modelList');
      const transformControls = document.getElementById('transformControls');
      const transformHandle = document.getElementById('transformHandle'); // New handle element
      const selectTool = document.getElementById('selectTool');
      const moveTool = document.getElementById('moveTool');
      const rotateTool = document.getElementById('rotateTool');
      const scaleTool = document.getElementById('scaleTool');
      const resetViewBtn = document.getElementById('resetViewBtn');
      const loadingOverlay = document.getElementById('loadingOverlay');
      const bgColorPicker = document.getElementById('bgColorPicker');
      const gridToggle = document.getElementById('gridToggle');
      const rotationSpeed = document.getElementById('rotationSpeed');
      const zoomSpeed = document.getElementById('zoomSpeed');
      const cameraPosition = document.getElementById('cameraPosition');
      const fpsCounter = document.getElementById('fpsCounter');
      const selectedModelInfo = document.getElementById('selectedModelInfo');
      
      // Transform controls elements
      const posX = document.getElementById('posX');
      const posY = document.getElementById('posY');
      const posZ = document.getElementById('posZ');
      const rotX = document.getElementById('rotX');
      const rotY = document.getElementById('rotY');
      const rotZ = document.getElementById('rotZ');
      const scaleX = document.getElementById('scaleX');
      const scaleY = document.getElementById('scaleY');
      const scaleZ = document.getElementById('scaleZ');
      const modelColorPicker = document.getElementById('modelColorPicker');
      const deleteModelBtn = document.getElementById('deleteModelBtn');
      
      // Three.js variables
      let scene, camera, renderer, controls, gridHelper;
      let stlLoader = new THREE.STLLoader();
      let stlExporter = new THREE.STLExporter();
      let selectedModel = null;
      let models = [];
      let lastTime = 0;
      let frameCount = 0;
      let fps = 0;
      
      // Get the viewport container element
      const viewportContainer = document.getElementById('viewportContainer');
      
      // Initialize the 3D scene
      function initScene() {
        // Create scene
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xf3f4f6);
        
        // Create camera
        camera = new THREE.PerspectiveCamera(75, viewportContainer.clientWidth / viewportContainer.clientHeight, 0.1, 1000);
        camera.position.set(0, 0, 50);
        
        // Create renderer
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(viewportContainer.clientWidth, viewportContainer.clientHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        document.getElementById('renderCanvas').appendChild(renderer.domElement);
        
        // Add lights
        const ambientLight = new THREE.AmbientLight(0x404040);
        scene.add(ambientLight);
        
        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(1, 1, 1);
        scene.add(directionalLight);
        
        // Add grid helper
        gridHelper = new THREE.GridHelper(100, 100);
        scene.add(gridHelper);
        
        // Add orbit controls
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;
        controls.rotateSpeed = 1.0;
        controls.zoomSpeed = 1.0;
        
        // Handle window resize
        window.addEventListener('resize', onWindowResize);
        
        // Start animation loop
        animate();
      }
      
      // Animation loop
      function animate() {
        requestAnimationFrame(animate);
        
        // Update controls
        controls.update();
        
        // Update camera position display
        updateCameraPosition();
        
        // Calculate FPS
        const now = performance.now();
        frameCount++;
        if (now >= lastTime + 1000) {
          fps = Math.round((frameCount * 1000) / (now - lastTime));
          fpsCounter.textContent = `FPS: ${fps}`;
          frameCount = 0;
          lastTime = now;
        }
        
        renderer.render(scene, camera);
      }
      
      // Handle window resize
      function onWindowResize() {
        camera.aspect = viewportContainer.clientWidth / viewportContainer.clientHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(viewportContainer.clientWidth, viewportContainer.clientHeight);
      }
      
      // Update camera position display
      function updateCameraPosition() {
        const pos = camera.position;
        cameraPosition.textContent = `Camera: (${pos.x.toFixed(1)}, ${pos.y.toFixed(1)}, ${pos.z.toFixed(1)})`;
      }
      
      // Load model (STL or OBJ)
      function loadModel(file) {
        loadingOverlay.classList.remove('hidden');
        const fileName = file.name.toLowerCase();
        const url = URL.createObjectURL(file);
        
        if (fileName.endsWith('.stl')) {
          stlLoader.load(
            url,
            function (geometry) {
              const material = new THREE.MeshPhongMaterial({
                color: 0x3b82f6,
                specular: 0x111111,
                shininess: 50,
                flatShading: true
              });
              
              const mesh = new THREE.Mesh(geometry, material);
              
              // Center the model
              geometry.computeBoundingBox();
              const boundingBox = geometry.boundingBox;
              const center = new THREE.Vector3();
              boundingBox.getCenter(center);
              mesh.position.sub(center);
              
              // Scale the model to a reasonable size
              const size = boundingBox.getSize(new THREE.Vector3());
              const maxDim = Math.max(size.x, size.y, size.z);
              const scale = 10 / maxDim;
              mesh.scale.set(scale, scale, scale);
              
              scene.add(mesh);
              
              const modelId = Date.now();
              models.push({
                id: modelId,
                name: file.name,
                mesh: mesh,
                originalColor: 0x3b82f6
              });
              
              addModelToList(modelId, file.name);
              // Automatically select the loaded model so the toolbar shows up
              selectModel(modelId);
              loadingOverlay.classList.add('hidden');
            },
            function (xhr) {
              console.log((xhr.loaded / xhr.total * 100) + '% loaded');
            },
            function (error) {
              console.error('Error loading STL file:', error);
              loadingOverlay.classList.add('hidden');
              alert('Error loading STL file. Please try another file.');
            }
          );
        } else if (fileName.endsWith('.obj')) {
          const objLoader = new THREE.OBJLoader();
          objLoader.load(
            url,
            function (object) {
              // Apply a default material to all mesh children
              object.traverse(function(child) {
                if (child instanceof THREE.Mesh) {
                  child.material = new THREE.MeshPhongMaterial({
                    color: 0x3b82f6,
                    specular: 0x111111,
                    shininess: 50,
                    flatShading: true
                  });
                }
              });
              // Center the model
              const boundingBox = new THREE.Box3().setFromObject(object);
              const center = new THREE.Vector3();
              boundingBox.getCenter(center);
              object.position.sub(center);
              
              // Scale the model to a reasonable size
              const size = boundingBox.getSize(new THREE.Vector3());
              const maxDim = Math.max(size.x, size.y, size.z);
              const scale = 10 / maxDim;
              object.scale.set(scale, scale, scale);
              
              scene.add(object);
              
              const modelId = Date.now();
              // Retrieve the original color (assumes at least one mesh child exists)
              let originalColor = 0x3b82f6;
              object.traverse(function(child) {
                if (child instanceof THREE.Mesh && child.material && child.material.color) {
                  originalColor = child.material.color.getHex();
                }
              });
              
              models.push({
                id: modelId,
                name: file.name,
                mesh: object,
                originalColor: originalColor
              });
              
              addModelToList(modelId, file.name);
              // Automatically select the loaded model so the toolbar shows up
              selectModel(modelId);
              loadingOverlay.classList.add('hidden');
            },
            function (xhr) {
              console.log((xhr.loaded / xhr.total * 100) + '% loaded');
            },
            function (error) {
              console.error('Error loading OBJ file:', error);
              loadingOverlay.classList.add('hidden');
              alert('Error loading OBJ file. Please try another file.');
            }
          );
        } else {
          loadingOverlay.classList.add('hidden');
          alert('Unsupported file type');
        }
      }
      
      // Add model to the UI list
      function addModelToList(id, name) {
        const listItem = document.createElement('div');
        listItem.className = 'model-list-item bg-gray-50 p-2 rounded cursor-pointer flex items-center justify-between';
        listItem.dataset.id = id;
        
        listItem.innerHTML = `
          <div class="flex items-center">
            <i class="fas fa-cube text-blue-500 mr-2"></i>
            <span class="text-sm truncate" style="max-width: 160px;">${name}</span>
          </div>
          <div class="flex items-center space-x-1">
            <button class="p-1 text-gray-500 hover:text-blue-500 model-visibility-btn">
              <i class="fas fa-eye"></i>
            </button>
          </div>
        `;
        
        listItem.addEventListener('click', () => selectModel(id));
        
        const visibilityBtn = listItem.querySelector('.model-visibility-btn');
        visibilityBtn.addEventListener('click', (e) => {
          e.stopPropagation();
          toggleModelVisibility(id);
        });
        
        modelList.appendChild(listItem);
      }
      
      // Select a model
      function selectModel(id) {
        const model = models.find(m => m.id === id);
        if (!model) return;
        
        // Deselect previous model
        if (selectedModel) {
          if (selectedModel.mesh.material && selectedModel.mesh.material.color)
            selectedModel.mesh.material.color.setHex(selectedModel.originalColor);
          else {
            selectedModel.mesh.traverse(child => {
              if (child instanceof THREE.Mesh && child.material && child.material.color)
                child.material.color.setHex(selectedModel.originalColor);
            });
          }
        }
        
        // Select new model
        selectedModel = model;
        if (model.mesh.material && model.mesh.material.color) {
          selectedModel.originalColor = model.mesh.material.color.getHex();
          model.mesh.material.color.setHex(0xff0000);
        } else {
          model.mesh.traverse(child => {
            if (child instanceof THREE.Mesh && child.material && child.material.color) {
              selectedModel.originalColor = child.material.color.getHex();
              child.material.color.setHex(0xff0000);
            }
          });
        }
        
        // Update UI
        updateTransformControls();
        transformControls.classList.remove('hidden');
        selectedModelInfo.textContent = `Selected: ${model.name}`;
        
        // Highlight in model list
        document.querySelectorAll('.model-list-item').forEach(item => {
          item.classList.remove('bg-blue-50', 'border-blue-200', 'border');
        });
        document.querySelector(`.model-list-item[data-id="${id}"]`).classList.add('bg-blue-50', 'border-blue-200', 'border');
      }
      
      // Toggle model visibility
      function toggleModelVisibility(id) {
        const model = models.find(m => m.id === id);
        if (!model) return;
        
        model.mesh.visible = !model.mesh.visible;
        
        const btn = document.querySelector(`.model-list-item[data-id="${id}"] .model-visibility-btn i`);
        if (model.mesh.visible) {
          btn.classList.remove('fa-eye-slash');
          btn.classList.add('fa-eye');
        } else {
          btn.classList.remove('fa-eye');
          btn.classList.add('fa-eye-slash');
        }
      }
      
      // Update transform controls with selected model values
      function updateTransformControls() {
        if (!selectedModel) return;
        
        const mesh = selectedModel.mesh;
        
        posX.value = mesh.position.x.toFixed(2);
        posY.value = mesh.position.y.toFixed(2);
        posZ.value = mesh.position.z.toFixed(2);
        
        rotX.value = THREE.MathUtils.radToDeg(mesh.rotation.x).toFixed(1);
        rotY.value = THREE.MathUtils.radToDeg(mesh.rotation.y).toFixed(1);
        rotZ.value = THREE.MathUtils.radToDeg(mesh.rotation.z).toFixed(1);
        
        scaleX.value = mesh.scale.x.toFixed(2);
        scaleY.value = mesh.scale.y.toFixed(2);
        scaleZ.value = mesh.scale.z.toFixed(2);
        
        let colorHex = selectedModel.originalColor;
        if (mesh.material && mesh.material.color)
          colorHex = mesh.material.color.getHex();
        else {
          mesh.traverse(child => {
            if (child instanceof THREE.Mesh && child.material && child.material.color)
              colorHex = child.material.color.getHex();
          });
        }
        modelColorPicker.value = `#${colorHex.toString(16).padStart(6, '0')}`;
      }
      
      // Apply transform changes to selected model
      function applyTransformChanges() {
        if (!selectedModel) return;
        
        const mesh = selectedModel.mesh;
        
        mesh.position.set(
          parseFloat(posX.value) || 0,
          parseFloat(posY.value) || 0,
          parseFloat(posZ.value) || 0
        );
        
        mesh.rotation.set(
          THREE.MathUtils.degToRad(parseFloat(rotX.value) || 0),
          THREE.MathUtils.degToRad(parseFloat(rotY.value) || 0),
          THREE.MathUtils.degToRad(parseFloat(rotZ.value) || 0)
        );
        
        mesh.scale.set(
          parseFloat(scaleX.value) || 1,
          parseFloat(scaleY.value) || 1,
          parseFloat(scaleZ.value) || 1
        );
      }
      
      // Delete selected model
      function deleteSelectedModel() {
        if (!selectedModel) return;
        
        scene.remove(selectedModel.mesh);
        models = models.filter(m => m.id !== selectedModel.id);
        
        const listItem = document.querySelector(`.model-list-item[data-id="${selectedModel.id}"]`);
        if (listItem) listItem.remove();
        
        selectedModel = null;
        transformControls.classList.add('hidden');
        selectedModelInfo.textContent = 'No model selected';
      }
      
      // Export functions
      function exportSTL(mesh, name) {
        const stlString = stlExporter.parse(mesh, { binary: true });
        const blob = new Blob([stlString], { type: 'application/octet-stream' });
        const url = URL.createObjectURL(blob);
        
        const link = document.createElement('a');
        link.href = url;
        link.download = name || 'model.stl';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        
        setTimeout(() => URL.revokeObjectURL(url), 100);
      }
      
      function exportSelectedModel() {
        if (!selectedModel) {
          alert('No model selected');
          return;
        }
        
        const mesh = selectedModel.mesh.clone();
        mesh.traverse(child => {
          if (child instanceof THREE.Mesh && child.material) {
            child.material = child.material.clone();
          }
        });
        
        exportSTL(mesh, selectedModel.name);
      }
      
      function exportAllModels() {
        if (models.length === 0) {
          alert('No models to export');
          return;
        }
        
        const group = new THREE.Group();
        
        models.forEach(model => {
          const mesh = model.mesh.clone();
          mesh.traverse(child => {
            if (child instanceof THREE.Mesh && child.material) {
              child.material = child.material.clone();
            }
          });
          group.add(mesh);
        });
        
        exportSTL(group, 'all_models.stl');
      }
      
      function exportScene() {
        const group = new THREE.Group();
        
        scene.children.forEach(child => {
          if (child instanceof THREE.Mesh && child.visible) {
            const mesh = child.clone();
            if (mesh.material) mesh.material = mesh.material.clone();
            group.add(mesh);
          }
        });
        
        if (group.children.length === 0) {
          alert('No visible objects to export');
          return;
        }
        
        exportSTL(group, 'scene.stl');
      }
      
      // Initialize UI event listeners
      function initUIListeners() {
        // Toggle sidebar
        toggleSidebarBtn.addEventListener('click', () => {
          sidebar.classList.toggle('collapsed');
          toggleSidebarBtn.innerHTML = sidebar.classList.contains('collapsed') ? 
            '<i class="fas fa-chevron-right"></i>' : '<i class="fas fa-bars"></i>';
        });
        
        // Load model button
        loadModelBtn.addEventListener('click', () => fileInput.click());
        
        // File input change
        fileInput.addEventListener('change', (e) => {
          if (e.target.files.length > 0) {
            loadModel(e.target.files[0]);
            fileInput.value = '';
          }
        });
        
        // Export model button
        exportModelBtn.addEventListener('click', (e) => {
          e.stopPropagation();
          exportOptions.classList.toggle('show');
        });
        
        // Export options
        exportSelectedBtn.addEventListener('click', exportSelectedModel);
        exportAllBtn.addEventListener('click', exportAllModels);
        exportSceneBtn.addEventListener('click', exportScene);
        
        document.addEventListener('click', (e) => {
          if (!exportModelBtn.contains(e.target) && !exportOptions.contains(e.target)) {
            exportOptions.classList.remove('show');
          }
        });
        
        // Tab switching
        modelsTab.addEventListener('click', () => {
          modelsTab.classList.add('active');
          settingsTab.classList.remove('active');
          modelsPanel.classList.remove('hidden');
          settingsPanel.classList.add('hidden');
        });
        
        settingsTab.addEventListener('click', () => {
          settingsTab.classList.add('active');
          modelsTab.classList.remove('active');
          settingsPanel.classList.remove('hidden');
          modelsPanel.classList.add('hidden');
        });
        
        // Tool buttons
        selectTool.addEventListener('click', () => {
          selectTool.classList.add('text-blue-500');
          moveTool.classList.remove('text-blue-500');
          rotateTool.classList.remove('text-blue-500');
          scaleTool.classList.remove('text-blue-500');
        });
        
        moveTool.addEventListener('click', () => {
          moveTool.classList.add('text-blue-500');
          selectTool.classList.remove('text-blue-500');
          rotateTool.classList.remove('text-blue-500');
          scaleTool.classList.remove('text-blue-500');
        });
        
        rotateTool.addEventListener('click', () => {
          rotateTool.classList.add('text-blue-500');
          selectTool.classList.remove('text-blue-500');
          moveTool.classList.remove('text-blue-500');
          scaleTool.classList.remove('text-blue-500');
        });
        
        scaleTool.addEventListener('click', () => {
          scaleTool.classList.add('text-blue-500');
          selectTool.classList.remove('text-blue-500');
          moveTool.classList.remove('text-blue-500');
          rotateTool.classList.remove('text-blue-500');
        });
        
        // Reset view
        resetViewBtn.addEventListener('click', () => {
          camera.position.set(0, 0, 50);
          camera.lookAt(0, 0, 0);
          controls.reset();
        });
        
        // Transform controls
        [posX, posY, posZ, rotX, rotY, rotZ, scaleX, scaleY, scaleZ].forEach(input => {
          input.addEventListener('change', applyTransformChanges);
        });
        
        // Model color picker
        modelColorPicker.addEventListener('input', (e) => {
          if (!selectedModel) return;
          const color = new THREE.Color(e.target.value);
          if (selectedModel.mesh.material && selectedModel.mesh.material.color) {
            selectedModel.mesh.material.color.copy(color);
          } else {
            selectedModel.mesh.traverse(child => {
              if (child instanceof THREE.Mesh && child.material && child.material.color)
                child.material.color.copy(color);
            });
          }
          selectedModel.originalColor = color.getHex();
        });
        
        // Delete model button
        deleteModelBtn.addEventListener('click', deleteSelectedModel);
        
        // Background color picker
        bgColorPicker.addEventListener('input', (e) => {
          scene.background = new THREE.Color(e.target.value);
        });
        
        // Grid toggle
        gridToggle.addEventListener('change', (e) => {
          gridHelper.visible = e.target.checked;
        });
        
        // Rotation and zoom speed
        rotationSpeed.addEventListener('input', (e) => {
          controls.rotateSpeed = parseFloat(e.target.value);
        });
        
        zoomSpeed.addEventListener('input', (e) => {
          controls.zoomSpeed = parseFloat(e.target.value);
        });
        
        // Draggable Transform Controls Handle
        transformHandle.addEventListener('mousedown', function(e) {
          let startY = e.clientY;
          let initialHeight = transformControls.clientHeight;
          function onMouseMove(e) {
            // Calculate how much the pointer has moved upward (dragging upward increases height)
            let delta = startY - e.clientY;
            let newHeight = initialHeight + delta;
            // Clamp the height between 40px and half of the viewport height
            newHeight = Math.max(newHeight, 40);
            newHeight = Math.min(newHeight, window.innerHeight * 0.5);
            transformControls.style.height = newHeight + 'px';
          }
          function onMouseUp() {
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
          }
          document.addEventListener('mousemove', onMouseMove);
          document.addEventListener('mouseup', onMouseUp);
        });
      }
      
      // Initialize everything
      function init() {
        initScene();
        initUIListeners();
        // Set initial tool selection
        selectTool.classList.add('text-blue-500');
      }
      
      // Start the application
      init();
    });
  </script>
</body>
</html>