question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Keys not working with OrbitControls when passing the renderer.domElement

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 10 years ago
  • Reactions:1
  • Comments:18 (4 by maintainers)

github_iconTop GitHub Comments

7reactions
Mugen87commented, Jun 5, 2021

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

controls.listenToKeyEvents( window );
3reactions
iotarincommented, Dec 5, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

OrbitControls#keys – three.js docs
Orbit controls allow the camera to orbit around a target. ... This must be passed in the constructor; changing it here will not...
Read more >
THREE.JS OrbitControls not working when DOM Element is ...
I'm trying to place labels as element with position:absolute; over a THREE.JS scene. The problem is that when the mouse is over one...
Read more >
Orbit controls for threejs from the project itself
I just need to call the THREE.OrbitControls constructor and pass a camera as the first argument, and then a dom element as the...
Read more >
OrbitControls - Verge3D User Manual - Soft8Soft
domElement : HTMLDOMElement. The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here...
Read more >
How to control Three.js Camera like a Pro - Medium
Well, yeah, but OrbitControls might not be enough in certain scenarios. ... common';let camera, scene, canvas, controls, rendererinit()
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found