/
Step-4 Links and video with AR.html
39 lines (39 loc) · 1.89 KB
/
Step-4 Links and video 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
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web AR worshop | Le Wagon Tokyo</title>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/2.1.8/aframe/build/aframe-ar.js"></script>
<script>
AFRAME.registerComponent("logo", {
init: function() {
this.el.addEventListener("click", (e)=>{
window.open("https://www.linkedin.com/in/yann-klein/");
});
}
})
</script>
</head>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
<a-entity camera></a-entity>
<a-assets>
<video id="video" autoplay="" loop="" muted="" webkit-playsinline="" playsinline="" src="../assets/yann.mp4"></video>
</a-assets>
<a-marker preset="hiro" cursor='rayOrigin: mouse;'>
<a-plane id="card" position="0 -0.05 0" rotation="-90 0 0" width="2" height="1.25" color="#FFFFFF"></a-plane>
<a-text position="0 0 -0.1" rotation="-90 0 0" value="Yann Klein" color="#000000" align="center" width="4"></a-text>
<a-text position="0 0 0.1" rotation="-90 0 0" value="Bootcamp driver and AR lover" color="#000000" align="center" width="2" ></a-text>
<a-plane id="picture" position="-1 0 -0.6" rotation="-90 0 0" width="1" height="1" material="color: white; shader: flat; src: ../assets/yann.jpg"></a-plane>
<a-circle id="logo" position="1.1 0 0.6" rotation="-90 0 0" radius="0.6" material="color: white; shader: flat; src: ../assets/logo.png" logo></a-circle>
<a-video src="#video" width="2" height="1.1" position="-1.2 0 1" rotation="-90 0 0"></a-video>
</a-marker>
</a-scene>
</body>
<script>
document.querySelector('video').play();
</script>
</html>