Three.js Player Controller
Over the last year or so I have been dabbling quite a bit with creating games (as well as other interactive 3D environments) using Three.js. I am very much drawn to using Three.js as an alternative to your standard game development platforms such as Unity and Unreal Engine, and I’m keen to create 3D environments that can be explored and move around in. I also wanted to see if I could create a player controller system for third person type scenarios that would allow the camera to zoom in and out and transition back and forth from a more top down / zoomed out point of view.
Anyway, this is a basic demo of my latest progress. The environment is fairly basic and minimal for now, however you can use your keyboard and mouse (or the touch joysticks on mobile) to move around and pan and zoom the camera etc. You can also jump, and fall, and push some of the objects around. If you’re on desktop left click and drag the mouse to look around.
Otherwise, it’s still only early days and I’ve got a list of things I would like to do to take this further. Please feel more than welcome to offer me feedback via email at: contact@henryegloff.com, and of course you can always follow me along on this journey via social media.
I would also like to acknowledge that after trying to code various systems for the camera controller from scratch, I ended up using the standard Orbit Controls for three.js, just parented to the player. I found that this handled the zoom functionality that I was after really well.
And just incase you’re interested, this is built with Vanilla Three.js and Cannon-es for the physics. I also used Detect It, Keydrown, and Vercel for deployment, plus Mixamo for the motion captures. The whole thing comes to about 3.4MBs. – About 2.3MB for the models and motion captures, and a bit over 1MB for the script.