Input System

Input handlers convert user input into transformations of the virtual camera. From the user's perspective, input from the mouse, touch-screen, and keyboard are used to pan, zoom, rotate, tilt, and navigate.

Altus comes with two pre-built input handlers:

  • Free Axis - Poles are free to rotate across the plane of the view.
  • Classic Style - Poles are 'locked' such that they cannot be rotated across the plane of the view.

The Free Axis style input handler is very flexible in terms of 3D camera orientation, but can be a bit confusing as it allows a full range of orientations, including not having North be 'up'.

The Classic style input hanlder locks North to 'up' and may be less confusing for certain applications.

Free Axis Style Input Handler Controls

Left Mouse

  • Drag: Pan
  • Double-Click: Zoom In

Mouse Wheel

  • Roll Up/Down: Zoom In/Out
  • Drag Vertically: Tilt
  • Drag Horizontally: Orbit

Right Mouse

  • Drag Vertically: Zoom In/Out
  • Drag Horizontally: Orbit
  • Double-Click: Zoom Out

Additionally this system has the following keyboard modifiers:

Shift-Key + Left Mouse

  • Drag Vertically: Tilt
  • Drag Horizontally: Orbit

Ctrl-Key + Left Mouse

  • Drag Horizontally: Rotate Camera
  • Drag Vertically: Tilt Camera

Using the Free Axis Input Handler

var inputHandler = new AltusUnified.FreeAxisInputHandler(AltusUnified.scene);
AltusUnified.inputManager.setRawInputHandler(inputHandler);
inputHandler.delete();

Classic Input Handler Controls

var inputHandler = new AltusUnified.ClassicInputHandler(AltusUnified.scene);
AltusUnified.inputManager.setRawInputHandler(inputHandler);
inputHandler.delete();

Left Mouse

  • Drag: Pan
  • Double-Click: Zoom In

Mouse Wheel

  • Roll Up/Down: Zoom In/Out

Right Mouse

  • Double-Click: Zoom Out

Input Type Tutorial

This tutorial will walk you through changing between the different input handlers.

Helper Functions

The following code from altusutil.js is used:

/*Set camera orientation using roll, pitch, and yaw
 Note: We could also use transform.lookAt(vec3d worldPosition, vec3d up) without using roll pitch and yaw
 */
function setCameraOrientation(roll, pitch, yaw){
    var pos = AltusUnified.scene.camera().transform.geographicPosition();
    var orientation = new AltusUnified.Orientation(roll, pitch, yaw);
    var scale = AltusUnified.scene.camera().transform.scale();
    var trans = new AltusUnified.Transform(pos, orientation, scale);
    AltusUnified.scene.camera().transform.set(trans);
    trans.delete();
    pos.delete();
    orientation.delete();
    scale.delete();
}

/**Set camera position*/
function setCameraPosition(lat, lon, altitude) {
    var pos = new AltusUnified.GeographicPosition(lat, lon, altitude);
    var orientation = new AltusUnified.Orientation(0, 90, 0);
    var scale = new AltusUnified.vec3d(1, 1, 1);
    var trans = new AltusUnified.Transform(pos, orientation, scale);
    AltusUnified.scene.camera().transform.set(trans);
    trans.delete();
    pos.delete();
    orientation.delete();
    scale.delete();
};

/**Reset camera to over the U.S.*/
function resetCamera() {
    setCameraPosition(39, -98, 10000000);
};

function lookAtUS() {
    setCameraPosition(39, -98, 5000000);
}
//Input helper functions

/**Use classic input handler*/
function useClassicInput() {
    resetCamera();
    var inputHandler = new AltusUnified.ClassicInputHandler(AltusUnified.scene);
    AltusUnified.inputManager.setRawInputHandler(inputHandler);
    inputHandler.delete();
};

/**Use the FreeAxis input handler, which allows you to move the camera using mouse gestures and keyboard modifiers.  Try holding down ctrl or shift when dragging the mouse.*/
function useFreeAxisInput() {
    resetCamera();
    var inputHandler = new AltusUnified.FreeAxisInputHandler(AltusUnified.scene);
    AltusUnified.inputManager.setRawInputHandler(inputHandler);
    inputHandler.delete();
};

Add Radio Buttons to Control Input Type

    <fieldset id="inputTypeGroup" disabled="true">
    <legend>Input Type</legend>
    <input type="radio" name="inputType" value="free axis" onclick="useFreeAxisInput()" checked/>
    <label for="classic">Free Axis</label>
    <input type="radio" name="inputType" value="classic" onclick="useClassicInput()" />
    <label for="realistic">Classic</label>
    </fieldset>

See Demo


AltusMappingEngine Web v2.0.ut.2153.g60764257e master

COPYRIGHT (C) 2017, BA3, LLC ALL RIGHTS RESERVED