-
Notifications
You must be signed in to change notification settings - Fork 0
/
3d.html
42 lines (37 loc) · 1.84 KB
/
3d.html
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
<!DOCTYPE html>
<html>
<head>
<title>3D Model City</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<style>
body { margin: 0; }
#info { position: absolute; top: 10px; left: 10px; color: white; z-index: 1; }
</style>
</head>
<body>
<div id="info">
<h2>3D Model City</h2>
<p>Use your mouse or touch to explore the city from the top view.</p>
</div>
<a-scene>
<!-- Camera setup for top-down view -->
<a-entity id="camera" camera position="0 50 0" rotation="-90 0 0" look-controls></a-entity>
<!-- Ground plane -->
<a-plane position="0 0 0" rotation="-90 0 0" width="200" height="200" color="#7BC8A4"></a-plane>
<!-- Buildings and Landmarks -->
<a-box position="0 1 -10" depth="10" height="10" width="10" color="#4CC3D9"></a-box> <!-- Example Building -->
<a-box position="20 1 -30" depth="5" height="15" width="5" color="#EF2D5E"></a-box> <!-- Example Building -->
<a-box position="-20 1 -20" depth="15" height="7" width="15" color="#FFC65D"></a-box> <!-- Example Building -->
<a-box position="10 1 20" depth="8" height="12" width="8" color="#F78C6C"></a-box> <!-- Example Building -->
<a-box position="-15 1 15" depth="12" height="10" width="12" color="#39A0ED"></a-box> <!-- Example Building -->
<!-- Roads -->
<a-plane position="0 0 -15" rotation="-90 0 0" width="40" height="5" color="#444"></a-plane>
<a-plane position="15 0 0" rotation="-90 0 0" width="5" height="40" color="#444"></a-plane>
<!-- Central Park -->
<a-plane position="0 0 10" rotation="-90 0 0" width="30" height="30" color="#3B8B3B"></a-plane>
<!-- Lighting -->
<a-light type="directional" position="-1 2 1" intensity="1"></a-light>
<a-light type="ambient" color="#445451"></a-light>
</a-scene>
</body>
</html>