Three.js: smooth camera lerping around an origin point - javascript

I'm working on a three.js scene which renders a cube at the centre of two lines pointing north, east, south and west. I'm using three OrbitControls for interaction and some custom code (see link below) to smoothly lerp the camera around an origin point to predefined positions (N, E, S, W and top).
This is working well, except for a few cases:
Lerp from north to south by clicking the "North" button then "South" button (same issue for east to west). Lerping between vector A and B fails, resulting in the camera just jumping to vector B.
Lerp from a custom rotation e.g. NW to the top down view by clicking the "Top" button. The camera lerps correctly to the vector on the y axis, but since it's rotation isn't being controlled, it snaps to the final camera rotation when the lerping is done.
Is there a better way to handle this smooth transition of a camera around an origin point on a circular path from a current vector to a target vector? Which also works for cases 1 and 2 above.
Here's a link to my CodePen three.js scene so far. Upon clicking a position button, I store the target vector and use the following line to lerp towards the target
camera.position.lerp(cameraTarget, cameraLerpAlpha);

lerp is not sure how to orbitally rotate around that center point. For a quick fix, slightly offset position in lines 4-8 (or when the animation starts) to give it a direction to send it off on:
//notice the 0.1s
n: new THREE.Vector3(0, 0.1, -5),
e: new THREE.Vector3(5, 0.1, 0),
s: new THREE.Vector3(0, 0, 5),
w: new THREE.Vector3(-5, 0, 0),
top: new THREE.Vector3(0, 5, 0.1)
But really you need to look at this answer and use a quaternion slerp rather than lerp if you want it to not be locked by distance to the center point: threejs: smoothly rotate camera towards an object

Related

ThreeJS: How to move the camera to the left or right independent of its rotation?

I have a ThreeJS set up where the camera can move through a 3D world and while moving it will change its lookAt multiple times. So let's assume that camera.getWorldDirection() will always be more or less random.
Now I need the camera to move exactly left / right / up / down relative to camera.getWorldDirection().
You can't just use something like camera.position.x += 1 because that only applies for a world direction of Vector3(0, 0, -1). If the world direction changes to e.g. (1, -1, 0), moving the camera to the right does require changes in the X and the Z axis.
I had a look at quaternions and 4D matrices but I can't get my monkeybrain around them. Would be really nice if someone could help me out.
Here is a demo: https://normanwink.com/demo/room/
I found the answer here in a non-accepted answer.
You gotta use camera.translateX() and similar functions to transform its local position. That way you can always manipulate camera.position to move it around and have the translate functions to add offsets relative to the cameras viewing angle.

THREE.JS : Rotate everyting (including camera) despite the orbit controller

Here is what I would like to do:
When a condition is verified, I would like to rotate everything on the scene, including the camera.
The user will not remark any difference since the camera still show exactly the same thing, but in fact the objects would be rotated.
Of course the orbit controller should still work...
The question might be silly, but I'm having troubles. Either the camera gets shifted and doesn't show the exact same thing or the orbit controller doesn't work.
How would you do?
Thanks.
EDIT: I should detail more what I tried.
So let's say the only thing I have on my scene is a cube with a number on each face.
Face 1 is pointing toward +X.
Face 2 is pointing toward +Y.
Face 3 is pointing toward +Z.
Face -1 is pointing toward -X.
Face -2 is pointing toward -Y.
Face -3 is pointing toward -Z.
At some point in my code, I want the cube to rotate without the user knowing.
Face 1 should still point toward +X.
Face -1 should still point toward -X.
But :
Face 2 should point toward +Z.
Face -2 should point toward -Z.
Face 3 should point toward -Y.
Face -3 should point toward +Y.
Ok?
But I don't want the user to notice this rotation.
So I wanted to rotate the camera at the exact same time in order to hide the fact that the cube rotated.
What I tried:
when I want to rotate X :
cube.rotateX(direction * Math.PI / 2);
camera.position.set(camera.position.x, direction * (-camera.position.z), direction * camera.position.y);
camera.lookAt(new THREE.Vector3(0, 0, 0));
and when I want to rotate Y :
cube.rotateY(-direction * Math.PI / 2);
camera.position.set((-direction) * camera.position.z, camera.position.y, -direction * (-camera.position.x));
camera.lookAt(new THREE.Vector3(0, 0, 0));
Sadly, although it works for the Y rotation, it does not work for the X rotation, because the camera.up will fuck it up and make it look like there was a rotation around the Y axis.
How should I do ?
Try creating a THREE.Group and add everything in your current scene to it (your cube, camera, lights, etc.). Then rotate the group.
var group = new THREE.Group();
group.add(yourCube);
group.add(yourLight);
group.add(yourCamera);
scene.add(group);
// later...
group.rotateN(90 * Math.PI / 180); // whatever rotation function you choose to use
Anything you add to the group from this point on will use the group's coordinate system. Anything added to the scene will continue to use the standard world coordinate system.
If you rotate the group again, anything inside the group will rotate along with it, but anything in the scene will remain in place.

