|By dcantor . March 21, 2013 . tutorials.|
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.
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;
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
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.
You can get the frames per second statistic through the getFPS method:
vxl.c.view.getFPS(); // how fast are you going?
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.
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
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
you can change the view dimensions directly through its canvas property:
vxl.c.view.canvas.width = 400; vxl.c.view.canvas.height = 400;
You can also show or hide the view using a bit of JQuery magic:
$(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...
More information about these effects here: JQuery effects
Voxelent documentation is maintained periodlcally. Check the vxlView API page to get updates on the supported features for this object.