-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmario.html
72 lines (64 loc) · 4.51 KB
/
mario.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
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script>
<body style='margin : 0px; overflow: hidden;'>
<!--
Lets create a scene and rotate it accordingly. We assume the AR marker will be horizontal and on flat screen device.
Also Setting debugUIEnabled to false doesn't show the debug messages on screen. Keeps it clean.
-->
<a-scene scale="1 1.55 1.25" rotation="120 180 0" position="0 1 -1" embedded arjs='sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3; debugUIEnabled: false;'>
<a-entity light="type: ambient; intensity: 0.5;"></a-entity>
<!-- Directional Light that casts shadow-->
<a-entity light="type: directional;
castShadow: true;
intensity: 0.65;" position="-4 3 0"></a-entity>
<!-- Let's define all the assets here. Credits for the authors in the README.MD file :) -->
<a-assets>
<a-asset-item id="mario-obj" src="models/mario.obj"></a-asset-item>
<a-asset-item id="mario-mtl" src="models/mario.mtl"></a-asset-item>
<a-asset-item id="saucer-obj" src="models/spaceship.obj"></a-asset-item>
<a-asset-item id="saucer-mtl" src="models/spaceship.mtl"></a-asset-item>
<a-asset-item id="env-obj" src="models/env.obj"></a-asset-item>
<a-asset-item id="env-mtl" src="models/env.mtl"></a-asset-item>
<a-asset-item id="suit-obj" src="models/suit.obj"></a-asset-item>
<a-asset-item id="suit-mtl" src="models/suit.mtl"></a-asset-item>
<a-asset-item id="dog-obj" src="models/dog.obj"></a-asset-item>
<a-asset-item id="dog-mtl" src="models/dog.mtl"></a-asset-item>
<a-asset-item id="island-obj" src="models/grass.obj"></a-asset-item>
<a-asset-item id="island-mtl" src="models/grass.mtl"></a-asset-item>
</a-assets>
<!-- The Ground / Island scaled and positioned. It will receive shadow from the objects placed above. Keepts it more realistic. -->
<a-entity scale="10 10 10" shadow="receive: true" position="0 -0.75 2" rotation="0 180 0" obj-model="obj: #island-obj; mtl: #island-mtl">
</a-entity>
<!-- Let's add some trees and rocks. They cast shadow on the ground since shadow attribute is set to cast -->
<a-entity scale="1 1 1" position="0 0 2" shadow="cast: true" obj-model="obj: #env-obj; mtl: #env-mtl">
</a-entity>
<!-- Suit case -->
<a-entity scale="0.4 0.4 0.4" shadow="cast: true" position="-1 0 1" obj-model="obj: #suit-obj; mtl: #suit-mtl">
</a-entity>
<!-- Mario ! -->
<a-entity scale="0.6 0.5 0.6" shadow="cast: true" obj-model="obj: #mario-obj; mtl: #mario-mtl">
</a-entity>
<!-- Dog has animation. It is animated based on two properties : Rotation and Position -->
<a-entity shadow="receive: true" scale="0.5 0.5 0.5" light="type: directional;
castShadow: true;
intensity: 0.30;" position="0.5 0.0 0" rotation="0 45 0" obj-model="obj: #dog-obj; mtl: #dog-mtl">
<a-animation attribute="rotation" dur="5000" direction="alternate" from="0 -90 0" to="0 -170 0" repeat="indefinite">
</a-animation>
<a-animation attribute="position" dur="500" direction="alternate" from="0.5 0.0 0" to="0.5 0.05 0" repeat="indefinite">
</a-animation>
</a-entity>
<!-- Animations are applied to flying saucer as well -->
<a-entity position="-1 1.5 0" shadow="cast: true" rotation="0 90 0" obj-model="obj: #saucer-obj; mtl: #saucer-mtl">
<a-animation attribute="position" dur="5000" direction="alternate" from="3 2.5 0" to="-3 2.5 0" repeat="indefinite">
</a-animation>
<a-animation attribute="rotation" dur="5000" direction="alternate" from="0 90 0" to="0 450 0" repeat="indefinite">
</a-animation>
</a-entity>
<a-marker-camera type='pattern' url='./patterns/pattern-agl.patt'></a-marker-camera>
</a-scene>
</body>
<script>
// Lets place some help text in case if some bug occurs. IGNORE this
document.body.innerHTML = document.body.innerHTML + "<div style='position:fixed;top:0px;left:1.25%;padding:1px;width:95%;height:30px;background:rgba(0,0,0,0.5);color:white;font-weight:bold;text-align:center;margin:5px;font-size:18px'>Go Girl Go For IT 2018</div>";
</script>