Tutorial: Scene Toys

Each Voxelent scene has some special actors that allows us to orient ourselves. These actors are:

• Bounding Box: it is a rectangular prism that encloses all the objects in the scene.
• Axis: tells us where the center of the scene is
• Floor: tells us where up and down is in the scene

Before getting into detail, let’s see how we can access these objects

Obtaining a toys context

Using a view instance

If you have set up a view you can use the view variable to get a reference to the scene toys like this:

var view = vxl.api.setup("dom-canvas-id");
var toys = view.scene.toys

Using the current scene object

If you have only one scene in your page, then the current scene variable would be set up for you and then you could access the toys using it like this:

var toys = vxl.c.scene.toys

Now let’s take a look at our first toy.

Bounding Box

The bounding box contains all the actors in a given scene.
There are some scenarios where using a bounding box is useful. For instance, when we want to position our camera in a way that all the objects are visible. The bounding box allows us to do such calculation. Luckily, you don’t have to do it. You just need to call the vxlCamera class longShot method.

To make visible the scene’s bounding box you can do this:

Using the toys context

toys.boundingbox.setVisible(true);

Also, you could do this through the public API by writing:

vxl.api.boundingBoxON();

If you want to hide the bounding box, you can use:

vxl.api.boundingBoxOFF();

Or through the toys context

toys.boundingbox.setVisible(false)

Axis

The axis shows the centre of the bounding box. You can access the axis through a toys context like this:

toys.axis.setVisible(true);
toys.axis.setVisible(false);

Or through the api like this:

vxl.api.axisON();
vxl.api.axisOFF();

The axis will always point to the centre of the scene.

Floor

The floor allows us to visually inspect the location of objects (near, far) and also enables us to tell which objects are up and down. In many cases the floor is a good method of visual inspection to make sure that the objects int the scene are where we expect them to be.

The floor can be accessed through a toys context:

toys.floor.setVisible(true);

however if you execute this command you won’t see anything. This is due to the fact that we need to specify two parameters: the dimension of the floor and the grid spacing. We do so by invoking:

toys.floor.setGird(dimension, spacing);

This method will automatically make the floor visible.

Similarly to the previous cases, these commands have an API equivalent that will affect the current scene set in vxl.c.scene:

vxl.api.floorON(dimension, spacing);
vxl.api.floorOFF();

If floorON is invoked without setting the dimension and spacing parameters the floor will be visualized with the last parameters that were set. If no parameters have been set, the floor will not appear.

Let’s try it!

1. Click on the image above to open the interactive demo

2. Activate the JavaScript console. If you don’t know how to do this, check the section about Using the API interactively in the Working with the Public API tutorial.

3. Let’s hide the bounding box and show the floor. For that you should write:

vxl.api.boundingBoxOFF();
vxl.api.floorON(50,2);