Skip to content

abhandaru/Game3

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

70 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Game3

Update – The react-three-fiber project is amazing and should be preferred over this library. It has the same goals, much richer functionality, and a great community.


Game3 is a JavaScript framework to write 3D apps using ThreeJS.

The project is currently in it's infancy. The main problem with most ThreeJS apps is that there is a lot of exposed boilerplate code, and no consistent way to handle events with objects in the scene. Track this project on Github: Game3

Dependencies

You only need the following if you want to build (consolidate and minify) the library. You can edit, test, and contribute without any of this.

  • make - We use GNU make as a command line tool.
  • uglifyjs - We use a global UglifyJS install.

Features

The project is young! We are a little feature light, but worth using and always growing.

  • Game3.Class - Standard inheritance model.
  • Game3.Game - Camera, renderer, and animation are all set up for you.
  • Game3.Model - Bind handlers easily, add state to your scene objects.
  • Game3.Event - Directly sent to your model/view, with rich metadata.
  • Game3.Collision - A collision event with rich metadata.
  • Game3.Collisions - Send your model/view collision events.
  • this._super - Easy override and extension.
  • Growing fast.

Simple Example

Here is a simple example using the Game3 framework. First, add the library scripts to the <head> tag.

<script type="text/javascript" src="three.min.js"></script>
<script type="text/javascript" src="game3.min.js"></script>

By extending the provided base classes, it is easy to customize and override without exposing too much. During construction, run your own init function, and create/configure the objects you want.

var Game = Game3.Game.extend({
  init: function(el) {
    // make a cube and a light
    this.light = new Game3.Light(0xFFFFFF, new THREE.Vector3(400, 300, -400));
    this.geo = new Model(this);

    // show objects
    this.add(this.geo);
    this.add(this.light);
  },

  // gets called every timer fired
  update: function(dt) {
    this.geo.update();
  }
});

Declaring models and specifying how they'll be rendered is easy. Just extend the base Model class, and only override or supply methods you need. Additionally, binding event handlers is simple. If you have provided a handler, it will be called transparently. All the projection math is done for you. In an MVC-like pattern, you can operate on the highest level app class from here.

var Model = Game3.Model.extend({
  init: function(game) {
    // set up geometry
    this.pause = false;
    this.geo = new THREE.Mesh(
        new THREE.IcosahedronGeometry(200, 1),
        new THREE.MeshNormalMaterial());
    // set object
    this.interactive = true;
    this.mesh(this.geo);
  },

  click: function(event) {
    this.pause = !this.pause;
  },

  update: function(dt) {
    if (this.pause) return;
    this.geo.rotation.x += 0.01;
    this.geo.rotation.y += 0.02;
  }
});

All that's left is to create an instance of the App, and provide it a container to live in. The whole thing clocks in at about 50 lines (including whitespace and comments)!

// You will want to run these in a DOMReady handler.
var el = document.getElementById('game');
var game = new Game(el);

You can find complete examples in the test folder. A minified version of the library can be found in the build folder. Questions? Feel free to contact me or post an issue.

About

A framework for writing games using THREE.js.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages