Camera controls for Three.js based on the view controls of a popular online MMO. Use mouse with Alt and Ctrl keys to position and rotate a perspective camera. Use Esc key to return camera to where it started.
Demo with instructions is here.
***Important Note***
The default activationKey for viewControls is the Alt key.
On some operating systems (Lubuntu for instance), using the Alt key with mouse drag
is reserved for moving windows across the screen.
This can be disabled system-wide (in Lubuntu at least) by editing ~/.config/openbox/lubuntu-rc.xml
and commenting-out items under the line <context name="Frame"> that begin with <mousebind button="A...
Alternatively, you can set the activationKey to a key such as "OS" (the "windows" key)
and use that instead:
controls = new ViewControls( camera, scene, renderer.domElement, { activationKey: "OS" } );See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState for suitable values.
// import
import {ViewControls} from "./ViewControls.js";
// create instance with these three arguments
var viewControls = new ViewControls( camera, scene, renderer.domElement );
// update once per frame in your render loop:
viewControls.update()Upon running your scene, if you hold the Alt key down and click (and hold) your mouse on an object,
The camera should pan toward that object automatically. After that, moving the mouse left or right
orbits around the object. Moving the mouse up and down dollies the camera closer and farther away
Holding the Alt+Ctrl keys simultaneously changes the mouse up and down behavior to
orbit over or under the object. Mouse left and right remain as before.
Pressing the Esc key returns the camera to its original position and rotation.