A panorama control for three.js

Showcase
,
1

PanoControls

three.js panorama / fov controls as a typescript compatible npm module.

link: https://github.com/xiaomingTang/pano-controls

live demo: https://xiaomingtang.github.io/pano-controls/examples/

Installation

npm i -S pano-controls

Usage

import * as THREE from "three"
import PanoControls from "pano-controls"

let container // = ...

// PerspectiveCamera is supported only
const camera = new THREE.PerspectiveCamera(/* ... */)

const panoControl = new PanoControls(camera, container)

panoControl.h   = whatEverYouWant
panoControl.v   = whatEverYouWant
panoControl.fov = whatEverYouWant
// updateCamera after reset h / v / fov
panoControl.updateCamera()

function animate() {
  renderer.render(scene, camera)
  panoControl.update()
}

animate()

default values

panoControl.minH   = -180
panoControl.maxH   = 180
panoControl.minV   = EPS // EPS = 0.000001, as bugs occur while v === 0 or 180
panoControl.maxV   = 180 - EPS
panoControl.minFov = 40
panoControl.maxFov = 140

panoControl.enabled = true
panoControl.enableScale  = true
panoControl.enableRotate = true
panoControl.enableScaleDamping  = true
panoControl.enableRotateDamping = true
panoControl.enableAutoRotate = false

panoControl.scaleSpeed  = -100
panoControl.rotateSpeed = 120
panoControl.scaleSmoothFactor  = 0.9  // 0 - 1
panoControl.rotateSmoothFactor = 0.9  // 0 - 1
panoControl.autoRotateSpeed = -0.05
panoControl.autoRotateInterval = 15000 // ms

Events

change: while h/v/fov is changed

rotate: while h/v is changed

scale: while fov is changed

interact: while h/v/fov is changed caused by user action

License

MIT
2 Likes
2

I understand this as rotating and zooming from a given observation point, which can be useful. The demo doesn’t work very well, though. I would like to be able to set both the min and max fov much lower in the GUI, but the GUI fields are very difficult to control at all.

3

In fact, I know. I think that is harmless as the params (min and max fov) often to be setted by coder instead of user. Iwill fix it as soon as possible.

Thanks for your reply.

1 Like