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

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

About this issue

Original URL
State: closed
Created 10 years ago
Reactions: 1
Comments: 19 (4 by maintainers)

Commits related to this issue

Controls: Adding keydown/keyup events listener to window. Fixes #4311 and #4327. — committed to mrdoob/three.js by mrdoob 10 years ago

Most upvoted comments

Since r125 you have to add this line to enable key events:

controls.listenToKeyEvents( window );

+11

Mugen87 on Jun 5, 2021

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

iotarin on Dec 5, 2018

Type error is fixed now thanks to @joshuaellis and the key events work like expected.

svdHero on May 5, 2022

@mrdoob I take that as a “yes”. 😄

svdHero on Apr 25, 2022

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 😃

q2apro on Jul 10, 2015