| <!DOCTYPE html> |
| <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/three@0.128.0/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> |
