3D Navigation
sym3.js offers two schemas (input templates) for controlling the 3D view. “Sym3” and “GoogleMaps”. Call SetManipulationSettings with the name of the schema to change which is in use at any time.
Sym3 Schema
Sym3 is the default schema.
Mouse Controls
- Hold left click and drag: rotate the view.
- Hold middle mouse and drag: pan or translate the view.
- Spin mouse wheel up: zoom in.
- Spin mouse wheel down: zoom out.
If you don’t have a mouse wheel and/or a third mouse button, alternatives are provided:
- Press the shift key, hold left click and drag: pan or translate the view.
- Press the control key, hold left click and drag up: zoom in.
- Press the control key, hold left click and drag down: zoom out.
Touch Controls
- Drag with one finger: In 2D mode, pan, otherwise rotate around center.
- Drag with two fingers: In a straight line, pan. Use a circular motion to rotate.
- Double tap with one finger: Toggle zoom.
GoogleMaps Schema
The GoogleMaps schema behaves in a manner similar to Google Maps operating in 3D mode.
Mouse Controls
The Microsoft Edge browser exhibits a large amount of lag when control or shift drag is used to rotate the view. We are investigating, and in the meantime neither Google Chrome nor Mozilla Firefox exhibit this behavior.
- Hold any mouse button and then drag: pan the view.
- Hold any mouse button and control or shift and then drag: rotate around the center.
- Spin mouse wheel up: zoom in.
- Double left click: zoom in.
- Spin mouse wheel down: zoom out.
- Double right click: zoom out.
Touch Controls
- Drag with one finger: pan the view.
- Drag up and down with two fingers: tilt the view.
- Pinch with two fingers: zoom out.
- Tap with two fingers: zoom out.
- Double tap with one finger, don’t release the last tap, and drag up: zoom out.
- Spread with two fingers: zoom in.
- Double tap with one finger: zoom in.
- Double tap with one finger, don’t release the last tap, and drag down: zoom in.
- Rotate motion with two fingers: rotate clockwise/counterclockwise.