-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
147 lines (131 loc) · 5.15 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
<!DOCTYPE html>
<html lang="en">
<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>
<body>
<script>
// This is a javascript script. It gets executed by the browser
// Note that comments inside scripts are formatted differently:
// Either like this:
// // some comment text
// and they last until the end of the line.
/*
This is a multiline comment
that continues until the closing mark
*/
// To write debug messages to the console, use console.log():
/* You can see the results in the "console" of the preview window
or, if you are viewing the result in a separate window, use your browser's developer's console.
*/
console.log("Hello, this is a test script");
</script>
<script>
/* A-Frame logic is stored in components and in systems.
Components are logic attached to an `<a-entity>` while systems are global and
are attached to a scene. Here we focus on defining a component
Documentation for writing components is found here:
https://aframe.io/docs/master/core/component.html
*/
AFRAME.registerComponent("my-component", {
// A new instance of the component gets created for each <a-entity> the component is attached to
// The init function gets executed each time an instance of the component is created
init: function () {
// The given instance of the component can be accessed using the `this` variable
// for example: this.name refers to the string representation of the component name
console.log(
"Hello, " + this.name + " is being initialized on the element"
);
// this.el refers to the <a-entity> this component is attached to
console.log(this.el);
// The following code is responsible for calling the debugging function
// We do not want to call the debug routine too often because it would slow our rendering to a crawl
// You can avoid reading into this too deeply. Just know that this is responsinble for making sure that the function
// debug(t,dt) does not get called more than once every 1000 ms
this.debug = AFRAME.utils.throttle(this.debug, 1000, this);
},
debug: function (t, dt) {
// This debugging functions is NOT executed automatically
// It gets called from the "tick" function
console.log("This is a debugging function");
},
tick: function (t, dt) {
// This function (tick) gets called on each rendered frame
// t is the time in milliseconds since the start of the program
// dt is the time in milliseconds since the last rendered frame
/* the object3D property of the <a-entity> refers to the javascript object that contains information about the 3D shape
See
https://aframe.io/docs/master/core/entity.html#object3d
and
https://threejs.org/docs/#api/en/core/Object3D
for information of properties
*/
this.el.object3D.rotation.x = t / 100;
this.el.object3D.rotation.y = t / 300;
// The following code is responsible for calling the debugging function
this.debug(t, dt);
}
});
</script>
<a-scene>
<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>
<!-- This is the floor and sky-->
<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>
<a-sky id="sky" color="#1A0A2A"></a-sky>
<a-entity
id="box1"
geometry="primitive: box"
material="color: red"
position="1 0 -5"
rotation="0 0 0"
my-component
></a-entity>
<a-entity
id="sphereBlack"
geometry="primitive: sphere"
position="5 1 4"
radius="1"
material="color: black"
>
</a-entity>
<a-entity
id="dodecahedronGreen"
geometry="primitive: dodecahedron"
radius="2"
position="-3 0 -5"
material="color: green"
></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>
</a-scene>
</body>
</html>