gltumble![](https://github.com/prideout/lava/raw/master/extras/assets/klein31416.gif)
![Build Status badge](https://travis-ci.org/prideout/gltumble.svg?branch=master)
This library provides a math class called Trackball
that allows users to tumble an object by
dragging with a mouse, trackpad, or touch screen. It optionally applies inertia such that the object
continues to spin if you flick it.
The trackball does not do anything with quaternions. It simply applies Y rotation (spin) followed
by X rotation (tilt).
The trackball avoids rotation about the Z axis. Personally, I like this constraint because I rarely
tilt my head in real life. If you find it to be too limiting, try another package such as
trackball-controller.
Note that gltumble
emulates the behavior used by sketchfab.com except that it does not support
zooming.
Example
const canvas = document.getElementsByTagName('canvas')[0];
const trackball = new Trackball(canvas);
const mat = trackball.getMatrix();
console.info(`The 4x4 transform looks like: ${mat}.`);
Install
Install with NPM (npm install gltumble
) or Yarn (yarn add gltumble
), then:
import Trackball from 'gltumble';
Or use one of the following two CDN builds.
<script src="//unpkg.com/gltumble@1.0.1/gltumble.min.js"></script>
<script src="//unpkg.com/gltumble@1.0.1/gltumble.js"></script>
API Reference
new Trackball(element, options)
Constructs a trackball, given an optional DOM element and configuration dictionary. Listens to
pointer events on the given DOM element.
trackball.getMatrix()
Returns a flat array of 16 numbers representing the current mat4 transformation.