84 lines
2.8 KiB
HTML
84 lines
2.8 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">
|
||
<div class="debug-header">
|
||
<h3>Debug Controls</h3>
|
||
<button id="minimize-btn">−</button>
|
||
</div>
|
||
<div id="debug-content">
|
||
<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>
|
||
<input type="checkbox" id="show-skeleton-toggle">
|
||
Show Skeleton
|
||
</label>
|
||
</div>
|
||
<div class="debug-item">
|
||
<label for="animation-select" class="asset-label">Select Animation:</label>
|
||
<select id="animation-select">
|
||
<option value="">-- No Animation --</option>
|
||
</select>
|
||
</div>
|
||
<div class="debug-item">
|
||
<label>
|
||
<input type="checkbox" id="play-animation-toggle">
|
||
Play Animation
|
||
</label>
|
||
</div>
|
||
<div class="debug-item">
|
||
<label for="asset-select" class="asset-label">Select Model:</label>
|
||
<select id="asset-select">
|
||
<option value="">-- No Model --</option>
|
||
</select>
|
||
</div>
|
||
<div class="debug-item">
|
||
<span class="debug-label">Model Status:</span>
|
||
<span id="model-status">No model loaded</span>
|
||
</div>
|
||
</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>
|
||
|
||
<!-- Manager Classes -->
|
||
<script src="src/sceneManager.js"></script>
|
||
<script src="src/cameraManager.js"></script>
|
||
<script src="src/rendererManager.js"></script>
|
||
<script src="src/controlsManager.js"></script>
|
||
|
||
<!-- Debug UI Controller -->
|
||
<script src="src/debugUI.js"></script>
|
||
|
||
<!-- Your main script -->
|
||
<script src="src/main.js"></script>
|
||
</body>
|
||
</html>
|