zerojs

Basis

<script src="zero.min.js"></script>
<script>
function main() {
  // ...snip...
}
document.addEventListener('DOMContentLoaded', main, false);
</script>

First of all, you should load zero.js script and define a function which is invoked when all DOM contents are loaded. In the function, named main in this case, you will add codes to draw the origin in the no-dimensional world.

Scene

var scene = new ZERO.Scene();

Scene should be the first object to be instantiated. This represents the whole world in zero.js. In the class, you will set all things required to constract the world such as objects, lights and a camera.

Geometry, Material and Mesh

var geometry = new ZERO.PointGeometry();
var material = new ZERO.MeshBasicMaterial({color: 0xff0000});
var mesh = new ZERO.Mesh(geometry, material);
scene.add(mesh);

Objects in zero.js consist of three components: geometry, material and mesh.

  • A geometry represents a shape of an object. In the zero.js world there is only one Geometry named PointGeometry representing the origin. PointGeometry has no attribute such as size and position because located in the no-dimensional world.
  • A material represents an apperance of an object. Currently only MeshBasicMaterial is available.
  • Mesh represents an object and is a container of a geometry and a material.

Camera

var width = 500;
var height = 500;
var fov = 30;
var aspect = width / height;
var near = 0.1;
var far = 1000;
var camera = new ZERO.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(500);

To draw an object, you should decide the place from where you would like to see the object. The place is called a camera. Unfortunately a no-dimensional world is such a perfect world where one is all and all is one, in other words there is no boundary to distinguish observees from observers. This is because a camera exists in one-dimensional world. The properties of PerspectiveCamera are illustrated in the figure below.

Light

var directionalLight = new ZERO.DirectionalLight(0xffff00);
directionalLight.position.set(1.0);
scene.add(directionalLight);

Although the world has been constructed, you can see nothing without light. Let's say "let there be light."

Renderer

var renderer = new ZERO.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

At last, use WebGLRenderer to render the world on WebGL. The renderer's size is, in short, the size of a canvas element. If you would like to animate the world, try repeating calling renderer.render with changing properties of a camera and a scene. The demo5 may be helpful for you.

Collect Up

Let's see the whole for confirmation.

<html>
<head>
  <script src="zero.min.js"></script>
  <script>
  function main() {
    var scene = new ZERO.Scene();

    var geometry = new ZERO.PointGeometry();
    var material = new ZERO.MeshBasicMaterial({color: 0xff0000});
    var mesh = new ZERO.Mesh(geometry, material);
    scene.add(mesh);
    
    var width = 500;
    var height = 500;
    var fov = 30;
    var aspect = width / height;
    var near = 0.1;
    var far = 1000;
    var camera = new ZERO.PerspectiveCamera(fov, aspect, near, far);
    camera.position.set(500);

    var directionalLight = new ZERO.DirectionalLight(0xffff00);
    directionalLight.position.set(1.0);
    scene.add(directionalLight);

    var renderer = new ZERO.WebGLRenderer();
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);

    renderer.render(scene, camera);
  }
  document.addEventListener('DOMContentLoaded', main, false);
  </script>
</head>
<body>
</body>
</html>

Hooray!!

It is surprising that such a perfect world can be constructed by this small and concise code, isn't it?

There are some demos on the Demo page.

© Ando Yasushi