THREE.js How to calculate rotation position on a 3D circle?

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.

Camera rotation around one axis of the scene TrackBallControls.js

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

Camera arguments in Three.js

This is how a camera is instantiated:
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR
);
What do these values mean?
I was wondering the same thing so I looked it up, it is a view "frustum".
I'll paste here a code comment I wrote in a recent project because it sums it up nicely IMHO.
// "What the f*** is a frustum?" you ask. Well I did.
// Think about it as a truncated pyramid. The tip is the camera. From a certain
// point "down" the pyramid (the "near plane"), stuff can be seen on-screen.
// After the "base" of the pyramid (the "far plane"), stuff is too far to be
// seen. Stuff outside the pyramid is off-screen too. There is also the "aspect
// ratio" (the rectangle that makes up the pyramid's base, so this value is
// width/height) and the "field of view" (think of it as a lens or something,
// it distorts the pyramid so there's more objects on screen - it is set in
// degrees and 45° is more-or-less a "natural" perspective. The bigger the
// number, the more "perspective" there is).
I found this tutorial very useful for understanding all the camera parameters, and the difference between PerspectiveCamera and OrthographicCamera.
PerspectiveCamera
Fov (Field of view) - This is part of scene that can be seen from the position of the camera. As you probably know, we, humans, have almost 180-degree field of view, while some birds might even have a complete 360-degree field of view. However, for computers, we usually use the field of view between 60 and 90 degrees.
Aspect - The aspect ratio is ratio between the horizontal and vertical size of the area where we render the output. As we usually use the entire window, we will just use that ratio. The aspect ratio determines the difference between the horizontal field of view and the vertical field of view as you can see in the figure on the following page. Ordinary value is window.innerWidth / window.innerHeight.
Near - This property defines a min distance from the camera the Three.js renders the scene. Usually, this is a very small value, e.g. 0.1.
Far - This property defines a max distance we see the scene from the position of the camera. If we set this as too low, a part of our scene might not be rendered; if we set it as too high, in some cases, it might affect the rendering performance. Normal value is between 500 and 2000.
OrthographicCamera
Left (Camera frustum left plane) - You should see this as what is the left border of what will be rendered. If we set this value to -100, you won’t see any objects that are farther to the left.
Right (Camera frustum right plane) - Anything farther to the right won't be rendered.
Top (Camera frustum top plane) - The maximum top position to be rendered.
Bottom (Camera frustum bottom plane) The bottom position to be rendered.
Near (Camera frustum near plane) - From this point on, based on the position of the camera, the scene will be rendered.
Far (Camera frustum far plane) - The furthest point, based on the position of the camera, to which the scene will be rendered.
The following picture should be very illustrative:
The main difference between the two camera modes is that in the OrthographicCamera distance plays no role, so all the elements are of the same size, as you can see in the case of the red and yellow ball.
Finally here is some code you can use to switch from one camera to the other:
this.switchCamera = function(SCENE_WIDTH, SCENE_HEIGHT) {
if (camera instanceof THREE.PerspectiveCamera) {
camera = new THREE.OrthographicCamera( SCENE_WIDTH / - 2, SCENE_WIDTH / 2, SCENE_HEIGHT / 2, SCENE_HEIGHT / - 2, 0.1, 1000 );
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = -1;
camera.lookAt(scene.position);
this.perspective = "Orthographic";
} else {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = -1;
camera.lookAt(scene.position);
this.perspective = "Perspective";
}
};
Notes:
The function camera.lookAt(scene.position) orients the camera to where the scene is located, so it is visible.
Units in three.js are SI units, so the values of left,right,top,bottom should not assumed to be pixels.
The aspect ratio of the camera's frustum should normally match the canvas' aspect ratio.
SCENE_WIDTH, SCENE_HEIGHT, can be determined through the geometries that are added in the scene. The orthographic frustum could be much larger than the scene but it wouldn't be very parsimonious.
Useful links:
http://www.glprogramming.com/red/chapter03.html
Three.js - Orthographic camera
The first param is FOV means field of view, imagine a camera on a tripod, if you change lens to wide angle you get a higher FOV. Try to imagine a cone coming out from the camera, it can only see objects in that area.
ASPECT means aspect ratio, a widescreen TV is 16/9 and old ones were 4/3, usually just give it the screen width/height or the dims of a DIV you would like three.js to use.
fov: Camera frustum vertical field of view.
aspect: Camera frustum aspect ratio.
near: Camera frustum near plane.
far: Camera frustum far plane.
On these pages there some image for the FOV, NEAR plane, anmd FAR plane.
https://threejsfundamentals.org/threejs/lessons/resources/frustum-3d.svg
https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/ViewFrustum.svg/440px-ViewFrustum.svg.png
https://threejsfundamentals.org/threejs/lessons/threejs-cameras.html
https://en.wikipedia.org/wiki/Viewing_frustum
This is the aspect ratio.
https://en.wikipedia.org/wiki/Aspect_ratio_(image)
This is the official docs.
https://threejs.org/docs/#api/en/cameras/PerspectiveCamera

Categories

Resources