Fly Controls in threejs
There are a number of official camera controls that can be used with threejs it is just that they are not built into the core of three.js itself. I wrote a post on one of these camera control options which was the orbit controls a long time ago, but I thought that I should take a moment to look into at least one of the other options to make use of in some examples such as the three.js fly controls. So then this will be a quick post on use the official fly controls in a three.js project.
Fly Controls in three.js and what to know first
Make sure that you have added the fly controls after adding three.js in the html
The official fly controls can be found in the examples folder of the official three.js github repository. When grabbing a copy from there make sure that it is for the version of three.js that you are using. Changes are rare with many of these controls, but I have found that they do happen once in a while.
Source code is on Github
The Source code examples that I am writing about here can also be found on Github.
Version Numbers matter with three.js
When I wrote this post I was using r127 of three.js, and the last time I came around to do some editing I was using r146. Code breaking changes are made to three.js every now and then so if the examples here are not working the first thing to check is what version of three.js is being used. After that there are some additional things to be aware of such as the fact that these code examples will break if you are not adding the official fly controls on top of three.js by itself.
1 - Some Basic getting started type examples of fly controls
There are two general ways of using fly controls, one of which I think is intended, and the other way maybe not. You see everything will work just fine if and only if the whole page is being used for the project. In the event that I am using a dom element that just takes up and area of the page the mouse controls will not work as expected. There are ways of addressing this though by making use of an iframe for example. So in this section I will have a basic example where the whole page is used, and another where an iframe is being used.
1.1 - Fly controls example that uses the whole page
So now that I have all the basic stuff in place when it comes to having a scene object as well as something to look at in terms of one or more mesh objects, a camera object, and a renderer all in place now I can get to the actual fly controls. To use the Fly Controls I just need to call the THREE.FlyControls constructor that is added by way of the additional files in the examples folder of the three.js github repo that I mentioned in the basic section of this post.
When calling the constructor the first argument that I am going to want to pass is a reference to the camera object that I want to control with the fly controls, followed by a dom element reference that should typically be the dom element used by the renderer that I am using. However in this example I am using the debug canvas as that is on top of the canvas that is used to remder the threejs scene. After that I am more often than not going to want to save the returned instance of fly controls to a variable or object property to set some additional values, and also to call the update method in a main app loop method.
When it comes to the additional properties there is the draw to look Boolean that I have chose to set to true from the default false value of the controls. There is also the movement speed, and rotation speed values that I have played around with a little and it would seem that these are the per second deltas to use when passing a time delta value when calling the update method.
After that I have my main app loop in which I am getting a seconds value each time the loop method is called and I am then of course passing that to the update method of the fly controls each time.
There is then how to go about using the fly controls when and if you do get them up and running, with that said there are the w,a,s,d keys along with the q, and e keys on the keyboard that should be of interest for you. The wasd keys can be used to change the camera position along a forward backward and up and down kind of movement. The q and e keys are then ways to adjust rotation with the keyboard rather than the mouse. The mouse then can be used as a way to look around from the current camera position.
1.2 - Fly controls in an iFrame
Often I might not want to use the whole page, but rather use the fly controls in a single canvas element in a web page. This is where things can get a little weird, but there are ways of doing this, and one way would be to use an iframe. So for this example I am attaching the dome element of my renderer not to the usual div element, or body, but rather to the body of a document that is in the content window of an iframe. When doing so I have found that the keyboard events will stop working when the iframe is focused on, this is because in the source code of the fly controls the keyboard events are attached to the main window event and not the window event of this iframe. So they way that I went about fixing this was to just use the function bind prototype method to create a handler for the on down and on up methods of the fly controls that and attached that for the on key down and on key up events of the iframe.
Although this seems to work okay, still the best way might be to make a whole other html file, and make that the src of the iframe. In any case you get the general idea of how this works and how it will resolve the problem with mouse events not working as I would like them to when not using the whole page.
So that is all that I have to say about the official fly controls in three.js so far, when I get some time to edit this post I will be sure to expand things when and if I get the time to do so. For now there is maybe taking a moment to look into some of the other official controls to worth with such as the orbit controls also, before considering to look into how to get started with making ones own custom camera controls. I think that I will be getting around to working one or two demos about making custom controls sooner or later, but for now I just like to make use of what there is to work with that is official to just save some time.