Spin an object by dragging with a mouse, trackpad, or touch screen

Downloads in past


1.0.15 years ago5 years agoMinified + gzip package size for gltumble in KB



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 except that it does not support zooming.


const canvas = document.getElementsByTagName('canvas')[0];
const trackball = new Trackball(canvas);
const mat = trackball.getMatrix();`The 4x4 transform looks like: ${mat}.`);


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="//"></script> <!-- minified build -->
<script src="//"></script> <!-- dev build -->

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.


Returns a flat array of 16 numbers representing the current mat4 transformation.