Three Arena

http://three-arena.com/examples/#simplest.js

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.

Features

• 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

Examples

Some examples here three-arena.com/examples

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

• The main game code is in lib/index.js
• Character class is in lib/character.js
• A spell example is in lib/spell/bite.js

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
./build.sh ../../lib/pathfinding/recast.js