-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
156 lines (142 loc) · 5.4 KB
/
index.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
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<!-- Above is a declaration that this is an HTML file in english-->
<!-- Next is the "header" of the HTML file. It specifies some
important information and preliminaries. The hearder is enclosed in the
`<head>``</head>` tag -->
<head>
<!-- Some standards-compliant boilerplate. Just ignore this -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- Next, we pull in the A-Frame library and some extra plugins -->
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@fb96ab2/dist/aframe-extras.min.js"></script>
<!-- Next, we have the title of our page-->
<title>A Basic A-Frame scene</title>
</head>
<!--
This is a comment. Nothing here gets parsed by the browser.
-->
<!-- Next, we start with the body of our document, enclosed in the `<body>` `</body>` tags.
-->
<body>
<!--
Any A-Frame scene must be contained inside an `<a-scene>` tag.
-->
<a-scene>
<!-- ## The scene
Next, we initialize the camera
The code below specifies a camera that can be controlled with a keyboard
and by looking around with a mouse. The camera is positioned inside a "rig".
Let us not worry about the camera for now. A-Frame takes care of most of the setup for us.
-->
<a-entity id="rig" movement-controls position="0 0 0">
<a-entity
id="camera"
camera="fov:55"
position="0 1.6 0"
look-controls
></a-entity>
</a-entity>
<!--
## Entities
An A-Frame scene consists of entities.
Entities are custom html tags of type `<a-entity>`.
Do not forget the closing tag `</a-entity>`.
Entities by themselves do not contain or display anything.
To make an entity do something you need to assign components to them.
Component are specified in the opening <a-entity> tag
Example (below):
- `geometry` is an A-Frame component; it tells us that the entity has a geometry (a shape)
- `material` is an A-Frame component; it tells us that the entity has a material (color/texture)
- `position` is an A-Frame component; it tells us that the entity has a place in space (coordinates)
- `rotation` is an A-Frame component; it tells us that the entity is rotated in space somehow (expressed using Euler angles)
- `id` is **not** an A-Frame component; it is an HTML attribute; it specifies a unique identifier for the element
Components/attributes come usually in name/value pairs.
-->
<!-- This is a red box-->
<a-entity
id="box1"
geometry="primitive: box"
material="color: red"
position="1 0 -5"
rotation="0 0 0"
></a-entity>
<!-- This is a blue box-->
<a-entity
id="box2"
geometry="primitive: box--"
material="color: blue"
position="-1 0 -5"
rotation="0 45 0"
>
</a-entity>
<!-- This is the floor-->
<a-entity
id="floor"
geometry="primitive: plane; width: 20; height: 20"
material="color: #7BC8A4; side: double"
height="100"
width="100"
rotation="-90 00 00"
></a-entity>
<!-- We add a sky (making it a more pleasant color than white) -->
<!-- A-Frame has some pre-configured entities, called primitives, that can be invoked with a special tag. For example <a-sky> below.
Primitives are just convenience tags for preconfigured entities.
For more information about primitives, see https://aframe.io/docs/1.4.0/introduction/html-and-primitives.html .
For a complete list of premitives, see the `primitives` section in https://aframe.io/docs .
-->
<!-- This will hopefully be a purple sphere -->
<a-entity
id="sphere"
geometry="primitive: sphere"
position="5 1 4"
radius="1"
material="color: black"
>
</a-entity>
<!-- this should be a dark yellow cylinder-->
<a-entity
id="cylinderPink"
geometry="primitive: cylinder"
position="3 4 -3"
radius="0.5"
height="1"
material="color: pink"
></a-entity>
<!-- This will hopefully be a silver dodecahedron-->
<a-entity
id="dodecahedronGreen"
geometry="primitive: dodecahedron"
radius="2"
position="-3 0 -5"
material="color: green"
>
<!-- id and geometry are the same -->
</a-entity>
<!-- this will hopefully be a white icosahedron-->
<a-entity
id="icosahedronOrange"
geometry="primitive: icosahedron"
radius="3"
position="1 2 -5"
material="color: orange"
>
</a-entity>
<!-- the two above shapes are together to form...something fun. -->
<!-- this will be an icosahedron-->
<!-- this will hopefully be a white icosahedron-->
<a-entity
id="icosahedronBlue"
geometry="primitive: icosahedron"
radius="2"
position="3 2 5"
material="color: blue"
>
<!-- this will be a dodecahedron-->
</a-entity>
<a-sky id="sky" color="#1A0A2A"></a-sky>
</a-scene>
</body>
</html>