Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>3D Model Slicer with Live 2D View</title> | |
| <link rel="stylesheet" href="assets/css/styles.css"> | |
| <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.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>3D Model Slicer</h1> | |
| <p class="built-with">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p> | |
| </header> | |
| <div class="main-content"> | |
| <div class="view-section"> | |
| <div class="view-header"> | |
| <h2>3D Model View</h2> | |
| </div> | |
| <div class="controls"> | |
| <div class="control-group"> | |
| <label for="rotationSlider">Manual Rotation:</label> | |
| <input type="range" id="rotationSlider" min="-180" max="180" value="0" step="1"> | |
| <span id="rotationValue">0°</span> | |
| </div> | |
| <div class="control-group"> | |
| <label for="autoRotate">Auto Rotate:</label> | |
| <input type="checkbox" id="autoRotate"> | |
| </div> | |
| <div class="control-group"> | |
| <label for="cuttingPlane">Cutting Plane Position:</label> | |
| <input type="range" id="cuttingPlane" min="-50" max="50" value="0" step="0.5"> | |
| <span id="planeValue">0</span> | |
| </div> | |
| </div> | |
| <div id="canvas3d"></div> | |
| </div> | |
| <div class="view-section"> | |
| <div class="view-header"> | |
| <h2>2D Slice View</h2> | |
| <div class="slice-info"> | |
| <span id="sliceInfo">Z = 0.0</span> | |
| </div> | |
| </div> | |
| <canvas id="sliceCanvas"></canvas> | |
| <div class="controls"> | |
| <div class="control-group"> | |
| <button id="exportBtn" class="export-btn">Export Scan as MP4</button> | |
| </div> | |
| <div class="control-group"> | |
| <label for="scanSpeed">Scan Speed:</label> | |
| <input type="range" id="scanSpeed" min="1" max="10" value="5" step="0.5"> | |
| <span id="speedValue">5x</span> | |
| </div> | |
| <div class="control-group"> | |
| <label for="sliceResolution">Resolution:</label> | |
| <select id="sliceResolution"> | |
| <option value="256">256x256</option> | |
| <option value="512" selected>512x512</option> | |
| <option value="768">768x768</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div id="exportProgress" class="progress-bar hidden"> | |
| <div class="progress-fill"></div> | |
| <span class="progress-text">0%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="assets/js/main.js"></script> | |
| </body> | |
| </html> |