Commit c177d495 authored by Max Bebök's avatar Max Bebök

#54 mubin controls limit input to the focused canvas

parent 1a7339bf
......@@ -174,7 +174,7 @@
</div>
<div class="pane" id="main-sidebar-2">
<canvas class="shrine-canvas">Oops! here should be something nice in 3D</canvas>
<canvas class="shrine-canvas" tabindex="1">Oops! here should be something nice in 3D</canvas>
</div>
<div class="pane-sm sidebar" id="main-sidebar-3" style="max-width: none;">
......
......@@ -151,7 +151,7 @@
</div>
<div class="pane" id="main-sidebar-2">
<canvas class="shrine-canvas">Oops! here should be something nice in 3D</canvas>
<canvas class="shrine-canvas" tabindex="1">Oops! here should be something nice in 3D</canvas>
</div>
<div class="pane-sm sidebar" id="main-sidebar-3" style="max-width: none;">
......
......@@ -16,7 +16,6 @@ module.exports = class Renderer_Helper_FPS_Controls extends Base
this.camera = camera;
this.scene = scene;
this.canvasNode = canvasNode;
this.eventNode = document;
this.getFrameDurationScale = getFrameDurationScale;
this.raycaster = new THREE.Raycaster();
......@@ -56,8 +55,8 @@ module.exports = class Renderer_Helper_FPS_Controls extends Base
if(e.type != "mousemove")
{
this.mouseDown = e.type == "mousedown";
}else{
this.mouseDown = (e.type == "mousedown") && (e.path[0] == this.canvasNode);
}else if(this.mouseDown){
let canvasRect = this.canvasNode.getBoundingClientRect();
this.mousePosNorm.x = e.clientX - canvasRect.left;
......@@ -74,22 +73,21 @@ module.exports = class Renderer_Helper_FPS_Controls extends Base
this.mousePosNorm.x = (this.mousePosNorm.x / canvasRect.width) * 2 - 1;
this.mousePosNorm.y = -(this.mousePosNorm.y / canvasRect.height) * 2 + 1;
if(this.mouseDown)
{
let rotX = e.movementY * this.camRotSpeed * this.invertedX;
let rotY = e.movementX * this.camRotSpeed * this.invertedY;
let rotX = e.movementY * this.camRotSpeed * this.invertedX;
let rotY = e.movementX * this.camRotSpeed * this.invertedY;
if(rotX != 0.0)this.camera.rotation.x += rotX;
if(rotY != 0.0)this.camera.rotation.y += rotY;
}
if(rotX != 0.0)this.camera.rotation.x += rotX;
if(rotY != 0.0)this.camera.rotation.y += rotY;
}
}
_handlerKeys(e)
{
let isKeyDown = (e.type == "keydown");
let direction = [0.0, 0.0, 0.0];
if(e.path[0] != this.canvasNode) {
return;
}
let isKeyDown = (e.type == "keydown");
switch(e.code)
{
case "ArrowRight":
......@@ -131,10 +129,10 @@ module.exports = class Renderer_Helper_FPS_Controls extends Base
init()
{
for(let eventName of this.eventNamesKeys)
this.eventNode.addEventListener(eventName, this._handlerKeysWrapper);
this.canvasNode.addEventListener(eventName, this._handlerKeysWrapper);
for(let eventName of this.eventNamesMouse)
this.eventNode.addEventListener(eventName, this._handlerMouseWrapper);
document.addEventListener(eventName, this._handlerMouseWrapper);
this.camera.rotation.order = "YXZ";
}
......@@ -165,10 +163,10 @@ module.exports = class Renderer_Helper_FPS_Controls extends Base
clear()
{
for(let eventName of this.eventNamesKeys)
this.eventNode.removeEventListener(eventName, this._handlerKeysWrapper);
this.canvasNode.removeEventListener(eventName, this._handlerKeysWrapper);
for(let eventName of this.eventNamesMouse)
this.eventNode.removeEventListener(eventName, this._handlerMouseWrapper);
document.removeEventListener(eventName, this._handlerMouseWrapper);
this.camera.rotation.order = this.oldEulerOrder;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment