forked from evanw/node-spacemouse
-
Notifications
You must be signed in to change notification settings - Fork 1
/
demo.html
111 lines (96 loc) · 3.14 KB
/
demo.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
<body style="overflow:hidden;margin:0;"></body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script>
var current = { tx: 0, ty: 0, tz: 0, rx: 0, ry: 0, rz: 0 };
function connect() {
var socket = new WebSocket('ws://' + location.hostname + ':8123');
var isOpen = false;
socket.onopen = function() {
console.log('connected to daemon');
isOpen = true;
};
socket.onmessage = function(e) {
current = JSON.parse(e.data);
};
socket.onclose = function() {
if (isOpen) console.log('disconnected from daemon');
setTimeout(connect, 250);
};
}
function main() {
var translation = new THREE.Vector3();
var quaternion = new THREE.Quaternion();
var euler = new THREE.Euler();
function render() {
var newTime = now();
var seconds = (newTime - oldTime) / 1000;
oldTime = newTime;
var rotationScale = 25 * seconds;
euler.set(
current.rx * rotationScale,
-current.rz * rotationScale,
current.ry * rotationScale);
quaternion.setFromEuler(euler);
camera.quaternion.multiply(quaternion);
camera.quaternion.normalize();
var translationScale = 50 * seconds;
translation.set(
current.tx * translationScale,
-current.tz * translationScale,
current.ty * translationScale);
translation.applyQuaternion(camera.quaternion);
camera.position.add(translation);
requestAnimationFrame(render);
renderer.render(scene, camera);
}
onresize = function() {
var ratio = window.devicePixelRatio || 1;
renderer.setSize(Math.round(innerWidth * ratio), Math.round(innerHeight * ratio));
renderer.domElement.style.width = innerWidth + 'px';
renderer.domElement.style.height = innerHeight + 'px';
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix();
};
var now = window.performance && performance.now
? function() { return performance.now(); }
: function() { return +new Date; };
var oldTime = now();
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(60, 1, 0.1, 1000);
var material = new THREE.ShaderMaterial({
vertexShader: [
'void main() {',
' vec4 vertex = modelViewMatrix * vec4(position, 1.0);',
' gl_PointSize = 10.0 / length(vertex.xyz);',
' gl_Position = projectionMatrix * vertex;',
'}',
].join('\n'),
fragmentShader: [
'void main() {',
' float radius = max(0.0, 1.0 - length(gl_PointCoord.xy * 2.0 - 1.0));',
' gl_FragColor = vec4(radius * radius);',
'}',
].join('\n'),
blending: THREE.AdditiveBlending,
depthTest: false,
transparent: true
});
var geometry = new THREE.Geometry();
for (var i = 0; i < 100000; i++) {
var vertex = new THREE.Vector3();
vertex.x = Math.random() * 2 - 1;
vertex.y = Math.random() * 2 - 1;
vertex.z = Math.random() * 2 - 1;
geometry.vertices.push(vertex);
}
scene.add(new THREE.PointCloud(geometry, material));
camera.position.z = 5;
camera.matrixAutoUpdate = true;
document.body.appendChild(renderer.domElement);
onresize();
connect();
render();
}
main();
</script>