WebGL: support touch screens. (#229)

This commit is contained in:
Philip Rideout
2018-09-10 11:35:20 -07:00
committed by GitHub
parent cc102be69f
commit 6aaa1dc628
3 changed files with 12 additions and 8 deletions

View File

@@ -35,17 +35,18 @@ function maybe_launch() {
if (assets_ready && context_ready) {
_launch();
canvas_resize();
window.addEventListener("resize", canvas_resize);
window.addEventListener("wheel", canvas_mouse);
window.addEventListener("mousemove", canvas_mouse);
window.addEventListener("mousedown", canvas_mouse);
window.addEventListener("mouseup", canvas_mouse);
let canvas = document.getElementById('filament-canvas');
canvas.addEventListener("resize", canvas_resize);
canvas.addEventListener("wheel", canvas_mouse);
canvas.addEventListener("pointermove", canvas_mouse);
canvas.addEventListener("pointerdown", canvas_mouse);
canvas.addEventListener("pointerup", canvas_mouse);
canvas_render();
}
}
// Update a tiny queue of mouse events. We don't send them to WASM immediately because ImGui detects
// click events by looking for three consecutive frames of down-up-down.
// Update a tiny queue of pointer events. We don't send them to WASM immediately because ImGui
// detects click events by looking for three consecutive frames of down-up-down.
function canvas_mouse(evt) {
let args = [evt.clientX, evt.clientY, evt.deltaX || 0, evt.deltaY || 0, evt.buttons];
if (evt.buttons != previous_mouse_buttons || queued_mouse_events.length == 0) {

View File

@@ -4,13 +4,14 @@
<meta charset="utf-8">
<title>Suzanne</title>
<link href="favicon.png" rel="icon" type="image/x-icon"/>
<meta name=viewport content='width=device-width,initial-scale=1'>
<meta name="viewport" content="width=device-width,user-scalable=no">
<style>
body {
margin: 0;
overflow: hidden;
}
#filament-canvas {
touch-action: none;
width: 100vw;
height: 100vh;
}

View File

@@ -4,12 +4,14 @@
<meta charset="utf-8">
<title>Triangle</title>
<link href="favicon.png" rel="icon" type="image/x-icon"/>
<meta name="viewport" content="width=device-width,user-scalable=no">
<style>
body {
margin: 0;
overflow: hidden;
}
#filament-canvas {
touch-action: none;
width: 100vw;
height: 100vh;
}