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

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;
If you only create one view in your page, the view object will be also available through the current namespace. This is, you can access the view object by writing vxl.c.view

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


by default, each view will resize according to the

that serves as the canvas parent. If you want to stop the resizing you can invoke

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

if automating resizing is disabled and you want to update the view size to fit the parent

dimensions you can simply invoke:


changing view dimensions

you can change the view dimensions directly through its canvas property:

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

showing and hiding the view

You can also show or hide the view using a bit of JQuery magic:

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

More information about these effects here: JQuery effects

vxlView API

Voxelent documentation is maintained periodlcally. Check the vxlView API page to get updates on the supported features for this object.