archvis-webgl/index.html at main · cziter15/archvis-webgl · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>ArchVis WebGL</title>
		<link rel="icon" href="/cog.svg" type="image/svg+xml">
		<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
		<link rel="stylesheet" href="./css/style.css">
		<!-- Open Graph / LinkedIn / Facebook -->
	    <meta property="og:title" content="ArchVis WebGL — Interactive Architecture Visualization">
	    <meta property="og:description" content="ArchVis WebGL is a small interactive WebGL-based architecture visualization tool built with Three.js and Vite. It loads and saves architectures as XML and provides a 3D view.">
	    <meta property="og:image" content="https://cziter15.github.io/archvis-webgl/header.png">
	    <meta property="og:image:width" content="1200">
	    <meta property="og:image:height" content="627">
	    <meta property="og:url" content="https://cziter15.github.io/archvis-webgl/">
	    <meta property="og:type" content="website">
	    <meta property="og:locale" content="en_US">
	    <!-- Twitter -->
	    <meta name="twitter:card" content="summary_large_image">
	    <meta name="twitter:title" content="ArchVis WebGL — Interactive Architecture Visualization">
	    <meta name="twitter:description" content="ArchVis WebGL is a small interactive WebGL-based architecture visualization tool built with Three.js and Vite. It loads and saves architectures as XML and provides a 3D view.">
	    <meta name="twitter:image" content="https://cziter15.github.io/archvis-webgl/header.png">
	</head>
	<body>
		<div id="canvas"></div>
		<div class="ui-container">
			<div class="title" id="title">ARCHITECTURE VISUALIZATION</div>
			<div class="left-panel" id="leftPanel">
				<div class="panel-box">
					<div class="legend" id="legendContainer">
						<div class="legend-title">LEGEND:</div>
						<div id="legendItems"></div>
					</div>
					<div class="controls-text">
						ORBIT MODE<br>
						LEFT DRAG - ROTATE VIEW<br>
						RIGHT/MIDDLE DRAG - PAN<br>
						SCROLL - ZOOM<br>
						WASD - MOVE CAMERA<br>
						SPACE/SHIFT - UP/DOWN<br>
						AUTO-ROTATES AFTER 3s
						<div class="controls-divider">
							<span class="hotkey">U</span> - TOGGLE UI<br>
							<span class="hotkey">Q</span> - TOGGLE CURSOR
						</div>
					</div>
					<div class="author-info">© <a href="https://github.com/cziter15" target="_blank">K. STREHLAU</a></div>
				</div>
			</div>
			<div class="right-panel" id="rightPanel">
				<div class="panel-box">
					<button class="button" id="saveBtn">💾 SAVE</button>
					<button class="button" id="loadBtn">📁 LOAD</button>
					<button class="button" id="sampleBtn">📋 LOAD SAMPLE</button>
					<button class="button" id="editBtn">✏️ EDIT</button>
					<div class="smoothness-control">
						<div class="smoothness-label">CAMERA SMOOTHNESS:</div>
						<div class="slider-container">
							<span>MIN</span>
							<input type="range" id="smoothnessSlider" min="0.8" max="0.99" step="0.01" value="0.95">
							<span>MAX</span>
						</div>
					</div>
					<div class="legend-editor" id="legendEditor">
						<div class="legend-title">LEGEND EDITOR</div>
						<div id="legendList"></div>
						<div class="legend-row">
							<input type="text" id="newLegendName" placeholder="Name" />
							<div id="newLegendSwatch" class="legend-swatch"></div>
							<button class="button small" id="addLegendBtn">ADD</button>
						</div>
					</div>
					<div class="legend-editor" id="editPanel">
						<div class="legend-title">NODE EDITOR</div>
						<div id="editContent">
							<div class="edit-row"><label>Name</label><input type="text" id="editName"></div>
							<div class="edit-row"><label>Scale</label><input type="number" id="editScale" step="0.1" min="0.1"></div>
							<div class="edit-row"><label>Pos X</label><input type="number" id="editPosX" step="0.1"></div>
							<div class="edit-row"><label>Pos Y</label><input type="number" id="editPosY" step="0.1"></div>
							<div class="edit-row"><label>Pos Z</label><input type="number" id="editPosZ" step="0.1"></div>
							<div class="edit-actions">
								<button class="button small" id="addChildBtn">+ CHILD</button>
								<button class="button small danger" id="deleteNodeBtn">DELETE</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="message-display" id="messageDisplay"></div>
			<div class="mobile-menu" id="mobileMenu">
				<button id="mobileSaveBtn" class="mobile-action">💾</button>
				<button id="mobileLoadBtn" class="mobile-action">📁</button>
				<button id="mobileSampleBtn" class="mobile-action">📋</button>
			</div>
		</div>
			<div id="mobileControls" class="mobile-controls">
			<div id="leftStick" class="stick left-stick" aria-label="move joystick">
				<div class="stick-knob"></div>
			</div>
			<div id="rightStick" class="stick right-stick" aria-label="look joystick">
				<div class="stick-knob"></div>
			</div>
			<div class="action-buttons">
				<button id="btnUp" class="action-btn">▲</button>
				<button id="btnDown" class="action-btn">▼</button>
			</div>
		</div>
		<input type="file" id="xmlFileInput" class="hidden-input" accept=".xml">
		<script type="module" src="./src/main.js"></script>
	</body>
</html>