<!-- title: Three Arena --> <!-- subtitle: A WebGL game engine -->

Usage no npm install needed!

<script type="module">
  import threearena from '';


Three Arena

Three Arena is an opiniated WebGL game framework to create 3D terrain-based games in an HTML context. It uses three.js 3D engine, machinejs behaviour trees, recastnavigation pathfinding system, knockoutjs dom binding system and other open source projects.


  • click-to-move on any .obj mesh object with an easy pathfinding system
  • use your level geometry file directly, or load a custom navigation mesh
  • single unit control
  • mouse & arrow keys camera behaviour
  • customizable HTML & CSS for HUD
  • customizable scene objects interactive menus (shops, ...)
  • generic character model system, works well with converted MD2 (Quake) files
  • characters behaviours
  • attack when enemmy in sight
  • move to a greater objective
  • collect a ressource like StarCraft II SCVs
  • spells with 3d fx, min-max distance, cooldown
  • spatial sound effects
  • built-in common 3D game objects
  • Flies
  • Water
  • Defense Tower
  • Shop
  • Spawning pool
  • Collectible
  • game interaction through events
  • game.on('start', function)
  • game.on('set:terrain', function)
  • game.on('added:character', function)
  • character.on('hit', function)
  • character.on('death', function)
  • and many others..
  • You have a super fun idea ? Great !
  • add it as a ticket
  • you can code it ? send a pull request from master branch !

Not ready (yet)

  • multiplayer game server
  • collisions system


Some examples here

Or run npm install && npm start from the project root.

  new Arena({
    container: 'game-container', // the container DOM ID

    cameraHeight: 80,

    fog: { near: 20, far: 250 }, // configure fog

  .setTerrain('/gamedata/maps/simplest.obj', { // use this .OBJ as terrain

    map: '/path/to/terrain/texture.png' // the terrain texture

    // other material options, like bumpMap, wireframe, etc..

  .addCharacter(function(done){ // add a character

    new Arena.Characters.Ogro({

      name: 'Shrek', // the character name

      image: '/gamedata/unknown.png', // its portrait

      tomb: '/gamedata/models/rts_elements.dae', // use this model when it dies

      life: 100, // start with 100 life points

      onLoad: function(){

        this.learnSpell(Arena.Spells.FireBullet); // learn a spell

        done(this); // on scene !

Show me the code

Hack the pathfinding system

The pathfinding is done via an javascript Emscripten-compiled interface above the c++ library recastnavigation. To add methods in this module, you need to code their javascript interface and rebuild the javascript module with

npm run recast

Or build a separated build with

cd recastnavigation/emscripten
./ ../../lib/pathfinding/recast.js