Vizi

A Framework for Building Interactive 3D Applications in WebGL

Getting Started

Download the latest version and include it into your HTML:

<script src="js/vizi.min.js"></script>

Note that this version is the minified release version. Checkout the engine/build directory for other versions (e.g. unminified, no-dependencies, etc.).

Create your Vizi-based application:

<div id="container" style="width: 98%; height:98%; position: absolute; background-color: #000;"></div>
<script>
  // Create Vizi application
  var container = document.getElementById("container");
  var app = new Vizi.Application({ container: container });

  // Create a phong-shaded cube
  var cube = new Vizi.Object;
  var visual = new Vizi.Visual({
    geometry: new THREE.CubeGeometry(2,2,2),
    material: new THREE.MeshPhongMaterial({ color: 0xcccccc })
  });
  cube.addComponent(visual);

  // Add rotation behaviour
  var rotator = new Vizi.RotateBehavior({autoStart:true});
  cube.addComponent(rotator);

  // Rotate cube to demonstrate 3D
  cube.transform.rotation.x = Math.PI / 5;

  // Create light to show shading
  var light = new Vizi.Object;
  light.addComponent(new Vizi.DirectionalLight);

  // Add cube and light to the scene
  app.addObject(cube);
  app.addObject(light);

  // Run the app
  app.run();
</script>