-
Notifications
You must be signed in to change notification settings - Fork 0
/
threeTest.html
160 lines (144 loc) · 4.57 KB
/
threeTest.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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%}
</style>
<form>
<input type="button" onclick=window.open("index.html","_self") value="Back"/>
</form>
</head>
<body>
<button type='button' id="startTracking" >activate headtracking</button>
<button type='button' id="startRotation" >activate rotations</button>
<script src="js/three.js"></script>
<script src="js/Geometry.js?v=1"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/headtrackr.js"></script>
<canvas id="inputCanvas" width="320" height="240" style="display:none"></canvas>
<video id="inputVideo" autoplay loop></video>
<script type="text/javascript">
// Headtracking Stuff
var videoInput = document.getElementById('inputVideo');
var canvasInput = document.getElementById('inputCanvas');
// start headtracking button
var btn1 = document.getElementById('startTracking');
var trackingOn=false;
function activateTracking() {
if (trackingOn){
trackingOn=false;
btn1.textContent="enable headtracking";
}
else {
trackingOn=true;
btn1.textContent="disable headtracking";
}
}
btn1.onclick = activateTracking;
var btn2 = document.getElementById('startRotation');
var rotationOn=false;
function activateRotation() {
if (rotationOn){
rotationOn=false;
btn2.textContent="enable rotation";
}
else {
rotationOn=true;
btn2.textContent="disable rotation";
}
}
btn2.onclick = activateRotation;
//global variables for head position
var camPos=[];
camPos[0]=0;
camPos[1]=0;
camPos[2]=5;
camPos[3]=1.5;
//init and start headtracker
var htracker = new headtrackr.Tracker({calcAngles:true});
htracker.init(videoInput, canvasInput);
htracker.start();
//average filter for smoothing head angle
var filter=[];
var filterLength=15;
var filteredVal=1.5;
for(var i=0;i<filterLength;i++){filter[i]=1.5;}
function filterAv(angle){
for(var i=filterLength-1;i>0;i--){
filter[i]=filter[i-1]
}
filter[0]=angle;
sum=0;
for(var i=0;i<filterLength;i++){
sum=sum+filter[i];
}
sum=sum/filterLength;
return sum;
}
//receive and save tracked head position and angle
function htrackerReceived (e) {
camPos[0]=e.x;
camPos[1]=e.y;
camPos[3]=e.angle;
//console.log("x: " + e.x + " y: "+ e.y+" angle: "+e.angle)
filteredVal=filterAv(e.angle);
camPos[3]=filteredVal;
}
document.addEventListener("facetrackingEvent", htrackerReceived, false);
// three.js init stuff
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xffffff);
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// make cube
var textureMetal = new THREE.ImageUtils.loadTexture('img/metal.jpg');
var geometry = new THREE.BoxGeometry( 1, 1, 2 );
var material = new THREE.MeshBasicMaterial( { map: textureMetal } );
var cube = new THREE.Mesh( geometry, material );
cube.position.set(0,0,-1);
scene.add( cube );
//make can
var textureCan = new THREE.ImageUtils.loadTexture('img/cokecan.jpg');
var geometryCan = new THREE.CylinderGeometry(0.25, 0.25, 1, 32 );
var materialCan = new THREE.MeshBasicMaterial( { map: textureCan } );
var can = new THREE.Mesh( geometryCan, materialCan );
can.position.set(0,0,-5);
scene.add( can );
// add light
var ambient_light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambient_light);
var point_light = new THREE.PointLight(0xffffff, 0.5);
scene.add(point_light);
// add mouse controls
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.update();
//update camera position according to headtracking
function updateCamera () {
if(trackingOn){
camera.position.x = (0.5-camPos[0]/320)*10;
camera.position.y = (0.5-camPos[1]/240)*10;
}
if(rotationOn) {camera.rotation.y =(camPos[3]-Math.PI/2)*2;}
}
// make environment
import_room();
import_objects();
//render loop
function animate() {
requestAnimationFrame( animate );
cube.rotation.y += 0.01;
can.rotation.y += 0.01;
updateCamera();
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>