50 lines
1.6 KiB
HTML
50 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Three.js GLB Viewer</title>
|
|
<link rel="stylesheet" href="styles/main.css">
|
|
</head>
|
|
<body>
|
|
<div id="canvas-container"></div>
|
|
|
|
<!-- Debug UI -->
|
|
<div id="debug-ui">
|
|
<h3>Debug Controls</h3>
|
|
<div class="debug-item">
|
|
<label>
|
|
<input type="checkbox" id="orbit-controls-toggle">
|
|
Orbit Controls
|
|
</label>
|
|
</div>
|
|
<div class="debug-item">
|
|
<label>
|
|
<input type="checkbox" id="show-grid-toggle" checked>
|
|
Show Grid
|
|
</label>
|
|
</div>
|
|
<div class="debug-item">
|
|
<label for="file-input" class="file-label">Load GLB Model:</label>
|
|
<input type="file" id="file-input" accept=".glb,.gltf">
|
|
</div>
|
|
<div class="debug-item">
|
|
<span class="debug-label">Model Status:</span>
|
|
<span id="model-status">No model loaded</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Three.js CDN -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
|
|
|
<!-- OrbitControls -->
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
|
|
|
|
<!-- GLTFLoader -->
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
|
|
|
|
<!-- Your main script -->
|
|
<script src="src/main.js"></script>
|
|
</body>
|
|
</html>
|