|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>3D ASCII Model Viewer</title> |
|
|
<meta name="description" content="Interactive 3D ASCII art model viewer with customizable settings"> |
|
|
<link rel="stylesheet" href="assets/css/styles.css"> |
|
|
</head> |
|
|
<body> |
|
|
<header> |
|
|
<h1>3D ASCII Model Viewer</h1> |
|
|
</header> |
|
|
|
|
|
<main class="container"> |
|
|
<div class="viewer-container"> |
|
|
<canvas id="ascii-canvas"></canvas> |
|
|
<div id="loading" class="loading">Loading...</div> |
|
|
</div> |
|
|
|
|
|
<div class="controls-panel"> |
|
|
<div class="control-group"> |
|
|
<label for="model-select">Select Model:</label> |
|
|
<select id="model-select"> |
|
|
<option value="cube">Cube</option> |
|
|
<option value="sphere">Sphere</option> |
|
|
<option value="torus">Torus</option> |
|
|
<option value="teapot">Teapot</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="control-group"> |
|
|
<h3>ASCII Settings</h3> |
|
|
<label for="resolution">Resolution:</label> |
|
|
<input type="range" id="resolution" min="10" max="100" value="50"> |
|
|
<span id="resolution-value">50</span> |
|
|
|
|
|
<label for="charset">Character Set:</label> |
|
|
<select id="charset"> |
|
|
<option value="default">@%#*+=-:. </option> |
|
|
<option value="dense">█▓▒░ </option> |
|
|
<option value="simple">#*+-. </option> |
|
|
<option value="numbers">9876543210</option> |
|
|
</select> |
|
|
|
|
|
<label for="color-mode">Color Mode:</label> |
|
|
<select id="color-mode"> |
|
|
<option value="mono">Monochrome</option> |
|
|
<option value="grayscale">Grayscale</option> |
|
|
<option value="color">Full Color</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="control-group"> |
|
|
<h3>Camera Controls</h3> |
|
|
<label> |
|
|
<input type="checkbox" id="auto-rotate" checked> |
|
|
Auto Rotate |
|
|
</label> |
|
|
<button id="reset-camera">Reset Camera</button> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<footer> |
|
|
<p>© 2023 3D ASCII Model Viewer | Built with Three.js</p> |
|
|
</footer> |
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
|
|
<script src="assets/js/script.js"></script> |
|
|
</body> |
|
|
</html> |
