Back

Gyroscope

Gyroscope

The gyroscope can be usefull booth to control objects in the scene as a controller or as a viewport controller for cameras. Gyroscopes are present in pretty much every recent mobile device out there. In this tutorial we will explore how to use it inside nunuStudio and explore some of its use cases.

The device gyroscope provides information about rotation of the device represented as an euler rotation.

The code bellow demonstrates how to create a Gyroscope input object, the gyroscope object its not a normal a nunuSutio object is exists only as a programming API, and has the following properties, each representing a rotation axis relative to the device:

var camera, gyro;

function initialize()
{
	camera = scene.getObjectByName("camera");
	gyro = new Gyroscope();
}

function update()
{
	gyro.setObjectQuaternion(camera);
}

function dispose()
{
	gyro.dispose();
}

If everything works as expected you should see something similar to the example running bellow. To try this example in the editor you can download the project file or open it on the Web Editor.


Panorama

The gyroscope can be used to easily create interactive panoramic visualizations for mobile devices, we can do this very simply using a cubemap.

A cubemap is a representation of a 360 scene using 6 images each one representing the face of a cube. For this example we will use the following images.

The picture used in this example was taken by Emil Persson and its available for download here (licensed under a Creative Commons Attribution 3.0).

To create a new cube map select Import, Texture, CubeMap in Asset Explorer a new asset will be created, double click the new asset and a cube map editor tab will open, now simply drag the sides of your cube map to the correct position in the editor.

To set this cubemap as the scene background, select the scene object in the object explorer and drag the cubemap asset to the background texture box.

To try this example in the editor you can download the project file or open it on the Web Editor.