Tutorial: Views

Introduction

In Voxelent a vxlView object represents the two-dimensional rectangle on your screen through which you have access to a 3D scene.A good metaphor is a theater, you have a different view of the play depending on where you seat in the theater.

Views, Scenes and Actors

Creating a view

It is very easy to create a view. As you saw in the Quick Start tutorial. All you need to do is to have at least one HTML5 canvas in your page:

var view = vxl.api.setup('canvas-id')

Where canvas-id is the string that corresponds to the canvas id in the Document Object Model.

The DOM canvas object is available through the view's canvas property:

var myview = vxl.api.setup('canvas-id-goes-here');
var canvas = myview.canvas;

Views, Scenes, and Actors

Following with the theater metaphor, a scene can be shared by many views. However one view can only display one scene at the time. The scene is represented by the vxlScene object.

The scene object associated with a view is available as an attribute of the view object. Therefore if you have a view called myView, you could access the respective scene by writing something like:

var myview = vxl.api.setup('canvas-id-goes-here');
var scene = myview.scene;

A scene contains actors which are the 3D objects that you see on screen. We will discuss actors in another tutorial.

View operations

frames per second stat

You can get the frames per second statistic through the getFPS method:

vxl.c.view.getFPS(); // how fast are you going?

background color

You can change the background color of the view by invoking the setBackground method:

vxl.c.view.setBackground(0.0,0.2,0.2); // sets the background of the current view

The parameters are the R, G and B color components in the [0,1] range.

fullscreen mode

You can also request a fullscreen using the fullscreen(true|false) method:

vxl.c.view.fullscreen(true); //let's go fullscreen!
vxl.c.view.fullscreen(false); //Quit full screen

resizing

by default, each view will resize according to the

vxl.c.view.setAutoResize(false);  //stop resizing 
vxl.c.view.setAutoResize(true);   //resize automatically again

vxl.c.view.resize()

vxl.c.view.canvas.width = 400;    
vxl.c.view.canvas.height = 400;

$(vxl.c.view.canvas).show();
$(vxl.c.view.canvas).hide();
$(vxl.c.view.canvas).fadeIn(50);    //fade in quick!
$(vxl.c.view.canvas).fadeOut(300);  //it's ok, take your time to disappear...