Touches

The scene can be manipulated by touching the screen.

When touching a model instance the instance can be selected and moved around. To rotate an instance use two fingers. To change the height of an instance use three fingers on the model.

The camera can be rotated (one finger) and moved (two fingers) by touching any space in the scene that is not occupied by a model.

The default behavior can also be changed manually by using our JavaScript API (see JavaScript API Reference).

Touches and UI Elements

When using HTML elements like a div that covers the whole screen, the div will catch user touches. This will prevent the scene (model instance or camera) to be manipulated. To prevent this issue, use the following CSS code on a sample class FullscreenOverlay:

.FullscreenOverlay {
    pointer-events: none;
}

This will prevent the div from capturing the touch event. The downside of this approach is that all underlaying HTML elements (children of FullscreenOverlay) will be unable to get user input like mouse clicks or touches. Events like onclick or ontouchstart will not fire. Therefore for each HTML element that needs these events (e.g. buttons) the pointer events need to be activated manually. We propose to use <button> HTML elements for clickable UI elements and add the following CSS code to your project:

button {
    pointer-events: auto;
}