-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
72 lines (67 loc) · 3.73 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/bryik/aframe-bmfont-text-component/master/dist/aframe-bmfont-text-component.min.js"></script>
<title>Belajar A-Frame</title>
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item id="why-male-models" src="3d/man/man.dae"></a-asset-item>
<img id="boxTexture" src="images/guidelines-logo.png">
<img id="earthSurface" src="images/Day_lrg.jpg">
<img id="skyTexture" src="dpr-dibawah-pohon-rindang-udinus.jpg">
<img id="shadow2" src="images/radial-shadow-2.png">
<img id="shoes" src="images/shoes.png">
<img id="bukawebvr" src="images/bukawebvr.png">
<a-asset-item id="shoe-obj" src="3d/converse_obj.obj"></a-asset-item>
<a-asset-item id="shoe-mtl" src="3d/converse_obj.mtl"></a-asset-item>
<a-asset-item id="tree-obj" src="3d/low-poly-fox-by-pixelmannen-obj/low-poly-fox-by-pixelmannen.obj"></a-asset-item>
<a-asset-item id="tree-mtl" src="3d/low-poly-fox-by-pixelmannen-obj/low-poly-fox-by-pixelmannen.mtl"></a-asset-item>
</a-assets>
<a-entity id="model" position="0 0 -3">
<a-animation attribute="rotation" from="0 -30 0" to="0 330 0" dur="15000" easing="linear" repeat="indefinite"></a-animation>
<a-collada-model position="-.35 0 .55" rotation="0 -20 0" scale="1.5 1.5 1.5" src="#why-male-models"></a-collada-model>
<a-image src="#shadow2" rotation="-90 0 0" scale="0.5 0.5 0.5"></a-image>
</a-entity>
<a-curvedimage id="mozvr-logo" src="#bukawebvr" radius="5.7" theta-length="36" height="1" position="0 2.6 -1" opacity="1">
<a-animation attribute="rotation" from="0 10 0" to="0 200 0" delay="500" dur="1000"></a-animation>
</a-curvedimage>
<!-- <a-torus-knot color="#B84A39" arc="180" p="2" q="7" radius="5" radius-tubular="0.1"></a-torus-knot> -->
<a-box src="#boxTexture" position="-5 2 -10" rotation="0 45 45" scale="2 2 2">
<a-animation attribute="position" to="-5 3 -10" direction="alternate" dur="2000" repeat="indefinite"></a-animation>
</a-box>
<!-- <a-entity>
<a-cylinder position="0 0.5 0" radius="4" height="1.6" side="back" open-ended="true" color="#FFF"></a-cylinder>
</a-entity> -->
<a-sphere position="5 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<!-- <a-sphere position="5 1.25 -5" radius="1.25" scale="2 2 2" src="#earthSurface"></a-sphere> -->
<!-- <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> -->
<!-- <a-circle color="#CCC" radius="20" position="0 2 -5" rotation="0 45 45" scale="0.1 0.1 0.1"></a-circle> -->
<!-- <a-entity obj-model="obj: #tree-obj; mtl: #tree-mtl" position="-3 -2 -9" scale="0.05 0.05 0.05"></a-entity> -->
<!-- <a-obj-model src="#shoe-obj" mtl="#shoe-mtl" position="-5 0 -2" rotation="0 30 0" scale="0.1 0.1 0.1">
<a-animation attribute="position" to="-5 2 -2" direction="alternate" dur="2000"
repeat="indefinite"></a-animation>
</a-obj-model> -->
<a-entity bmfont-text="text: Ganteng-ganteng Srigala :D" position="0 0 -5" rotation="0 0 0" scale="2 2 2"></a-entity>
<a-curvedimage id="shoes" src="#shoes" radius="5.7" theta-length="18" height=".8" position="0 0.9 0" scale=".4 .4 .4">
<a-animation attribute="rotation" from="0 180 0" to="0 130 0" delay="750" dur="1000"></a-animation>
</a-curvedimage>
<a-sky src="#skyTexture"></a-sky>
<a-camera>
<a-cursor></a-cursor>
</a-camera>
</a-scene>
<script>
var boxEl = document.querySelector('a-box')
boxEl.addEventListener('mouseenter', function() {
boxEl.setAttribute('scale', {
x: 2,
y: 2: z: 2
});
});
</script>
</body>
</html>