It is easier to later reference it in more complicated apps and to keep it standard with other plugins (see OBJLoader)

I'm not sure why module.exports is used, since three.js is a front-end library, but it would be great if it would work out of the box with browsers.

If i change the camera up vector to something else, the orbit control still have the same up vector aligned with the y world axis. How can i fix it?

Works great so far. Only I'm missing proper support for cameras other than PerspectiveCamera.
E.g. zoom does not work with an OthographicCamera.

Because you have bundled a copy of Three.js library in your project, instanceof fails when I pass a camera I made from another copy of Three.js (that I installed using npm and loaded with typings). Please consider requiring the installation of three.js separately from your orbital-controls package, and then using that one instead.

Or, a quick and non-breaking option would be to change the lines similar to the following:
if (this.object instanceof THREE.PerspectiveCamera) { ...
to
if (this.object.type === "PerspectiveCamera") { ...

'Orbiting' works without the fix, but zoom and pan are both broken with the following message (I'm just showing the zoom one here):
WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.

In case there is confusion, here is a tree of what is happening:

• node_modules
  • @types
    • three (definition file. points to the following three library)
  • three
    • three (standard npm library, the one that I use throughout my project)
  • three-orbitcontrols-ts (your library)
    • three (the same three library, but you have bundled ANOTHER copy just for your module)
    • dist (your orbiting controls code)

I'm trying to use this within my Angular 4 app, but I'm getting

Error: Uncaught (in promise): TypeError: Cannot read property 'prototype' of undefined
TypeError: Cannot read property 'prototype' of undefined

Errors on this line
OrbitControls.prototype = Object.create( THREE.EventDispatcher.prototype );
OrbitControls.prototype.constructor = OrbitControls;

Hi,

I had the same idea about packaging OrbitControls, and I created https://github.com/fibo/three-orbitcontrols, then I discovered this package (I could not find it on npm at a first search).

I have just copyed the original module, imported three.js, and exported it using commonjs. Since I have done only the minimum required to make it importable, I think it will be easier to update it, in fact three.js is now at r78 and, in particular, OrbitControl.js was updated 2 weeks ago mrdoob/three.js@e51d15c

I used peerDependencies, instead of passing three.js in the exported method, cause I think it will be easier to keep the package updated.

Do you think it is a good approach? If yes, I could do a pull request here, so we could keep only one package, instead of publish mine on npm.

Tell me what do you think, if you consider I can collaborate.

I'm making a similar package for the threejs extras subdivision modifier. Why require three to be passed in instead of just requiring it in the library?

v94 (maybe it arrived earlier) has something called saveState, which something else I am using depended on.

Here's the latest version ->
https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js

Here's the history. There is now an OrbitConstraint class, which OrbitControls derives from.
https://github.com/mrdoob/three.js/commits/master/examples/js/controls/OrbitControls.js

Thanks for this repo. Any chance we can get a bower package for this?

Update: seems that the existing bower package of THREE.js comes with OrbitControls but is not referenced directly.

It looks like with the latest version of THREE, the change event is never dispatched. I went back to 0.82.1 and it seems to work now.

I tested with 0.85.0 and it still works, so it could be either one of the latest two versions that might have introduced some bugs or breaking changes.

Seems like I can't use a simple HTML select element anymore when I use three-orbit-controls on a project where my whole viewport is a canvas element.

Any ideas how I could fix this?

Someone fixed this problem in the latest three.js branch, I'm wondering if this fix could be added to three-orbit-controls.

mrdoob/three.js#7310

BTW the fix should be firefox specific to me, because it doesn't sound like it will work with other browsers ... the fix uses this event to handle zooms: https://developer.mozilla.org/en-US/docs/Web/Events/MozMousePixelScroll

Reproduce:

1. Create a camera and set its lookAt value.
2. Create orbit controls.

Issue:
After adding orbit controls, the camera is "looking at" the origin, not the camera's lookAt value.

How do you get the camera to lookAt a specific point when adding orbit controls?

Some example code:

  camera = new THREE.OrthographicCamera(
    globals.cameraDimensions.left,
    globals.cameraDimensions.right,
    globals.cameraDimensions.top,
    globals.cameraDimensions.bottom,
    1,
    2000
  );

  // Sets the position to a Vector3 angle, then sets the length.
  camera.position.set(0, 50, 100);
  camera.up = new THREE.Vector3(0, 1, 0);
  camera.lookAt(new THREE.Vector3(0, 50, 0));

  renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  controls = new THREE.OrbitControls(camera, renderer.domElement);

In an application that support multiple view / camera, switching camera can be done by setting the .object member variable.

this.controls.object = otherCamera

The problem is that if this camera has an up vector different from the default value, that up vector won't be respected. However, OrbitControls has support for non standard (0, 1, 0) up vectors since some code respect it to compute its internal quaternion. (cf those 2 lines of code in the "constructor").

var quat = new THREE.Quaternion().setFromUnitVectors( object.up, new THREE.Vector3( 0, 1, 0 ) );
var quatInverse = quat.clone().inverse();

A patch request follows, which make quat and quatInverse member variables and turn the previous block of code into a method that is called on update.

As title says, this would be good for a site that has a ton of inputs and you don't want the arrow keys to affect the scene while you're typing / incrementing and decrementing values.

I suppose we already have this for the mouse, why not the keys?

I'm using https://www.npmjs.com/package/three.js version 0.73.0 together with https://www.npmjs.com/package/three-orbit-controls version 72.0.0

The error happens in the OrbitConstraint.update function:

function OrbitConstraint ( object ) {
...
this.update = function() {
...
var quat = new THREE.Quaternion().setFromUnitVectors( object.up, new THREE.Vector3( 0, 1, 0 ) );
...