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.

• Interactive Demo using Filament and WebGL 2.0
• The demo source is a single file.

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/[email protected]/gltumble.min.js"></script> <!-- minified build -->
<script src="//unpkg.com/[email protected]/gltumble.js"></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.

trackball.getMatrix()

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