Posted on August 26, 2019
Rudimentary FPS – Pure Javascript and Canvas
This entry is meant to demonstrate how to implement an FPS camera and control scheme for a 3D game.
I ended up using flat shading on the polygons. One caveat: the polygons are not clipped in the camera view space nor in the screen view space. As a result there are graphical glitches when you get close to the polygons. This demo doesn’t have collision detection, so you can pass through the objects.
Control Scheme:
- w – Move forward
- s – Move backward
- a – Move left
- d – Move right
- mouse – Look around
- mouse click – Shoot
For further reference, the graph below shows the way to calculate the camera direction vector with the help of 2 angles: Yaw (Φ Phi) and Pitch (θ Theta).
It goes from spherical coordinates to vector coordinates. After that, we can easily create the vector space using the cross product for the remaining axes.
Repository: https://github.com/jahepi-mx/rudimentary-fps-js.git