yomotsu / camera-controls

A camera control for three.js, similar to THREE.OrbitControls yet supports smooth transitions and more features.

camera-controls's Issues

saveState issue

Hi,

Thanks for the plugin.

I am getting the below error on save state.

FYI, I thinks we need to use _target instead of target.

Thanks,
Sabari.

Include zoom in JSON state?

Hi, I was thinking the zoom probably should be included in the JSON state, since it's critical for the orthographic camera.

For completeness, I could also imagine adding an accessor to the camera controls to get this value. Though that isn't essential. I'm able to pick the zoom from the camera directly.

What do you think?

how can we implement autorotate ?

is there a way to implement autorotate as orbit controls ?

I expect have a controls can support zoomed and rotated with the current mouse position in screen

such as navisworks viewer behavior。。。

Truck boundaries limit

Hello! Thank you for putting the effort to have this. It is great.

I've been trying to modify it a bit in order to implement bound limits to the truck function, but I couldn't find a "nice" way to put it together. I always mess up with something.

I am working in a map that needs to be panned within the boundaries oif the model, but nothing I do does the purpose.

Any tip or advice?

Please, remove this warning

pinch disable y-axis

Hi,

I disable the minPolarAngle and maxPolarAngle so that when i pinch the polar angle is lock and it will just move forward and backward. But is there a way when you move forward and backwards the y-axis will remain at y = 0 ? Now when i pinch here is a increase or decrease on y-axis .

thanks

Error: [Intervention] Unable to preventDefault inside passive even listener

Detected in Chrome in the device view. Chrome Version 79.0.3945.117 (Official Build) (64-bit).

Rotate to point?

Hi!
Thanks for a great library and contribution to the Three community.

Previously is was using the Three example OrbitControl, but since this library have more features, especially animations I am trying it out.
For my project I have sphere which the camera is orbiting around. Depending on user inputs I want to move the camera targeting different points(cities) that are displayed on the sphere(globe).
Perviously I was handling this, picking up the position of the point and calculating the new camera position. Whit this code;

targetClicked() {
   const pos = this.target.position;
   const camDistance = this.camera.position.length();
   this.camera.position.copy(point).normalize().multiplyScalar(camDistance);
   this.controls.update();
}

But is there away to calculate the target; azimuthAngle, polarAngle and use your rotateTo()?

[EDIT]
Sorry for disturbing. I found a solution.
It was a bit to simple, just using .setPosition() with my previous code.

targetClicked() {
   const pos = this.target.position.clone();
   const camDistance = this.camera.position.length();
   pos.normalize().multiplyScalar(camDistance);
   this.controls.setPosition(pos.x, pos.y, pos.z, true);

change the dolly(Zoom) to left mouse

I want change the dolly(Zoom) to left mouse.
What should I do?

Savestate not working properly.

Hi,

I saved the state and tried to apply that after reload. But, the camera position is completely changed. Could you please help on this?

Please see the code below.

Get State
cameraControls.saveState(); var position = cameraControls._position0.toArray(); var target = cameraControls._target0.toArray()

Apply
cameraControls._target0.fromArray(target); cameraControls._position0.fromArray(position); cameraControls.reset();

Thanks,
Sabari.

compatability with react-three-fiber?

hi ;)
I gave it a try with react-three-fiber and it got very laggy! specially as I try to rotate things!
here is the piece of Code that I wrote to make it work with react-three-fiber:

import React, { useRef } from 'react';
import * as THREE from 'three';
import { ReactThreeFiber, extend, useFrame, useThree } from 'react-three-fiber';
import CameraControls from 'camera-controls';
CameraControls.install({ THREE: THREE });

extend({ CameraControls });

declare global {
  namespace JSX {
    interface IntrinsicElements {
      cameraControls: ReactThreeFiber.Object3DNode<
        CameraControls,
        typeof CameraControls
      >;
    }
  }
}

const CControls: React.FC<any> = () => {
  const ccontrolRef = useRef<any>(null);
  const { camera, gl, clock, scene } = useThree();
  useFrame(() => {
    if (ccontrolRef.current) {
      const delta = clock.getDelta();
      const hasControlsUpdated = ccontrolRef.current.update(delta);
      if (hasControlsUpdated) gl.render(scene, camera);
    }
  });
  return <cameraControls ref={ccontrolRef} args={[camera, gl.domElement]} />;
};

export default CControls;

am I doing something wrong here? or its not somehow compatible with react-three?

Unlock polar rotation

