-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
meshcat.html
95 lines (85 loc) · 2.69 KB
/
meshcat.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
<!DOCTYPE html>
<!-- This file is forked from dist/index.html in rdeits/meshcat.-->
<html>
<head>
<meta charset=utf-8>
<title>Drake MeshCat</title>
</head>
<body>
<div id="meshcat-pane">
</div>
<script type="text/javascript" src="meshcat.js"></script>
<script type="text/javascript" src="stats.min.js"></script>
<script type="text/javascript" src="msgpack.min.js"></script>
<script>
var stats = new Stats();
var rtrPanel = stats.addPanel( new Stats.Panel( 'rtr%', '#ff8', '#221' ) );
document.body.appendChild( stats.dom );
stats.dom.id = "stats-plot";
stats.showPanel(stats.dom.children.length - 1)
var rtr = 0;
var viewer = new MeshCat.Viewer(document.getElementById("meshcat-pane"));
viewer.animate = function () {
viewer.animator.update();
if (viewer.needs_render) {
viewer.render();
}
}
function animate() {
stats.begin();
rtrPanel.update(rtr*100, 100); // easier to read as percentage
viewer.animate()
stats.end();
requestAnimationFrame(animate);
}
function handle_message(ws_message) {
let decoded = msgpack.decode(new Uint8Array(ws_message.data));
if (decoded.type == "realtime_rate") {
rtr = decoded.rate;
} else if (decoded.type == "hide_realtime_rate") {
stats.dom.style.display = decoded.hide ? "none" : "block";
console.log("hiding", decoded.hide)
} else {
viewer.handle_command(decoded)
}
}
requestAnimationFrame( animate );
// Set background to match Drake Visualizer.
viewer.set_property(['Background'], "top_color", [.95, .95, 1.0])
viewer.set_property(['Background'], "bottom_color", [.32, .32, .35])
// Set the initial view looking up the y-axis.
viewer.set_property(['Cameras', 'default', 'rotated', '<object>'],
"position", [0.0, 1.0, 3.0])
try {
url = location.toString();
url = url.replace("http://", "ws://")
url = url.replace("https://", "wss://")
url = url.replace("/index.html", "/")
url = url.replace("/meshcat.html", "/")
connection = new WebSocket(url);
connection.binaryType = "arraybuffer";
connection.onmessage = (msg) => handle_message(msg);
connection.onclose = function(evt) {
console.log("onclose:", evt);
}
viewer.connection = connection
} catch (e) {
console.info("Not connected to MeshCat websocket server: ", e);
}
</script>
<style>
body {
margin: 0;
}
#meshcat-pane {
width: 100vw;
height: 100vh;
overflow: hidden;
}
#stats-plot {
display: none;
}
</style>
<script id="embedded-json"></script>
</body>
</html>