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