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..
Related
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!
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 MeshBasicMaterial which has a planegeomatry.the material is around the plane like an outline and will be green initially.i have a clock in the app.i need to reduce the length of the outline every seconds to alert user their time is running out.so the outline will flow from top of the plane clockwise fading and disappear when the time runs out.hope you get the idea.now can anyone help me how to achieve this.
One way to solve this: create a ring geometry and animate its property thetaLength using animejs or tweenjs.
Create a ring in a 3D app, that mapping coordinates that run down the length of the mesh. Then create a gradient texture, that is half black, half white, (1x256). Apply the texture to the material on the ring mesh. Animate the texture offset using animejs.
If you really want the best performance, create a procedural texture using glsl shader, and map that onto a plane.
For three.js, is there a way to detect the clip position or when the far clip has been reached based on the camera zoom? Or, some way to convert camera zoom to the same units as the camera near and far clip float values?
It looks like the .zoom field on PerspectiveCamera only affects the camera's field of view and not the near or far clip planes. Here is where it's used when calculating the camera's projection matrix:
https://github.com/mrdoob/three.js/blob/master/src/cameras/PerspectiveCamera.js#L192
You can see how the zoom factor is affecting the field of view by using the getEffectiveFOV function:
https://threejs.org/docs/#api/en/cameras/PerspectiveCamera.getEffectiveFOV
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.