-
Notifications
You must be signed in to change notification settings - Fork 41
/
contact-sharing-in-ar.html
173 lines (138 loc) · 5.03 KB
/
contact-sharing-in-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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<!-- include three.js -->
<script src='vendor/three.js/build/three.js'></script>
<!-- include js-aruco -->
<script src='../vendor/js-aruco/svd.js'></script>
<script src='../vendor/js-aruco/posit1-patched.js'></script>
<script src='../vendor/js-aruco/cv.js'></script>
<script src='../vendor/js-aruco/aruco.js'></script>
<!-- include some extensions -->
<script src='../src/threex.webcamgrabbing.js'></script>
<script src='../src/threex.imagegrabbing.js'></script>
<script src='../src/threex.videograbbing.js'></script>
<script src='../src/threex.jsarucomarker.js'></script>
<!-- script specific to contact sharing in ar -->
<script src='contact-sharing-in-ar/js/ui.badgesprite.js'></script>
<script src='contact-sharing-in-ar/js/badgeInfos.js'></script>
<body style='margin: 0px; overflow: hidden; text-align:center;'><script>
//////////////////////////////////////////////////////////////////////////////////
// Init
//////////////////////////////////////////////////////////////////////////////////
// init renderer
var renderer = new THREE.WebGLRenderer({
antialias : true,
alpha : true,
});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// array of functions for the rendering loop
var onRenderFcts = [];
// init scene and camera
var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.01, 1000);
camera.position.z = 2;
//////////////////////////////////////////////////////////////////////////////////
// get Data
//////////////////////////////////////////////////////////////////////////////////
// var badgeInfos = [
// {
// firstName : 'Mike',
// lastName : 'Newton',
// role : 'industry',
// markerId : 0,
// avatar : '/examples/contact-sharing-in-ar/avatars/avatar-0.jpg',
// },
// {
// firstName : 'Adam',
// lastName : 'Huxley',
// role : 'corporate',
// markerId : 1,
// avatar : '/examples/contact-sharing-in-ar/avatars/avatar-1.jpg',
// },
// {
// firstName : 'Albert',
// lastName : 'Walton',
// role : 'designer',
// markerId : 265,
// avatar : '/examples/contact-sharing-in-ar/avatars/avatar-265.jpg',
// },
// ]
//////////////////////////////////////////////////////////////////////////////////
// add an object in the scene
//////////////////////////////////////////////////////////////////////////////////
// Add Badge
var badgeSprite = new UI.BadgeSprite();
scene.add(badgeSprite)
//////////////////////////////////////////////////////////////////////////////////
// render the whole thing on the page
//////////////////////////////////////////////////////////////////////////////////
// handle window resize
window.addEventListener('resize', function(){
renderer.setSize( window.innerWidth, window.innerHeight )
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
}, false)
// set the scene as visible
scene.visible = false
// render the scene
onRenderFcts.push(function(){
renderer.render( scene, camera );
})
// run the rendering loop
var previousTime = performance.now()
requestAnimationFrame(function animate(now){
requestAnimationFrame( animate );
onRenderFcts.forEach(function(onRenderFct){
onRenderFct(now, now - previousTime)
})
previousTime = now
})
//////////////////////////////////////////////////////////////////////////////////
// Do the Augmented Reality Upgrade
//////////////////////////////////////////////////////////////////////////////////
// init the marker recognition
var jsArucoMarker = new THREEx.JsArucoMarker()
// init the image source grabbing
if( false ){
var videoGrabbing = new THREEx.VideoGrabbing()
jsArucoMarker.videoScaleDown = 10
}else if( true ){
var videoGrabbing = new THREEx.WebcamGrabbing()
jsArucoMarker.videoScaleDown = 2
}else if( true ){
var videoGrabbing = new THREEx.ImageGrabbing()
jsArucoMarker.videoScaleDown = 10
}else console.assert(false)
// attach the videoGrabbing.domElement to the body
document.body.appendChild(videoGrabbing.domElement)
// @TODO support click on the sprite
var previousMarkerId = null;
// process the image source with the marker recognition
onRenderFcts.push(function(){
var domElement = videoGrabbing.domElement
var markers = jsArucoMarker.detectMarkers(domElement)
var object3d = scene
object3d.visible = false
// see if this.markerId has been found
markers.forEach(function(marker){
var badgeInfo = null
badgeInfos.forEach(function(item){
if( item.markerId !== marker.id ) return
badgeInfo = item
})
if( badgeInfo === null ){
console.log('found marker', marker.id, 'but no matching badge found')
return
}
if( marker.id !== previousMarkerId ){
badgeSprite.draw(badgeInfo);
previousMarkerId = marker.id;
}
/**
* @TODO support multiple markers
*/
jsArucoMarker.markerToObject3D(marker, object3d)
object3d.visible = true;
})
});
</script></body>