t3

t3 is a template to build three.js applications without worrying about the common set up process and allowing multiple applications per page, this project is inspired by Jeromme's three.js boilerplate

Features

  • Module defined to work anywhere (follows the UMD pattern)
  • Integration with dat.gui and Stats
  • Micro scene handler for your multistaged app/game :)
  • Micro camera manager
  • Keyboard manager utility to catch keyboard events
  • Themes for the default scene
  • Frame rate control
  • Object caching

Background

three.js as many people should already know is a library to make interactive 3D graphics and the best of it is that in runs without any plugin/application to install, you just need a modern browser and that's it! (for a detailed explanation of the hello world example from this awesome framework see hello threejs source)

As a casual three.js user I find myself doing the following tasks for every project:

  • Create the scene, renderer and camera
  • Set up an update method
  • Set up the game loop

Wouldn't it be better to somehow have boilerplate code that does all these things at least for quick demonstrations? Jeromme Etienne created a template to get started right away :), even though it was great it was not made for the module world, it just created tons of variables on the global scope which is not good as we know. Wouldn't it be great to have a template that is AMD, CommonJS ready? That's the purpose of t3, to help developers create three.js demos with little code and without worrying about this repetitive process.

Examples

Basic example:

define(['t3'], function (t3) {
  return t3.Application.run({
    id: 'canvas'
  });
});

A rotating cube:

define(['t3'], function (t3) {
  return t3.Application.run({
    id: 'canvas',
    init: function () {
      var geometry = new THREE.BoxGeometry(20, 20, 20);
      var material = new THREE.MeshNormalMaterial();
      this.cube = new THREE.Mesh(geometry, material);
      this.cube.position.set(100, 100, 100);
      // this.activeScene = this.scenes.default      
      this.activeScene
        .add(this.cube);
    },
    update: function (delta) {
      this.cube.rotation.x += 0.01;
      this.cube.rotation.y += 0.01;
    }
  });
});

Check out more examples at http://maurizzzio.github.io/t3/docs/

Acknowledgments

Special thanks to the author of the awesome three.js mr.d(oo)b

This project wouldn't have been possible without the help from the following libraries:

Also thanks to Neal Shyam, Developer Evangelist at http://challengepost.com/ who suggested me to post it here, thank you Neal!

Built With

Share this project:
×

Updates