-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path7-materials.html
55 lines (50 loc) · 1.8 KB
/
7-materials.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
<html>
<head>
<title>Lesson 7: Materials</title>
<script src="assets/aframe-0.4.js"></script>
</head>
<body>
<!--
Materials are what give objects their appearance. Up until this point
all of the objects we've been using have had materials in them. When
we have changed the colour of an object, we have really been changing the
color of its material.
Think of the material as the skin or clothes of an object.
Look at the examples below: same object, same colour. But all three
of them look different.
Play with the properties of each to try and understand more about what
is going on.
Materials (as with lighting) are a very complex subject, so we won't
spend much time on them today.
BONUS: I've added an animation component to each torus so that you can
see how the materials respond to the light better. But now you see just
how easy it is to add an animation!
-->
<a-scene>
<a-torus
material="color: #EAEFF2;roughness: 0.1;metalness: 0.5;"
position="0 1 -4">
<a-animation attribute="rotation"
dur="10000"
to="0 360 0"
repeat="indefinite"></a-animation>
</a-torus>
<a-torus
material="color: #EAEFF2;opacity: 0.9;"
position="-4 1 -4">
<a-animation attribute="rotation"
dur="10000"
to="0 360 0"
repeat="indefinite"></a-animation>
</a-torus>
<a-torus
material="color: #EAEFF2; shader: flat; roughness: 0.1;metalness: 0.5;"
position="4 1 -4">
<a-animation attribute="rotation"
dur="10000"
to="0 360 0"
repeat="indefinite"></a-animation>
</a-torus>
</a-scene>
</body>
</html>