It would not be that hard to implement some camera controls for a three.js project from scratch, it would just involve some event handlers that would be used to set the position and rotation of the camera using some Object3D class methods. However there is some additional resources in the three.js project repository itself that can be used to quickly set some orbit controls in a flash which can be found in the examples folder of the repository. In this post I will be covering how to quickly set up these orbit controls for the camera, so you do not have to keep changing hard coded values, or spend a great deal of time working on your own solution to just look around a scene this way.
The Orbit Controls solution that can be found in the threejs examples folder in the github repo of the project can be used to quickly set up a solution for panning, zooming, and changing the orientation of a camera with the mouse, keyboard, and touch events. So then these source code examples will need threejs, as well as OrbitControls.js on top of the additional code that I am going over in this post.
The source code examples here that make use of threejs, and OrbitControls.js can also be found in my test threejs repository. This is also where I park the source code examples for my many other blog posts on threejs as well.
When I first wrote this post I was working with r91, and as of this writing when I took a moment to edit this post last I was using r152. Sense then some code breaking changes have happened with Orbit Controls, as well as many other threejs features, so be aware of what version of threejs you are using.
I will still keep the old examples in this post just for the hell of it. It is just that I am going to need to start pulling these source code examples down into the bottom of the content as I start writing newer demos that sould be up at the top.
In this opening basic section I will be going over basic examples of the use of Orbit Controls for both the r146, and r152 code styles that I hav2 set for myself. This is because r146 is the last revision that I am using where I observe that the js folder still exists in the threejs Github Repository. However I am now starting to use r152 as a later revision of threejs where the use of JSM is now needed when it comes to using official addons.
So you might want to have somehting like this in your HTML
The URLS will of course need to change dpeding on how you have things set up, but this is more or less the basic idea. There might be some good reaons to not use an import map, but getting into that might be a bit off topic.
Once I have the script tags set up in the html I can then use import in my main.js file that is being loaded as a module type script tag. Sense I used an import map I can now use ‘three’, and ‘OrbitControls’ rather that what would otherwise have to be relative parts to the modules. In any case once I have the import situation worked out here I can now use threejs to create my usual set of objects such as the scene, camera, and renderer. Once I have a camera, and renderer I then have the Objects that I need to create an instance of Orbit Contorls as well. I can then add additional objects to the scene, and set up a basic animation loop.
Once this is up an running I can then move the camera around and view the cube with Orbit Controls.
These are then the older Basic examples on the Use of the Offical Threejs Orbit Controls.
If you all ready know how to create a basic scene in threejs, and you have a copy of the orbit controls added to the page along with the corresponding version of threejs, then adding orbit controls is not all that hard. The THREE.OrbitControls constructor just needs to be called passing a camera that the orbit controls will be controlling as the first argument. On top of the camera a dom element reference might also have to be added if you are using a later version of three.js ( at least r125 forward as of this writing )
When using the orbit controls constructor in r125 I now need to pass a camera as the first argument like before, but now I also need to pass a dom element reference as the second argument. Once you have an instance of the controls you just need to call the update method of the controls in a render or update loop.
When I first wrote this post I was using r91. With that version of threejs I just need to call the constructor passing the instance of the camera I want to to control which will give me an instance of THREE.OrbitControls. However in late versions of threejs this might cause an error.
I have not covered everything that the Orbit controls has to offer. It looks like it has some methods for saving and loading camera save states among other things but you get the idea. If you are thinking about taking the time to make your own controls for something like this think again, chances are it has been done before, and there is so shame of just taking advantage of these things like this to save time. The focus on any three.js project, or any project for that matter should be whatever it is that sets your project apart from all others. Chances are that is not going to be the orbit controls is it? I didn’t think so, just use this stuff and move on.
If you take a look at the other controls in the three.js examples folder it looks like there are some additional options for quickly adding some typical controls to a three.js project, including fly controls. I have not check out all of these options yet as there is a lot to get to when it comes to looking I to what there is to worth with in the official three.js repo, but I feel they might also come in handy at some point as well I am sure.