First of all, thanks for this very useful asset!
i just look for unlock polar rotation (update camera up vector) like TrackballControls, any way to fix that ?

Thanks !

updateCameraUp() method does not expose in ts

i used ts version of camera-controls, when i need to change the up of camera, do i need to call updateCameraUp() ?

Resizing the window crashes the render

Is there any reason why resizing the window cause the crash of the render?

I noticed that it is also not possible to resize the window on your examples.

Make mouse buttons configurable.

Would you accept a pull request that makes mouse buttons configurable? What should the API look like?

In my specific case I want to use the left mouse button to translate and the right button to rotate.

In case anyone is looking for a workaround, this works:

CameraControls.install({
    // Hack to make panning and orbiting work the way we want.
    THREE: {
        ...THREE,
        MOUSE: { ...THREE.MOUSE, LEFT: THREE.MOUSE.RIGHT, RIGHT: THREE.MOUSE.LEFT },
    },
});

Support deviceorientation events for orbiting

May be set via a flag if the orientation is solely responsible for orbiting.

Alternating between two cameras

Hi! Thanks for this wonderful alternative to OrbitControls 😄

I have a view that's being used for scientific visualization, and it's helpful to let the user toggle between orthographic and perspective. As a result, I've created two cameras and two CameraControls instances, and I'm alternating between them. However, this isn't working perfectly.

If I dispose() the first one when adding the second one, when I reattach it, it no longer receives mouse events, and if I recreate it, it seems to have lost some of its internal state.

If I don't dispose() the first when adding the second, the mouse events intended for the second are sent to both.

I could maybe add an undispose() or reattach() method.

Alternatively, I could try to recreate the controls each time the camera changes, though I'm not sure how to correctly transfer the internal state from the old controls.

Do you have a suggestion for this? Thanks!

Disable Pan?

Is it possible to disable pan? There doesn't appear to be an option to, does anyone know of a workaround?

I also don't mind taking a shot at that in a PR.

Mouse Objekt Click Event after Camera move?

How
Mouse Objekt Click Event after Camera move?

minPolarAngle/maxPolarAngle

Thanks for putting so much time into this. Really great work on this plugin.

https://threejs.org/docs/index.html#examples/controls/OrbitControls

There's a setting called minPolarAngle/maxPolarAngle where it restricts a user from rotating above and below certain restraints. Wondering how hard it would be to implement something like this in this solution?

Callback on finish method like fitTo, setLookAt, DollyTo etc..

I need a way to intercept with a callback or a promise resolution, when the camera finished the movement,
it is possible, or I have to implement by myself on render or something like that?

delta?

In your update method, what is delta exactly? frame time delta? Because this gives me NaN on the camera position if left blank and if I set it to the time that passed since last frame it just goes crazy spinning anywhere (mostly to the poles tho, although i restricted polarangle the same way i did with orbitcontrols...)

I have to mention I am working on THREE r78, so i had to replace spherical.copy() as this threw me errors.

I am using your src and compile it myself with babel, so i can still make some adjustments.

Here is my "config" for orbitControls:

this.orbitControls.minPolarAngle = Math.PI / 2 - Math.PI / 4;
this.orbitControls.maxPolarAngle = Math.PI / 2 + Math.PI / 4;
this.orbitControls.maxDistance = 2.5;
this.orbitControls.minDistance = 1;
this.orbitControls.enableDamping = true;
this.orbitControls.dampingFactor = 0.1;
this.orbitControls.rotateSpeed = 0.05;
this.orbitControls.autoRitate = true;

the funny thing is, everything seems to work when i drag only slightly (so delta is below EPSILON). so obviously i am doing somthing wrong with the dampening?!

dispatchEvent needs more returned value

camera-controls dispatchEvent provides some returned values as {type:'xxx',originalEvent:event}.I am making a viewcube to control my model.so I need more values such as "phi,theta . . ." to support me to control the viewcube's camera.

Why is dolly disabled for OrthographicCamera?

Hi,

Thank you for the library!
I'm wondering why dolly is disabled for orthographic cameras, while we can dolly in/out using the mouse wheel?

Thanks!

Exposing _spherical

I've got an application where the user would like to see the polar angle. What do you think about exposing _spherical as a public property?

Either it could be unprotected (and marked readonly) or an accessor could be added which copies it.

Orbiting by drag feels weird under extreme aspect ratios

We might want to see its fov instead of just seeing its ratio between resolution and mouse movement

Automatic camera transitions move twice as fast is a mouse button is down

First of all, thanks for this very useful asset!

