Coding First Person Camera Controls in 10 Minutes

Published: 25 January 2023
on channel: morejpeg
2,559
60

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/ske...
Example Scene: https://editor.p5js.org/rjgilmour/ske...
npm package: https://www.npmjs.com/package/p5-firs...

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/Rotatio...
JavaScript Keycodes: https://www.toptal.com/developers/key...

Support the channel: https://ko-fi.com/morejpeg

#p5js #javascript #codingchallenge #gamedev #fps


Watch video Coding First Person Camera Controls in 10 Minutes online without registration, duration hours minute second in high quality. This video was added by user morejpeg 25 January 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,55 once and liked it 6 people.