In this video I code first person camera controls with mouse to look around and WASD to move. I use p5.js in WEBGL mode for the real-time 3D and math.js for some matrix math to do the rotations for the look around controls. The code for this project is available below, please like and subscribe and if you have any questions or suggestions for future topics let me know!
Correction: Mixed up the naming for spherical coordinates, I meant Azimuth and Zenith.
Source Code: https://editor.p5js.org/rjgilmour/sketches/2MoMCqpSh
Example Scene: https://editor.p5js.org/rjgilmour/sketches/3hqHa6J5s
npm package: https://www.npmjs.com/package/p5-first-person-camera
0:00 Setup and WEBGL mode
0:26 OrbitControl
1:09 Camera Function
2:39 JS Object called cam to store camera properties
4:40 Look around mouse controls
6:59 Rotation matrices for defining position of look at point
7:48 Rotation about z-axis
8:54 Rotation about y-axis
9:36 Matrix transformation multiplication
12:16 Replacing p5 transforms with custom ones
14:52 Finished look around controls
15:38 WASD Movement controls: Forwards
18:32 Backwards movement
18:47 Strafe left/right
19:14 Finished Results
Math.js: https://cdnjs.com/libraries/mathjs
Rotation Matrices: https://en.wikipedia.org/wiki/Rotation_matrix#In_three_dimensions
JavaScript Keycodes: https://www.toptal.com/developers/keycode
Support the channel: https://ko-fi.com/morejpeg
#p5js #javascript #codingchallenge #gamedev #fps
