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.
Related
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'm working with an orthographic view in three.js/WebGL renderer, and I want a magnifying glass that tracks with the user mouse. I'm looking for the best way of doing this that's efficient.
When working with html5 canvas raw commands, this was easy: I simply defined a circular clip region, zoomed my coordinates, and re-drew the whole scene. With 3d objects, it's less obvious how do to it.
The method I've found so far is to do the following:
Define a second camera that looks into the zoomed region. Set the orthographic clip coordinates to be small so that it doesn't need to do much work
Create a THREE.WebGLRenderTarget
Tell the renderer and all my line textures that the resolution is about to change
Render the scene into the RenderTarget
Add a CircleGeometry as a MeshObject at the spot at the mouse position (in world coordinate but above the rest of the scene, close to the camera). Call this the lens.
Give the lens the WebGLRenderTarget as a texture.
Go back to my default camera, reset all my resolution parameters, and redraw the scene with the 'lens' object added.
This works (see image below) but I'm worried about parts of it:
I have to render twice per frame
Lines don't draw well, because the resolution problems. I have to keep track of all materials that need to know screen resolution and update all of them twice per screen render.
Related problems:
I want to overlay some plot axes on top of this, and possibly gridlines. These would change as the view pans. I'm not sure if I should make these 3d objects, or do it in a 2d canvas context I lay overtop.
I want to overlay some plot lines, and have them show up sensibly in the zoomed view. "Sensible" here is hard to figure out: I don't want them too fat in the zoomed view, but I also don't want to scale them up as much as the image detail (which is being rendered as a texture onto Plane objects behind).
This is a long post, but I'm still new to three.js and looking for good ideas.
I am using ThreeJS's OrbitControls so that when an object in my scene is clicked, the camera travels close to it and and starts orbiting around it. I'm just moving the controls.target position, camera position and setting controls.autoRotate = true.
The clicked object gets centered on screen, which is nice, but sometimes I need to show a text covering up to 50% of the bottom area of the screen, and then the selected objects gets hidden by it. So, I'd need to somehow offset the rotation center up a bit.
Perhaps another way of asking this is that I need to change the center of rotation so that it is NOT the center of the screen (or the center of the renderer canvas)
I've tried moving the target up but, of course, then the camera doesn't orbit around the selected 3D object but around an empty space close to it. Any idea on how to proceed?
Many thanks!
I finally got the desired results following the comments in this other thread:
by using camera.setViewOffset
I've been struggling with an application where I'm trying to set the camera rotation initially so when the scene is loaded, you'll be looking where we want you to look.
The backstory, I'm creating a panorama viewer where the panorama is applied to a mesh with a sphere geometry.
The problem I'm having is I don't seem to be able to set the camera rotation. I've tried multiple attempts, but none have been working. I attempted setting the camera rotation after creating the camera, and I tried applying the target of my orbitcontrols and setting the object rotation in the orbit controls. I haven't had any luck yet with just setting an initial camera rotation.
I'm really hoping at this point that this is due to something minor that I'm over looking.
Here's a source: http://www.freeptools.com/mapster/testing-360s2.php
It shows the camera itself AND the orbit controls object. It also shows what their target is I'm setting, and what they really are. So far I haven't been able to get this to accept anything I give it.
THREE.js OrbitControls take over the camera completely, so you should not use that in conjunction with updating camera rotations.
Instead, OrbitControls has methods that help you do this: https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js
orbitControls.rotateLeft( angle );
orbitControls.rotateUp( angle );
In addition, you can move orbitControls.target around (it's a THREE.Vector3) and the camera will just look to that direction.
When I add to the scene two objects and set their transparency as true with some opacity and using TrackballControls I rotate the scene by mouse, the object which was initially further from camera loses its transparency.
I read that this is Z-buffer problem and further objects from camera will be displayed first. But when I rotate the scene using TrackballControls, camera changes its position, so transparent objects should be displayed correctly. But it is not like that.
Here in this picture - on the right is frontview, on the left is backview which is not displayed correctly:
http://www.foto-ondruskova.cz/Experiment/lenses.jpg
Please, any solutions?
I have come across this problem and setting alphaTest: 0.5 to the material as suggested here solved my problem. But it is hit and miss. Give it a try. Hopefully it works!