Created: 2014-05-19 01:07
Updated: 2014-08-06 00:36



  • Simple, 3D, first-person shooter using JSFeat and Three js

  • Uses the Lucas Kanade optical tracking from JS feat to track the user's head. This was chosen because

    • 1 I knew it worked smoothly and I needed something reliably for the Hackathon
    • 2 It is much smoother than other headtracking libraries I've come across, which keep racalculating the size of your head and therefore have too much 'jitter' in them.
  • Work on this repo will require you spin up a server since chrome won't let you access your webcam from a local HTML file. If you're unfamiliar with node, you'll only have to:

    • Install Node.
    • In terminal, when in the folder, run NPM install
    • Run node server.js
    • In your browser, navigate to localhost:8080

The meat of the repo is in the public folder.

  • index.html

    • Contains video element and canvas to render the video on to.

    • These are 'run' by the files in public/lib/exampleCode that are largely unchanged since forked from JS Feat.

    • In addition to my changes, I've added some annotation to help forkers understand what's going on.

    • Also contains a Three js webGL renderer, which is dynamically appended from /public/js/3frame.js.

    • Except for headtracking, all game logic and rendering lives inside /public/js.

    • Any other dynamic elements in index.html are also controlled from within /public/js

  • /public/js/3frame.js

    • Primary controller of rendering and 3d effect. Rending behaviour, update patten and cube characteristics should be adjusted here. Renders cubes and controls camera position using inputs from:
  • /public/js/extractedValues.js

    • Takes output from sampleWorkflow.js and converts it into meaningful coordinates in the context of the element and rendering from 3frame.js. Variables defining perspective and camera behaviour should be adjusted here.
  • /public/js/room.js

    • Statically defines a wireframe room rendered by 3frame.js. Variables defining these characteristics should be adjusted here.
  • /public/js/laser.js

    • Defines logic and animation behind the ball firing action.
  • /public/js/tracker.js

    • Defines aiming logic behind ball-firing action. Note this does not use collision detection but instead requires the user to be aiming at the front-facing surface of the cube to register a 'hit'.
    • Also tracks game statistics and controlls DOM elements that reflect these to the user
  • /public/js/userInt.js

    • Contains jQuery listeners that controll the game initialisation. No game logic or data here, just a control interface.
  • /public/js/vid.js

    • Deprecated. Simple js file used just to get video working during initial commit. Useful for debugging video issues or working out compatibility issues between browsers.
Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more