On a scene I have an object that I'm looking at with a PerspectiveCamera.
Using OrbitControls I can move around the object, rotate it, pan it etc.
What I want to do is move the object around to a certain location with a certain angle and then get the camera position and rotation. I would later update the camera with those values. The problem is that three.js doesn't apply some of those values. Here's what I'm doing to get the camera position, rotation, and the lookAt vector
console.log("Position", camera.position)
console.log("Rotation", camera.rotation)
console.log("World Direction", camera.getWorldDirection())
Once I get the vectors, write them down and apply them like this:
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
camera.rotation.set(-3.14, -0.44, -3.14);
camera.position.set(-1067.29, 34.23, 205.82);
camera.lookAt(0.43, -7.10, 0.90)
But the problem is that the rotation and position get changed to some other value if I have used pan with OrbitControls
On Orbitcontrols you need to call "controls.update()" after changes to the camera's transform.
See code-example on OrbitControlDokumentation
Update:
Attention: orbitcontrols seem to overwrite camera transforms
Related
What I have is an OrthographicCamera set up so that is has an isometric view of the scene and OrbitConrols added to allow for panning around and zooming but not for rotation.
What I’d like to have is a button that will centre the objects in a scene and zoom the OrthographicCamera so that the objects fit within the canvas area while keeping the isometric view, i.e. the angle between the camera.position and the camera.lookAt (control.target) point.
What I’ve tried is to set the controls.target at the centre of the bounding box of the objects in the scene.
I have 2 problems with the code at the moment.
The First is I couldn’t work out how to calculate the zoom level needed to make sure the objects in the scene are all in view. I’ve hard coded a value for just now.
The Second is that with the current code, if the camera is panned so that the objects appear nearly off the screen, either up or down, then when centred the angle of the camera changes. This was happening when the camera was panned far left or right but setting the max and min Azimuth Angle seems to prevent this.
camera rotates after centring
The image above shows the scene when loaded then after centering when the camera was panned so the objects were going off the top of the screen.
I have tried a number of ways to do this after looking at answers to similar questions as this but am still having problems getting it to work.
function fitDrawingToPage(){
// Variables Bbox etc are set outside the function
Bbox = new THREE.Box3();
for (const object of sceneObjects) Bbox.expandByObject(object);
newTarget = Bbox.getCenter(new THREE.Vector3());
controls.target.set( newTarget.x, newTarget.y, newTarget.z );
controls.update();
camera.zoom = 0.5;
camera.updateProjectionMatrix();
camera.updateMatrix();
render();
}
current example of code in jsfiddle
I'm using the translateZ function so that camera can move forward/backward along its lookat direction. But translateZ moves it relatively. So camera.translateZ(10); followed by another camera.translateZ(10); will move the camera by 20 units in total. Because of this, I can't use it in a tween animation where I tween the parameter inside of that function.
So I was wondering if there's a way to translate along Z in absolute coordinates, for example if I'm looking at object in origin, I'd like to set distance_from_origin while still maintaining lookat direction?
camera.absTranslateZ(distance_from_origin);
I use something similar on all my camera rigs. I only need 2 variables: the focus position (vec3) and the z-distance. I then reset the position on each frame:
var focusPos = new THREE.Vector3();
var zDist = 10;
// Called once per frame
update() {
// reset camera position
camera.position.copy(focusPos);
// Set camera rotations if needed
// camera.rotation.set(rotX, rotY, 0);
// Apply z-translation to dolly in/out
camera.translateZ(zDist);
}
I like this approach because it lets you change and even tween the focus position, so you're not always looking at the origin. However, it depends on how you're calculating your camera rotations, you might run into gimbal lock if you need more complex rotations.
As represented in the image below, I have a THREE.Scene with a simple cube. Attached to the cube is a CANNON.Body for Physics (represented in the green wireframe).
The CANNON.Body is offset from the cube by a couple of units. For rotation, this offset will be the radius.
When I rotate the cube, I want the CANNON.Body to rotate around the cube based on the angle and radius. On the right hand side of the image, I rotated the cube with an angle of 45 degrees (I also have radians available). However, the CANNON.Body does not rotate around the cube, only around it's own center. I need it to rotate around the cube for all axes x, y and z.
Is there a built-in function in THREE.js or should I use my own mathematical equation for this? If so, what would that be?
Thanks!
P.S. I've seen solutions for pure THREE.js Scene's where the geometry is translated to manipulate the pivot point. Since I don't have geometry in my CANNON.Body, this will not be possible.
I never worked with cannonjs, but was it possible to just add the Cube and the Rigid Body in a Three.Group?
Like
var rigidBody = new CANNON.Body(); // whatever it is for cannon
var model = new THREE.Group();
// your model goes here
model.add(new THREE.Mesh(
new THREE.BoxGeometry(1,1,1),
new THREE.MeshStandardMaterial()
));
model.add(rigidBody);
scene.add(model);
This way, if you rotate the parent element model, the rigidbody should update the same way.
I am currently creating a VR web app using three.js. As the camera controls I am using the device orientation controls used here in the google cardboard three.js demo.
What I need to do is add keyboard controls to this(e.g Up arrow to go forward etc). I've fiddled around with moving the camera on the two axis (x and z) here:
if (e.keyCode == '38') {
camera.position.set(0, 10, camera.position.z+4);
controls.target.set(
camera.position.x +4,
camera.position.y,
camera.position.z
);
effect.render(scene, camera);
...
However I want to make the character move relative to where they are looking (e.g You look one way and press the Up arrow and the character moves the way you looking). Like a first person view.
Does anyone have any ideas on how this is done? Ive tried using the first person controls from three.js but this eliminates the head tracking which is essential for a VR game.
Any answers would be greatly appreciated. (My source code is practically just the Google cardboard three.js demo code with a function added in too detect key presses)
I solved this by different approach. I created an object3d which is moving in scene. Model and camera are child of this object.
I'm rotating object 3d with camera and in the same time rotate model in opposite direction. When i rotate camera object looks keeping direction. when i want to move object, just translateX object with camera and make model rotation to 0. That did the trick.
On long distances (I have millions of units) started to be jerky. Reason is lost precision.
I solved it by keeping position of object at 0,0,0 and move all other things in opposite direction. That makes your model is still on 0,0,0 coords with right rotation and world is moving around.
Most simple example:
you trying something like
scene.add(character_model);
scene.add(camera);
//camera.rotate ....
character_model.translateX(1);
character_model.rotateX(1);
//etc ...
and now you trying to move camera around the pivot (character_model), but this is overcomplicated mathematics.
Try:
var controls_dimension = new THREE.Object3D();
scene.add(controls_dimension);
controls_dimension.add(character_model);
controls_dimension.add(camera);
//use controls to rotate with this object, not with character_model
controls_dimension.rotateX(2);
// in the same rotate model to opposite direction. You can make
// illusion of rotating camera, not a model.
character_model.rotateX(2*-1);
/*
when you want to go in camera direction=controls_dimension=controls_dimension.translateX(1)
and we moving (you most only animate model rotation to controls_dimension.rotation)
*/
I am using r59 of the three.js lib. Based on the stl loader example i am trying to rotate the camera around one axis of the scene. I use TrackBallControls to interface my scene with the mouse.
When i move the mouse i want the scene to rotate with the objects around the origin z-axis. But i can't manage to find a way to block the others directions. Is it in the trackball or in the three lib ?
For example rotate arround the green axis but keeping the angle of the angle of the camera.
When i do :
var mouseOnBall = new THREE.Vector3(
( clientX - _this.screen.width * 0.5 - _this.screen.left ) / (_this.screen.width*.5),
0.0,
0.0
);
The camera rotates only around the green axis but it's not really straight as you can see on the screenshot. And i would like to keep the camera on the initial angle. See the second screenshot :
I am unable to find the anwser most of them on the internet are deprecated.
Sincerely
Austriker