This page is work-in-progress. You can reach me on twitter or mail to rezoner1337@gmail.com

Basic THREE + PLAYGROUND setup

THREE.js is a library that makes 3D rendering in javascript very simple.

PLAYGROUND.js is a library that provides mouse, keyboard and other essentials.

In this tutorial we will load a car that I found on Clara.io and display it through THREE.js

You will need a http server - it can be either some webhosting service or your local server like XAMPP

Have you ever played Interstate 76 by the way?

Files

Create some folder on your webserver and put following files in it:

  1. Download three.js 3d renderer
  2. Download playground-base.js mouse, keyboard, screen, etc
  3. Download playground.three.js route three.js loaders to playground
  4. I've used this car from Clara.io rename it to car.json and put in objects/ folder
  5. Also put all textures that come with the car in the same objects/ folder (don't change filenames)

Index

Create a text file index.html with following contents:

<!doctype html>

<html>

  <title>Name your game</title>

  <body>

    <script src="three.js"></script>
    <script src="playground-base.js"></script>
    <script src="playground/playground.three.js"></script>
    <script src="game.js"></script>
    <script src="main.js"></script>

  </body>

</html>

Application

Now we are going to create application with three.js renderer:

Create main.js with following contents:

/* main.js */

app = new PLAYGROUND.Application({

  create: function() {

    /* create three.js renderer */

    this.renderer = new THREE.WebGLRenderer();

    /* add renderer container to application container */

    this.container.appendChild(this.renderer.domElement);

    /* set background color for renderer */

    this.renderer.setClearColor(0x552200);

    /* load a car object */

    this.loadObject("car");

  },

  resize: function() {

    /* update renderer size on window resize */

    this.renderer.setSize(this.width, this.height);

  },

  ready: function() {

    /* when everything is ready switch state to game */

    this.setState(game);

  },

  /* you can ignore container part - it defaults to document.body */

  container: exampleContainer

});

Game

Put following contents in game.js:

game = {

  create: function() {

    this.scene = new THREE.Scene();

    this.camera = new THREE.PerspectiveCamera(75, 0, 0.1, 1000);

    /* set camera proportions */

    this.camera.aspect = this.app.width / this.app.height;
    this.camera.updateProjectionMatrix();

    /* insert loaded car to current scene */

    this.car = this.app.objects.car.clone();

    this.scene.add(this.car);
    this.scene.add(new THREE.AmbientLight(0xffcc88));

    /* move the camera a little bit above the car */

    this.camera.position.y = 2;

  },

  step: function(dt) {

    /* make camera rotate around the car and look at it */

    this.camera.position.x = Math.cos(this.app.lifetime) * 3;
    this.camera.position.z = Math.sin(this.app.lifetime) * 3;
    this.camera.lookAt(this.car.position);

  },

  render: function() {

    /* render scene */

    this.app.renderer.render(this.scene, this.camera);

  }

};

Run

Run it like a normal website through your webserver.

STATE

I am still working on wrapping variety of Three.js loaders for Playground workflow.

Currently supported loaders are:

Texture

default folder textures/

this.loadTexture("name")

this.textures["name"]

Objects (JSON)

default folder objects/

this.loadObject("name")

this.objects["name"]

Ask question:

Fork me on GitHub