three.js get camera position with orbit controls

Related searches

I am using the three.js orbit controls and attempting to have a skybox follow the position of the camera. Having searched the internet I've found no suitable answer.

My question is simple - how do I retrieve the coordinates of the camera when using orbit controls, the following doesn't work:

skybox.position.x = camera.position.x;  //Moving skybox with camera
skybox.position.z = camera.position.z;  //Moving skybox with camera
skybox.position.y = camera.position.y;  //Moving skybox with camera

The values of x and z coordinates are incorrect. I have also tried:

instead, but this results in similar incorrect behaviour with x and z returning incorrect values.

A seemingly obvious requirement of a control mechanism seems remarkably difficult to do.

Having had no answer on SO I did some additional testing and I've discovered there is a need for a coordinate system transformation to retrieve the correct coordinates of the camera.

The following will retrieve the camera's current position in standard world (x,y,z) space and apply it to a skybox.

newZ = -(camera.position.x * Math.cos(5.49779)) - (camera.position.z * Math.sin(5.49779));
newX = (camera.position.x * Math.cos(0.78)) + (camera.position.z * Math.sin(0.78));

skybox.position.x = newX;   //Moving skybox with camera
skybox.position.z = newZ;   //Moving skybox with camera
skybox.position.y = camera.position.y;  //Moving skybox with camera

As I couldn't find this answer anywhere else, I hope this will be useful to other people, it solved my problem.

OrbitControls – three.js docs, Orbit controls allow the camera to orbit around a target. manual changes to the camera's transform camera.position.set( 0, 20, 100 ); controls.update(); function� [example:misc_controls_orbit misc / controls / orbit ] Constructor [name]( [param:Camera object], [param:HTMLDOMElement domElement] ) [page:Camera object]: (required) The camera to be controlled. The camera must not be a child of another object, unless that object is the scene itself.

This is a 2019 answer to a 2015 question:

camera.position is the local position of the camera. You can retrieve the global position by camera.getWorldPosition().

By the way, you don't have to move the skybox with the camera. Instead, use the cube texture (or rendered cube) as scene.background.

three.js, three.js documentation: Orbit Controls. Mesh (cubeGeometry, cubeMaterial); cube.position.set (0, 0, 0); scene.add (cube); camera = new THREE. three.jsOrbit Controls. Example. An Orbit Camera is one that allows the user to rotate around a central point, but while keeping a particular axis locked. This is extremely popular because it prevents the scene from getting "tilted" off-axis. This version locks the Y (vertical) axis, and allows users to Orbit, Zoom, and Pan with the left, middle, and right mouse buttons (or specific touch events).

I had the same question, and what I did was include the following lines of code to the THREE.OrbitControls function, within the OrbitControls.js file.

THREE.OrbitControls = function ( object, domElement ) {


  this.getPos = function() {
    pos = new THREE.Vector3();
    pos.copy( this.object.position );
    return  pos;
  this.getCenter = function() {
    cent = new THREE.Vector3();
    cent.copy( );
    return cent;

this.object it points to the camera Object you gave when you created the Controls object, and is a THREE.Vector3() initialized as (0,0,0) that defines where your camera is looking at.

And it worked perfectly. As you can see are two getter functions, one fetches the camera position, and the other fetches the center. Then I call it from my code like this:

//Create the controls object
var controls = new THREE.OrbitControls(, this.renderer.domElement);
//get the camera position whenever you want
var cameraPosition = controls.getPos();

Ability to set OrbitControls different camera.lookAt vs , Feature request OrbitControls allows us to quickly implement a rotating camera around a scene. orbitcontrol-with- innerHeight, 1, 10000 ); camera.position.set(0, radius, radius * 2); // controls orbit When you moved the pan/target you get this: A common task with any three.js project is to have the camera rotate around a mesh or scene that you have made. With the orbit controls constructor there is an boolean that can be set true to start an automation rotation around a target position.

yomotsu/camera-controls: A camera control for three.js , OrbitControls yet supports smooth transitions and more features. If your camera is Y-up, Azimuthal angle will be the angle for y-axis rotation and Polar angle will be the angle for vertical In three.js, zooming is actually changing the camera FOV, and the camera is stationary (doesn't move). Get all state in JSON string� My scene is actually set up properly for ThreeJS, but I'm doing camera matching with another software and need to have the camera.up change based on an imported value. In other words, I'm not just doing camera.up.set at (0,0,1), it's more like (.35,.56,.8). I'm definitely new to Three, so I can't help with editing the Orbit Controls library.

Camera Controls in Three.js, <html> <head> <title>Three.js Orbit Controller Example</title> cube.position. set (0, 0, 0); scene.add (cube); camera = new� How to implement orbital camera controls with only a few lines of code and without a plugin

Anyway, this shiny wheel is called OrbitalControls, and you can find the script here, in the main three.js repo. The name comes from the fact that these controls allow the camera to ‘orbit’ around a point in space (by default it will start to orbit around (0, 0, 0) (0,0,0) - the origin). 1.

  • would you mind explaining how you got those numbers ? :) How did you identify they're needed ?
  • Hmm, I don't know why, and this isn't a reflection on the method you have suggested because it could be something on my end, but using your exact code above I find it doesn't return correct coordinates. Using the helper axis as a guide (as I did to confirm mine was correct) it doesn't seem to be returning the right values.