You can see the reported behaviour in the fit example: https://yomotsu.github.io/camera-controls/examples/fit-and-padding.html

Zoom out, then press one of the buttons to fit the camera view back to the box, and try clicking the mouse buttons. The transition speed definitely zooms in when a mouse button is held.

I have an app where I select 3D object with the mouse (raycasting) and fit the camera when they are clicked, but this bug causes the motion to be kinda jerky. Any way to fix this?

removeEventListener missing

Need to un-comment the code for remove event listener.

rotateTo method reverting all rotations if multiple were made before

I am using camera-controls on a sphere acting as an earth globe with different POIs put onto it.
The rotateTo method is being used to rotate to one of the POIs after the user clicks on them.

If the sphere has been rotated multiple times and the user clicks on one POI, all the rotations will be reverted on moving to the point, resulting in the sphere being rotated multiple times.
This should be fine as a default expected behavior, because it is logical correct, but in my case, I would like to animate rotateTo using the smallest relative distance from the current position to the POIs position.
I resolved this by firing the saveState and reset methods on user input which seem to reset the "rotation value/state", but this solution feels a bit hacky.

Maybe it might be useful to implement some kind of option parameter to toggle between the current behavior and the "relative" one. Or is there another way to handle this which I am currently overseeing?

Wheel event not dispatching

Hi 👋

I noticed that when using the mouse wheel/pinch to zoom in/out there's no event dispatched. This would be useful to have for instance if we want to trigger somethingwhen doing zooming the scene.

I would propose that the onMouseWheel function also dispatches an event, perhaps 'control' or 'update'? Or a new event type like 'zoom'? Which one do you find best suitable?

Thanks 👏

use different pivot point and focalpoint

I would like to be able to pass a Vector3 to some of the functions (e.g. rotate) as an argument to allow me to set what point the camera will pivot/dolly around, whilst being able to control the focalPoint of the camera separately. Currently it seems like there is no way to change the camera lookAt coordinates without changing the target for the transitions. Is this possible?

How to disable camera rotations but the same time keep zoom working?

Fixed wheel_update

I don't have permission to create a PR, so here's the code I changed:

		this.dollySpeed = 1.0;
		this.dollyTransition = false;

in dollyInternal:

scope.dolly( distance, scope.dollyTransition );

in onMouseWheel:

				dollyInternal( - delta, x, y );
				scope.dispatchEvent( {
					type: 'control',
					originalEvent: event,
				} );

=> now if we use dollyTransition = true, the wheel up/down is smooth, and it also dispatches an event, which is useful if we only want to render the 3d when something has changed.

firing multiple methods at once

I really like the way the 'reset' motion works whereby the camera swoops back into position and rotates around the object if necessary. Is there any way to emulate this but for a specific coordinate? What im looking to do is basically combine the rotate function with the moveTo function so i can navigate the scene by moving the camera in spirals. Im struggling to figure out if its possible with this library, any suggestions?

Control camera with keyboard

