Coding First Person Camera Controls in 10 Minutes
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
Смотрите видео Coding First Person Camera Controls in 10 Minutes онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь morejpeg 25 Январь 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 2,55 раз и оно понравилось 6 людям.