I'm currently following a tutorial on how to get a 3d model view in three.js
But I notice that whenever I pan the camera (right-click and drag), the center of rotation changes.
Is it possible to make the axis of rotation stay in the world center/object center?
Many thanks!
Related
Is it possible to know what area of the material is rendered on the display? I think Three.js already doing this right?
I trying to make Zoom level. When someone zooming it will become a good resolution.
I making CUBE using 6 planes and I’m trying to know the coordinate of the material and which areas are rendered on display.
The below example shows on the display only some areas of TOP, some areas of RIGHT and FRONT.
If I know which coordinate of material is rendered on the display, I’ll draw a good resolution of the image on the canvas.
Thank you,
I have a cube and my camera located center of the cube.
I’m just trying to set tile materials on the parts of cube as show on camera.
How can I know what part of cube showed on camera ?
For example:
Top,Left,Right,Bottom → showed part of object
Front → showed Full
I'm working on a project where I'm putting a 3d cylinder object in front of a static 2d image on a three.js canvas, trying to make the cylinder look like its part of the photo.
In order for the 3d cylinder's perspective to match the photo behind it, it needs to be moved down the y axis. The problem is then it's moved out of the scene. I need a way to render the 3d cylinder how it would look with a -y position, but not actually move down the scene.
See image for details:
A combination of x-axis rotation to around 24 degrees, Lowering the FOV to around 10, and increasing the camera.position.z to about 35 got me the results I needed. Thank you #prisoner849
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.
How to do area zoom, here i draw a rectangle using drag and draw method, i can do
2d to 3d conversion using
projector.unprojectVector(pos, camera);
but i cant able to zoom in to correct area,
do i have to apply local to world coordinates? if so how to do it? i have only THREE.PointCloud mesh only.
u can see the image, it will show what am trying to do.
thanks in advance..