/
Step-6 AR game with AR.html
53 lines (49 loc) · 2.92 KB
/
Step-6 AR game with AR.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
<!doctype HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Web AR worshop | Le Wagon Tokyo</title>
<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-physics-system@1.4.0/dist/aframe-physics-system.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/2.1.8/aframe/build/aframe-ar.js"></script>
</head>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
<a-assets>
<a-asset-item id="bowling-ball" src="../assets/bowling_ball/scene.gltf"></a-asset-item>
<a-asset-item id="bowling-pin" src="../assets/bowling_pin/scene.gltf"></a-asset-item>
</a-assets>
<a-entity camera></a-entity>
<a-marker preset="hiro">
<a-scene physics>
<a-gltf-model id="ball" src="#bowling-ball" position="0 0.13 0" scale="1 1 1" static-body></a-gltf-model>
<a-gltf-model id="pin" src="#bowling-pin" position="0 0.0 -2.9" scale="1 1 1" static-body></a-gltf-model>
<a-gltf-model id="pin" src="#bowling-pin" position="0.13 0.0 -3.0" scale="1 1 1" static-body></a-gltf-model>
<a-gltf-model id="pin" src="#bowling-pin" position="-0.13 0.0 -3.0" scale="1 1 1" static-body></a-gltf-model>
<a-gltf-model id="pin" src="#bowling-pin" position="0 0.0 -3.1" scale="1 1 1" static-body></a-gltf-model>
<a-gltf-model id="pin" src="#bowling-pin" position="0.24 0.0 -3.1" scale="1 1 1" static-body></a-gltf-model>
<a-gltf-model id="pin" src="#bowling-pin" position="-0.24 0.0 -3.1" scale="1 1 1" static-body></a-gltf-model>
<a-gltf-model id="pin" src="#bowling-pin" position="0.13 0.0 -3.2" static-body></a-gltf-model>
<a-gltf-model id="pin" src="#bowling-pin" position="-0.13 0.0 -3.2" scale="1 1 1" static-body></a-gltf-model>
<a-gltf-model id="pin" src="#bowling-pin" position="0.35 0.0 -3.2" scale="1 1 1" static-body></a-gltf-model>
<a-gltf-model id="pin" src="#bowling-pin" position="-0.35 0.0 -3.2" scale="1 1 1" static-body></a-gltf-model>
<a-box position="0 -0.15 -1.5" rotation="-90 90 0" width="3.7" height="1" depth="0.1" material="color: white; shader: flat; src: ../assets/bowling-lane.png" static-body></a-box>
<a-box position="0 -0.4 -1.5" width="10" height="0.1" depth="10" opacity="0" static-body></a-box>
</a-scene>
</a-marker>
</a-scene>
</body>
<script src="./step6-buttons.js"></script>
<script>
setTimeout(() => {
// Give gravity to the pins
document.querySelectorAll("#pin").forEach((pin) => {
pin.removeAttribute("static-body");
pin.setAttribute("dynamic-body", 'shape: box; mass: 1;');
});
// Give gravity to the ball
document.querySelector("#ball").removeAttribute("static-body");
document.querySelector("#ball").setAttribute("dynamic-body", 'shape: sphere; mass: 50;');
}, 5000);
</script>
</html>