I'm currently using the latest version of three.js(version r81).
Can anyone suggest how I can modify the orbitControls.js so damping is applied when panning and zooming? Currently, damping works only with rotation.
Related
I am trying to do a navigation system like google cloud infrastructure like this:
google cloud infrastructure.
I want to do this using aframe rather than threejs. So I am now customising aframe orbit control by keven ngo:
aframe orbit control.
The problem is that, I succeeded in limiting the auto rotation in a certain angle, so as pan. But I have some following problem that I do not know how to do after searching every posiblities and tried my self:
how to achieve the same effect of bouncing back smoothly after reaching out the pan limit;
for some reason if I pan and after mouseup then when mouse moves, it still pans rather than rotate. Why is that?
how to make camera rotates slightly like in google's example(I modified the original library to rotate camera when mousemove rahter than mousedown)?
Below is the glitch link of my experiment:
aframe customized orbit control
what I customized(I notated my change with slashes and ADDITION text):
autorotates between set angle;
mouse click only pans; when mouse move, camera rotates and autorotate stops;
pan can be limited.
This is a long question, very appreciated if anyone can help!!
how to achieve the same effect of bouncing back smoothly after reaching out the pan limit?
One idea: on mouseup (ie release of pan mode), check if the camera target is outside of the camera's viewing frustrum. If so, calculate a new target position, say half way between current target position, and a point in line with the camera z axis( ie, the center of the screen). Then make an animation, that moves the camera target from current location, to new location.
for some reason if I pan and after mouseup then when mouse moves, it still pans rather than rotate. Why is that?
It seems that the navigation mode (panning, orbitting,or zooming), does not change on mouse up. Make a new (mouseup) listener, that forces orbit mode back to a default mode (orbit?).
how to make camera rotates slightly like in google's example(I modified the original library to rotate camera when mousemove rahter than mousedown)?
It looks like in the google example, orbit direction is determined by which side of center the cursor is in. Left side makes autorotate go clockwise, and right side counterclockwise. You will need to use the cursor component to detect this, and change the orbit direction accordingly.
Also, it appears that in the google version, orbitting is not determined by mousedown (ie dragging), but by cursor distance to center, and this is added to the auto rotate. It appears to be a buffer system, where distance to center initially creates a value to alter the auto orbit (by adding or subtracting to the orbit amount), but that value is a buffer, meaning that it degrades to 0 over time (each frame the value is reduced slowly to 0).
I'm using THREE.OrbitControls to zoom a THREE.OrthographicCamera. But, even thought the ortho camera renders correctly as zoomed, all that is updating on the camera is the 'zoom' property. Even after calling camera.updateProjectionMatrix(). Do I need to manually update the 'position' property of the camera based on the updated 'zoom' property? I want to display its position in my UI.
"Zooming" should never change a camera's position. Zooming changes the field of view of a camera, while it remains in the same position. Zooming in is the same as cropping an image.
When you move closer or further away from a subject, this is called "dolly". When you have an orthographic camera, because there is no perspective deformation, dollying has very little effect.
Do I need to manually update the 'position' property of the camera based on the updated 'zoom' property?
Yes, but "based on the..." is very very relative, for each zoom level you have infinitely many viable positions for your camera.
I'm using THREE.OrbitControls to dolly a THREE.OrthographicCamera. But, even thought the ortho camera renders correctly as repositioned, all that is updating on the orthographic camera is the 'zoom' property. Even after calling camera.updateProjectionMatrix(). Do I need to manually update the 'position' property of the camera based on the updated 'zoom' property? I want to display its position in my UI after dollying it.
(Note, this is a rewrite of my other question,THREE.js Orthographic camera position not updating after zoom with OrbitControl, in which I thought I was zooming with the OrbitControl but was actually dollying. Sorry about this).
Dollying in/out with an ortho cam would have an unnoticeable effect. With ortho cams there is no perception of proximity because it has no perspective. All objects appear the same in size regardless of distance from the lens because the projection rays are all parallel. The only difference you'd notice is when the objects get clipped because they're past the near or far plane.
So, the decision was made that scrolling with OrbitControls would change the zoom of the camera, narrowing in/out of the center.
If you want to force the camera to move further/closer of its focus point, you could just translate it back/forth in the z-axis with:
camera.translateZ(distance); A (-) distance would move it closer, and a (+) distance would move it further from its focus point.
I am working on THREE.js orthographic camera, I am using 'OrbitalControls.js' for controls.
I want to zoom in the direction of mouse in 3D world. Hoping to get solution in JS. I know this one is not easy solution like perspective camera.(where we add in camera direction)
There is a .zoom parameter on the orthographic camera.
Try setting increasing/decreasing it.
This can be solved by figuring out the difference between your current zoom level and the next one, and then by panning in the direction of the mouse.
Your OrthographicCamera has a width and hight in world units camera.right - camera.left and camera.top - camera.bottom. Say you're at zoom level 1, and you zoom to 2, you divide these by two and get the new width and height in world units.
You need to figure out the difference in X Y and pan the camera in that direction.
I have a scene with several meshes in three.js The distance between the meshes is fixed. The problem is that the whole group is upside down. My first thought would be to rotate the camera over the z-axis with pi. This does't work because the trackball controls that I used reset this rotation. Is there a way to override the default rotation?