-
Notifications
You must be signed in to change notification settings - Fork 0
/
handBall.html
222 lines (182 loc) · 7.9 KB
/
handBall.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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!--
Author: Austin Bearden
Purpose: Control the Babylon ball like a hand
Filename: handBall.html
Final Submission Date: 04/23/2019 (April 23rd, 2019)
-->
<!--
Built on top of Babylon.js standard tutorial found here: https://doc.babylonjs.com/
-->
<!--
Author: Austin Bearden
Date Created: 04/04/2019
Purpose: Get connect/info live from LeapMotion controller
Using code from: LeapMotion SDK: JSONViewer.html (https://developer-archive.leapmotion.com/documentation/v2/javascript/supplements/Leap_JSON.html#connecting-to-the-websocket-server)
Filename: connection.html
-->
<!-- Get LeapMotin Data -->
<!DOCTYPE html>
<!------------------------------------------------------------------------------
| Copyright (C) 2012-2013 Leap Motion, Inc. All rights reserved. |
| Leap Motion proprietary and confidential. Not for distribution. |
| Use subject to the terms of the Leap Motion SDK Agreement available at |
| https://developer.leapmotion.com/sdk_agreement, or another agreement |
| between Leap Motion and you, your company or other organization. |
------------------------------------------------------------------------------->
<html>
<head>
<title>Leap WebSocket JSON Viewer</title>
<title>Babylon - Getting Started</title>
<!-- Bablyon links and CSS styling -->
<!-- Link to the last version of BabylonJS -->
<script src="https://preview.babylonjs.com/babylon.js"></script>
<!-- Link to the last version of BabylonJS loaders to enable loading filetypes such as .gltf -->
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<!-- Link to pep.js to ensure pointer events work consistently in all browsers -->
<script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>
<style>
html, body {
overflow: hidden;
width : 100%;
height : 100%;
margin : 0;
padding : 0;
}
#renderCanvas {
width : 100%;
height : 100%;
touch-action: none;
}
</style>
<canvas id="renderCanvas"></canvas>
<script>
var ws;
var paused = false;
var pauseOnGesture = false;
var focusListener;
var blurListener;
// hand's palm position
var palmPosX = 10;
var palmPosY = 0;
var palmPosZ = 3;
var rotationValue = 0; //made this global variable for the sake of control bablyon object
// Support both the WebSocket and MozWebSocket objects
if ((typeof(WebSocket) == 'undefined') &&
(typeof(MozWebSocket) != 'undefined')) {
WebSocket = MozWebSocket;
}
//Babylon main script code
window.addEventListener('DOMContentLoaded', function() {
// All the following code is entered here.
var canvas = document.getElementById('renderCanvas');
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
// Create a basic BJS Scene object.
var scene = new BABYLON.Scene(engine);
// Create a FreeCamera, and set its position to (x:0, y:5, z:-10).
var camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0, 5,-10), scene);
// Target the camera to scene origin.
camera.setTarget(BABYLON.Vector3.Zero());
// Attach the camera to the canvas.
camera.attachControl(canvas, false);
// Create a basic light, aiming 0,1,0 - meaning, to the sky.
var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);
// Create a built-in "sphere" shape.
var sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {segments:16, diameter:2}, scene);
// Initially set X, Y, Z position of Sphere
sphere.position.x = palmPosY;
sphere.position.y = palmPosY;
sphere.position.z = -palmPosZ;
// Create a built-in "ground" shape.
// var ground = BABYLON.MeshBuilder.CreateGround('ground1', {height:6, width:6, subdivisions: 2}, scene);
//adding plane for collision
var plane = BABYLON.MeshBuilder.CreatePlane("plane", {width: 5, height: 5}, scene);
engine.runRenderLoop(function () {
// Update X, Y, Z position of Sphere
sphere.position.x = palmPosY/100;
sphere.position.y = palmPosY/100;
sphere.position.z = -palmPosZ/100;
//create methods for updating variables and call methods here!!
scene.render();
});
// Return the created scene.
return scene;
}
var scene = createScene();
window.addEventListener('resize', function() {
engine.resize();
});
});
// Create the socket with event handlers
function init() {
// Create and open the socket
ws = new WebSocket("ws://localhost:6437/v6.json");
// On successful connection
ws.onopen = function(event) {
var enableMessage = JSON.stringify({enableGestures: true});
ws.send(enableMessage); // Enable gestures
ws.send(JSON.stringify({focused: true})); // claim focus
focusListener = window.addEventListener('focus', function(e) {
ws.send(JSON.stringify({focused: true})); // claim focus
});
blurListener = window.addEventListener('blur', function(e) {
ws.send(JSON.stringify({focused: false})); // relinquish focus
});
// document.getElementById("main").style.visibility = "visible";
// document.getElementById("connection").innerHTML = "WebSocket connection open!";
};
// On message received
ws.onmessage = function(event) {
if (!paused) {
var obj = JSON.parse(event.data);
//update palmPosX,Y,Z variable values from the JSON feed from the WebSocket
var objRotation = obj.hands[0].armBasis[1];
palmPosX = obj.hands[0].palmPosition[0]; // x-dimension of palm position
palmPosY = obj.hands[0].palmPosition[1]; // y-dimension of palm position
palmPosZ = obj.hands[0].palmPosition[2]; // z-dimension of palm position
console.log("PalmX: ", palmPosX);
console.log("PalmY: ", palmPosY);
console.log("PalmZ: ", palmPosZ);
}
};
// On socket close
ws.onclose = function(event) {
ws = null;
window.removeListener("focus", focusListener);
window.removeListener("blur", blurListener);
document.getElementById("main").style.visibility = "hidden";
document.getElementById("connection").innerHTML = "WebSocket connection closed";
}
// On socket error
ws.onerror = function(event) {
alert("Received error");
};
}
function togglePause() {
paused = !paused;
if (paused) {
document.getElementById("pause").innerText = "Resume";
} else {
document.getElementById("pause").innerText = "Pause";
}
}
function pauseForGestures() {
if (document.getElementById("pauseOnGesture").checked) {
pauseOnGesture = true;
} else {
pauseOnGesture = false;
}
}
</script>
</head>
<body onload="init();">
<h1>Leap WebSocket JSON Viewer</h1>
<button id="pause" onclick="togglePause()">Pause</button>
<input type="checkbox" id="pauseOnGesture" onclick="pauseForGestures()">Pause on gesture</input>
<div id="connection">WebSocket not connected</div>
<div id="main" style="visibility:hidden">
<h3>JSON Frame data:</h3>
<div id="output"></div>
</div>
</body>
</html>