Getting Started

Download Zia.js

Download zia.js from the GitHub repository:

Create HTML file

Create a new HTML file:

<!DOCTYPE html>
<html>
  <head>
    <script src="zia.js"></script>
  </head>
  <body>
    <canvas id="mainCanvas" style="width:600px;height:400px"></canvas>

    <script>
      // Add script here      
    </script>
  </body>
</html>

Add script

Add script to the section marked "// Add script here".

document.addEventListener('DOMContentLoaded', function () {
    
  var canvas = document.getElementById('mainCanvas');
  
  var graphicsDevice = new Zia.GraphicsDevice(canvas);

  var program = new Zia.BasicProgram(graphicsDevice, {
    lightingEnabled: true
  });
  program.diffuseColor = new Zia.Vector3(0, 1, 1);
  program.enableDefaultLighting();

  var cubeModel = Zia.GeometricPrimitive.convertToModel(
    graphicsDevice, Zia.GeometricPrimitive.createCube());

  for (var i = 0; i < cubeModel.meshes.length; i++) {
    var mesh = cubeModel.meshes[i];
    for (var j = 0; j < mesh.meshParts.length; j++) {
      mesh.meshParts[j].program = program;
    }
  }

  var projectionMatrix = Zia.Matrix4.createPerspectiveFieldOfView(
    Zia.MathUtil.PI_OVER_FOUR, graphicsDevice.viewport.aspectRatio, 0.1, 100,
    new Zia.Matrix4());
  var viewMatrix = Zia.Matrix4.createLookAt(
    new Zia.Vector3(0, 1, -2),
    new Zia.Vector3(0, 0, 0),
    new Zia.Vector3(0, 1, 0),
    new Zia.Matrix4());
  var modelMatrix = new Zia.Matrix4();

  var rotationAxis = new Zia.Vector3(0, 1, 0);
  var rotationAngle = 0;

  function drawScene() {
    if (graphicsDevice.resize()) {
      Zia.Matrix4.createPerspectiveFieldOfView(
        Zia.MathUtil.PI_OVER_FOUR, graphicsDevice.viewport.aspectRatio, 0.1, 100,
        projectionMatrix);
    }

    graphicsDevice.clear(
      Zia.ClearOptions.ColorBuffer | Zia.ClearOptions.DepthBuffer,
      new Zia.Color4(0, 0, 0, 1), 1);

    Zia.Matrix4.createFromAxisAngle(
      rotationAxis,
      Zia.Math.degToRad(rotationAngle),
      modelMatrix);

    cubeModel.draw(modelMatrix, viewMatrix, projectionMatrix);
  }

  var lastTime = 0;

  function animate() {
    var timeNow = new Date().getTime();
    if (lastTime != 0) {
      var elapsed = timeNow - lastTime;
      rotationAngle += (50 * elapsed) / 1000.0;
    }
    lastTime = timeNow;
  }

  function tick() {
    requestAnimationFrame(tick);
    drawScene();
    animate();
  }

  tick();

}, false);

That's it!

You should see this: