-
Notifications
You must be signed in to change notification settings - Fork 3
/
forms-textured.html
47 lines (34 loc) · 2.01 KB
/
forms-textured.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
<html>
<head>
<title>WebAR con A-Frame</title>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="skyTexture" src="textures/sky.jpg">
</a-assets>
<a-entity geometry="primitive: sphere; radius: 1.5"
material="color: white; shader: flat; src: textures/marble.jpg" position="5 10 -10"
animation="property: position; from: 5 10 -10; to: 5 2 -10; dur: 3000; easing: easeInOutQuad; dir: alternate; loop: true;"
light="type:point; color: white; intensity: .2">
</a-entity>
<a-entity geometry="primitive: sphere; radius: 1.5"
material="color: white; shader: flat; src: textures/marble.jpg" position="-5 10 -10"
animation="property: position; from: -5 10 -10; to: -5 2 -10; dur: 3000; easing: easeInOutQuad; dir: alternate; loop: true; delay: 1000"
light="type:point; color: white; intensity: .2">
</a-entity>
<a-entity geometry="primitive: sphere; radius: 1.5"
material="color: white; shader: flat; src: textures/marble.jpg" position="0 5 -10"
animation__pos="property: position; from: 0 5 -10; to: 0 5 -20; dur: 3000; easing: easeInOutQuad; dir: alternate; loop: true; delay: 2000"
animation__rot="property: rotation; to: 0 360 0; loop: true; dur: 20000">
</a-entity>
<a-box material="color: white; shader: flat; src: textures/wood.jpg" position="0 1 -5"
animation__in="property: rotation; from: 0 0 0; to: 0 120 0; dur: 500; easing: easeInOutQuad; startEvents: mouseenter;"
animation__out="property: rotation; from: 0 120 0; to: 0 0 0; dur: 500; easing: easeInOutQuad; startEvents: mouseleave;">
</a-box>
<a-sky height="2048" radius="30" src="#skyTexture" theta-length="90" width="2048"></a-sky>
<a-plane material="color:#111;" rotation="-90 0 0" height="100" width="100" position="0 0 0"></a-plane>
</a-scene>
</body>
</html>