With OrbitControls you can map keyboard keys to pan the camera (see https://threejs.org/docs/#examples/en/controls/OrbitControls.keys). What I'd like to be able to do with CameraControls is bind WASD keys to pan/truck the camera. Could also add the possibility to bind keys to any camera action to be more flexible.

duration

is there any way to set the duration?

Cannot add keyboard event listener on the same domElement as CameraControls

Given canvas my renderer's domElement which is used when creating CameraControls, when adding an event listener on keydown like so:

canvas.addEventListener("keydown", () => {
  console.log("This is not working");
});

Then the console.log is never logged. I tried adding a click event listener just to be sure it works and it does. Only the keyboard related events (keydown, keyup, keypress) don't work.

Any idea why?

Using camera-controls with Orthographic camera

I am just documenting this here for other users. Doesn't really need a fix (feel free to close this).

Problem
There is no .fov property for THREE.OrthographicCamera but this following line requires that the camera has a .fov or else we get NaN:

camera-controls/src/camera-controls.js

Line 282 in 8e939f2

const targetDistance = offset.length() * Math.tan( ( scope.object.fov / 2 ) * Math.PI / 180 );

Workaround
Just add a fov property when creating a THREE.OrthographicCamera.

fitTo method for orthographic camera

Hi 👋
First of all thanks for these controls. I find that it works really well, even with an orthographic camera!

I noticed that there is no solution for using the fitTo method when using an orthographic camera. I actually have a solution that I'm currently using and I wonder if you'd like me to make a PR out of it?

It's a calculation that sets the camera.zoom value so that it fits perfectly with the boundaries.
If you'd like I'll make a PR out of it 👍

would you make a component of A-FRAME?

I had try to use camera-controls.js to make a component of aframe-v8.0.js
but I get some difficulty at aframe-v9.0.js

How to use fitTo method with the Orthographic Camera ? If it is not supported, is it possible to turn Perspective camera to orthographic camera ?

Easing Functions

Is there any way to pass easing function on the fly to not just lerp with Math.exp to falloff transitions?
Something like:
controller.easing=function (t) {
// easeOutQuad
return t * (2 - t);
}

Event emission feature

Summary

I want cameraControls.on( ... ).
More exactly, I need cameraControls.on( 'navigate', ( event ) => { ... } ) for now.
Do you have any implementation idea?

Context

I'm planning to implement auto-pilot using this camera-controls.
My requirements are:

• Do auto-pilot initially
• When interaction happens on it, stops the auto-pilot

I know I can implement "move from here to there" on itself using some animation stuff,
but I think it's too overpowered for it.
So, instead, I want cameraControls.on( 'navigate', ( event ) => { ... } )-like thing, to achieve halt the auto-pilot when user attempts to move camera.

Dolly state not preserved when using toJSON and fromJSON

Hello,

Thanks for a great camera!

I'm using camera-controls with all default settings, and storing the state in localStorage:

const controls = new CameraControls(camera, canvas);

const cached = localStorage.getItem('controls')
if (cached !== null) {
  controls.fromJSON(cached)
}

controls.addEventListener('update', storeControls)

// simple debounce
let timeoutId = 0
function storeControls(e) {
  clearTimeout(timeoutId)
  timeoutId = window.setTimeout(() => {
    localStorage.setItem('controls', e.target.toJSON())
  }, 100)
}

When I dolly in and out using the mouse wheel I can see the position Vector3 in localStorage update. However when I refresh the page and fromJSON is used, the dolly position is reset.

Cheers.

An accessor cannot be declared in an ambient context.

Error in Angular 8 project using Angular CLI. (Note it still supporting typescript<3.6.0):

ERROR in node_modules/camera-controls/dist/CameraControls.d.ts:6:16 - error TS1086: An accessor cannot be declared in an ambient context.

6 static get ACTION(): Readonly;
~~~~~~
node_modules/camera-controls/dist/CameraControls.d.ts:50:9 - error TS1086: An accessor cannot be declared in an ambient context.

50 set phiSpeed(speed: number);
~~~~~~~~
node_modules/camera-controls/dist/CameraControls.d.ts:51:9 - error TS1086: An accessor cannot be declared in an ambient context.

51 set thetaSpeed(speed: number);
~~~~~~~~~~
node_modules/camera-controls/dist/CameraControls.d.ts:52:9 - error TS1086: An accessor cannot be declared in an ambient context.

52 get boundaryEnclosesCamera(): boolean;
~~~~~~~~~~~~~~~~~~~~~~
node_modules/camera-controls/dist/CameraControls.d.ts:53:9 - error TS1086: An accessor cannot be declared in an ambient context.

53 set boundaryEnclosesCamera(boundaryEnclosesCamera: boolean);
~~~~~~~~~~~~~~~~~~~~~~

README: The word `rotX` and `rotY` might be ambiguous

Usually we use the word "rotate X" for rotation around X axis, whereas the document uses rotation around Y axis.
I think we should use theta and phi instead for here?

camera-controls/readme.md

Lines 75 to 82 in 73e8d4b

	#### `rotate( rotX, rotY, enableTransition )`
	Rotate azimuthal angle(theta) and polar angle(phi). `rotX` and `rotY` are in radian. `enableTransition` is in a boolean
	#### `rotateTo( rotX, rotY, enableTransition )`
	Rotate azimuthal angle(theta) and polar angle(phi) to a given point.

How to set the speed of the animation?

I want to set a slower speed of the transition, how can I do ?

possible infinite dolly?

When using dolly it is limited to approaching the orbit target as would be with zoom. That limitation isn't how a real world dolly operation would behave. I'd like the ability to continue to dolly in the current direction. Is that something that could be added? Perhaps moving the target like the forward function but along the current vector.

Not working properly with z-axis up

I am using CameraControls (camera-controls) package to manage Camera on Three.js

When space is Y-axis up (camera.up.set(0,1,0)) it works just right, but when Z axis is set up (camera.up.set(0,0,1)) it stops working as expected (the same way it works with y-axis up)

Any clue how could I make CameraControls package work z-axis up?