-
Notifications
You must be signed in to change notification settings - Fork 1
/
WebAR.html
41 lines (36 loc) · 1.85 KB
/
WebAR.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
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
<!-- we import arjs version without NFT but with marker + location based support -->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<script>
var SCALE_FACTOR = 7.9;
AFRAME.registerComponent('ruler-manager', {
tick: function () {
var markerA = document.getElementById("marker-a");
var markerB = document.getElementById("marker-b");
var distance = markerA.object3D.position.distanceTo(markerB.object3D.position);
distance *= SCALE_FACTOR;
console.log(distance);
var distanceLabel = document.getElementById("distance-label");
distanceLabel.setAttribute("value", distance.toFixed(1));
var camera = document.getElementById("camera");
distanceLabel.object3D.lookAt(camera.object3D.position);
}
});
</script>
</head>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>
<a-marker id="marker-a" type="pattern" preset="custom" url="pattern-a.patt">
<a-sphere color="red" radius="0.05"></a-sphere>
</a-marker>
<a-marker id="marker-b" type="pattern" preset="custom" url="pattern-b.patt">
<a-sphere color="blue" radius="0.05"></a-sphere>
<a-text id="distance-label" position="0 1 0" scale = "1 1 1" align="center" value="Hello World" color="black"></a-text>
</a-marker>
<a-entity id="camera" camera ruler-manager></a-entity>
</a-scene>
</body>
</html>