/threejs-navigator-gizmo

A 3D navigator gizmo for ThreeJS

Primary LanguageTypeScriptMIT LicenseMIT

3D Navigator Gizmo

npm

A 3D navigator gizmo addon for ThreeJS. It has features of both TrackballControls and ViewHelper. It does not lock the camera to the direction vertical to up when the camera is moved to the direction parallel to up.

Install

npm i threejs-navigator-gizmo

Usage

const navigator = new NavigatorGizmo(camera, renderer, { ... })

...
const render = () => {
	renderer.render(scene, camera)
	navigator.update()
}

...

Options

Property Description Type DefaultValue
size Viewport size of gizmo number 200
rotateSpeed Rotation speed number 1
paddingX Horizontal distance from the left edge of canvas number 0
paddingY Horizontal distance from the bottom edge of canvas number 0
navigatorBgColor Color of circular background of navigator number 0xffffff
navigatorBgOpacity Opacity of circular background of navigator number 0.2
pinterLockMode Whether to enable pointer lock mode. Mouse pointer will be hidden when dragging will if enabled boolean false
trackballTextColor Text color of trackball number 0x000000
trackballTextHoverColor Text color of trackball if hover number 0xffffff
trackballBgImage Background image of trackball. HTMLImageElement -
axesColor Colours of xyz axes number[] [0xff5453, 0x8adb00, 0x2c8fff]
trackballFillColors Fill Colours of six trackballs. The elements represent x, y, z, negX(Negative X), negY(Negative Y), negZ(Negative Z) number[] [0xff3653, 0x8adb00, 0x2c8fff, 0x61363c, 0x485b2e, 0x354860]
trackballStrokeColors Stroke Colours of six trackballs. The elements represent x, y, z, negX(Negative X), negY(Negative Y), negZ(Negative Z) number[] [0xffffff, 0xffffff, 0xffffff, 0xff3653, 0x8adb00, 0xff3653]
standalone Create one standalone canvas to render gizmo boolean false
clearColor Sets clear color. Only works if standalone is enabled number -
clearAlpha Sets clear alpha. Ranges from 0 to 1. Only works if standalone is enabled number -