Rudimentary FPS – Pure Javascript and Canvas

This entry is to show how to implement a FPS camera and controls for a 3d game.

The demo uses flat shading for polygons, the polygons are not clipped in the camera view space nor in the screen space so it is a bit awful when you approach the objects and they just disappear when you are close enough.

The demo does not include collision detection so you can pass through the objects.

Control Scheme:

  • w – Move forward
  • s – Move backwards
  • a – Move left
  • d – Move right
  • mouse – Look around
  • mouse click – Shoot

For further reference this is a graph which represents how to calculate the vector direction of the camera using Euler angles Yaw (Φ Phi) and Pitch (θ Theta), that is from spherical coordinates to vector coordinates, then we can create the vector space with the help of the cross product to generate the remaining axis´s:

Repository: https://github.com/jahepi-mx/rudimentary-fps-js.git

Demo: https://jahepi-mx.github.io/rudimentary-fps-js/

Leave a Reply