Touches

The scene and model instances can be manipulated by touching the screen.

The following touches of the Model Instance are recognised:

  • Single finger - Select and move.
  • Two fingers - Rotate.
  • Three fingers - Change the height.

The following interactions with the Camera are recognized by touching any space in the scene that is not occupied by the model:

  • Single finger - Rotate.
  • Two fingers - Move.

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, resulting in preventing the elements of the scene (either model instances or cameras) from being manipulated. To solve 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 should 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;
}