-
Notifications
You must be signed in to change notification settings - Fork 96
/
Copy pathsixense_sensor_viz.html
131 lines (112 loc) · 3.93 KB
/
sixense_sensor_viz.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
<!DOCTYPE html>
<html>
<head>
<title>vr.js Sixense Sensor Data Visualization</title>
<script src="../lib/vr.js"></script>
<script src="../third_party/three.js/three.min.js"></script>
</head>
<body>
<div id="status"></div>
<script>
var statusEl = document.getElementById('status');
statusEl.innerHTML = 'Waiting for plugin...';
vr.load(function(error) {
if (error) {
statusEl.innerHTML = 'Plugin error: ' + error.toString();
} else {
statusEl.innerHTML = '';
}
});
var canvasWidth = 800;
var canvasHeight = 600;
var cameraViewAngle = 45;
var cameraAspect = canvasWidth / canvasHeight;
var cameraNear = 0.1;
var cameraFar = 10000;
var camera = new THREE.PerspectiveCamera(
cameraViewAngle, cameraAspect, cameraNear, cameraFar);
var scene = new THREE.Scene();
scene.add(camera);
camera.position.z = 800;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(canvasWidth, canvasHeight);
document.body.appendChild(renderer.domElement);
var pointLight = new THREE.PointLight(0xFFFFFF);
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
scene.add(pointLight);
var defaultMaterial = new THREE.MeshLambertMaterial({
color: 0xCC0000
});
var activeMaterial = new THREE.MeshLambertMaterial({
color: 0x00CC00
});
function createPointer() {
var container = new THREE.Object3D();
container.useQuaternion = true;
scene.add(container);
var arrow = new THREE.ArrowHelper(
new THREE.Vector3(0, 0, -1),
new THREE.Vector3(0, 0, 0),
50,
0x00CC00);
container.add(arrow);
var axis = new THREE.AxisHelper(50);
container.add(axis);
var ball = new THREE.Mesh(
new THREE.SphereGeometry(10, 16, 16),
defaultMaterial);
container.add(ball);
return {
container: container,
ball: ball
};
};
function updatePointer(pointer, controller) {
var container = pointer.container;
container.position.x = controller.position[0];
container.position.y = controller.position[1];
container.position.z = controller.position[2];
container.quaternion.x = controller.rotation[0];
container.quaternion.y = controller.rotation[1];
container.quaternion.z = controller.rotation[2];
container.quaternion.w = controller.rotation[3];
var ball = pointer.ball;
ball.material = controller.buttons ? activeMaterial : defaultMaterial;
ball.position.x = controller.joystick[0] * 10;
ball.position.y = controller.joystick[1] * 10;
ball.scale.x = 1 + controller.trigger;
ball.scale.y = 1 + controller.trigger;
ball.scale.z = 1 + controller.trigger;
};
function togglePointer(pointer, visible) {
pointer.container.traverse(function(object) {
object.visible = visible;
});
};
var pointer0 = createPointer();
var pointer1 = createPointer();
var vrstate = new vr.State();
function tick() {
vr.requestAnimationFrame(tick);
// Poll VR, if it's ready.
if (!vr.pollState(vrstate)) {
return;
}
togglePointer(pointer0, vrstate.sixense.present);
togglePointer(pointer1, vrstate.sixense.present);
if (vrstate.sixense.present) {
updatePointer(pointer0, vrstate.sixense.controllers[0]);
updatePointer(pointer1, vrstate.sixense.controllers[1]);
statusEl.innerHTML = '';
} else {
// Not plugged in.
statusEl.innerHTML = 'Sixense controller not found!';
}
renderer.render(scene, camera);
};
vr.requestAnimationFrame(tick);
</script>
</body>
</html>