WebGL First Person Render

Overview

A first person movement demonstration using WebGL 3D rendering.

External Libraries and Tools Used

Three.JS - a JavaScript library and API for 3D Graphics.

Keeny.nl - online asset market place for game models.

MTLLoader.JS - MTL Resource loader by angelxuanchang.

OBJLoader.JS - OBJ Resource loader by mrdoob.

Credit is given where due for these tools.

Techniques

Locking The Camera

Moving forwards ('w' key is being pressed):

X_{cameraPosition} = X_{cameraPosition} - sin(Y_{cameraRotation}) - V_{mouseVelocity}

Z_{cameraPosition} = Z_{cameraPosition} - (-cos(Y_{cameraRotation})) - V_{mouseVelocity}

Moving backwards ('s' key is being pressed):

X_{cameraPosition} = X_{cameraPosition} + sin(Y_{cameraRotation}) - V_{mouseVelocity}

Z_{cameraPosition} = Z_{cameraPosition} - (-cos(Y_{cameraRotation})) - V_{mouseVelocity}

Strafing left ('a' key is being pressed):

X_{cameraPosition} = X_{cameraPosition} + sin(Y_{cameraRotation} + π / 2) - V_{mouseVelocity}

Z_{cameraPosition} = Z_{cameraPosition} - (-cos(Y_{cameraRotation} + π / 2)) - V_{mouseVelocity}

Strafing right ('d' key is being pressed):

X_{cameraPosition} = X_{cameraPosition} + sin(Y_{cameraRotation} - π / 2) - V_{mouseVelocity}

Z_{cameraPosition} = Z_{cameraPosition} - (-cos(Y_{cameraRotation} - π / 2)) - V_{mouseVelocity}

Turning camera right ('right arrow ->' key is being pressed):

Y_{cameraRotation} = Y_{cameraRotation} + V_{mouseVelocity}

Turning camera left ('left arrow <-' key is being pressed):

Y_{cameraRotation} = Y_{cameraRotation} - V_{mouseVelocity}

First Person Model Tracking

Positioning:

X_{cameraPosition} = X_{cameraPosition} - sin(Y_{cameraRotation} + π / 6) * C

Y_{cameraPosition} = Y_{cameraPosition} - C + sin(X_{cameraPosition} + Z_{cameraPosition}) * C

Z_{cameraPosition} = Z_{cameraPosition} - cos(Y_{cameraRotation} + π / 6) * C

Rotation:

X_{cameraRotation} = X_{cameraRotation}

Y_{cameraRotation} = Y_{cameraRotation} - π (ensures that the model faces the right way.)

Z_{cameraRotation} = Z_{cameraRotation}

Projectile Calculations

V_{projectileVelocityX} = sin(Y_{cameraRotation})

V_{projectileVelocityY} = 0

V_{projectileVelocityZ} = cos(Y_{cameraRotation})

Controls

Key	Movement
W	Walk forward.
S	Walk backward.
A	Strafe left.
D	Strafe right.
Space Bar	Fire weapon.
Left Arrow Key	Turn camera left.
Right Arrow Key	Turn camera right.

Demo GIFs