Three.js: Keys not working with OrbitControls when passing the renderer.domElement

[echteinfachtv]

I tried to achieve keyboard navigation in a scene using OrbitControls.js with:

var controls = new THREE.OrbitControls(camera, renderer.domElement);

However, when passing the render.domElement the key navigation does not work. Instead I used:

var controls = new THREE.OrbitControls(camera);

and the keys are recognized.

Problem with this is, however, that the mouse movement is now captured when changing the user interface controls (sliders) from dat.gui.min.js. In other words, changing the slider also pans the entire scene. It can be tested here: http://www.echteinfach.tv/3d/quader/volumen/index.html

[mrdoob]

Did you try clicking in the viewport so it has the focus and then using the keys?

[WestLangley]

Confirmed. OrbitControls are not responsive to keys if a domElement is passed to the controls constructor.

var controls = new THREE.OrbitControls( camera, renderer.domElement );

three.js r.65

[echteinfachtv]

@mrdoob yes.

[echteinfachtv]

And by the way, another window.addEventListener('keydown', function(event) did not work anymore either. Indeed there seems to be a focus (?) problem.

[jeum]

It was the meaning of my recent issue, I replace the event's attach in OrbitControls.js and it works :

window.addEventListener( 'keydown', onKeyDown, false );
window.addEventListener( 'keyup', onKeyUp, false );

And if you have more than one domElement it seems that you'll have to use something like that ?

[echteinfachtv]

Confirmed, when replacing:

this.domElement.addEventListener( 'keydown', onKeyDown, false );

with

window.addEventListener( 'keydown', onKeyDown, false );

we can pass the renderer.domElement and the keys work as expected.

[echteinfachtv]

FYI, when using the workaround above, my keylistener from with the html file did not work anymore. So I did the following:

1. in OrbitControls.js change function onKeyDown( event ) { to this.onKeyDown = function (event) {
2. in OrbitControls.js comment out this.domElement.addEventListener( 'keydown', onKeyDown, false ); resp. if you have the workaround above window.addEventListener( 'keydown', onKeyDown, false );
3. in the HTML add to your key listener:

window.addEventListener('keydown', function(event) {
controls.onKeyDown(event); // orbit controls
// ...
if(event.keyCode == 88) { // custom keys
// ...

Then all keys will work.

[mrdoob]

Implemented. Thanks!

[q2apro]

Just for documentation, since I stumbled again over this:

If you have an input field outside of the canvas, and there you use the cursor keys, you will see that the orbit controls also move the camera.

To prevent this behavior, you need:

$('input').focusin( function(e) {
    // disable orbit camera when cursor is in input field
    controls.noPan = true;
}).focusout( function(e) {
    // enable orbit camera when cursor is losing focus
    controls.noPan = false;
});

Hope that helps all visitors here :)

[WestLangley]

@q2apro Probably, all you need to do is this:

var controls = new THREE.OrbitControls( camera, renderer.domElement );

[charlesfleche]

No, @q2apro is right : OrbitControls register its keydown event on window, not on DOMElement passed in its contructor.

[iotarin]

The issue still alive , I removed renderer.domElement and now is working