Do trackball controls limits zooming in and out?
As I zoom in and out of the object,object breaks at some point.
I want to limit zooming in and out parameters as in orbit controls.
I dont want to use orbit controls in my case.
Thanks a bundle.
I was working with THREE.js version70 which doesn't support to limit zooming.
In current THREE.js version of Trackball controls we could limit the zooming in and out using the following code,
controls.minDistance = 10;
controls.maxDistance = 20;
Related
I have a react-three-fiber app and I'm using OrbitControls as my camera controls.
I want to use buttons on screen to manually zoom in/zoom out but I can't get my code to work.
I want these buttons to work the same way as how the middle mouse button works with OrbitControls.
Does anyone how to make this work using React?
I tried changing the camera position using the useThree() hook but it was not working as I wanted.
Thanks.
When you use the middle scroll wheel with OrbitControls, all it's doing is multiplying the camera position by a certain value. So, if you wanted to do this manually, then you could use the following function:
function zoom(constant){
camera.position.x = camera.position.x * constant;
camera.position.y = camera.position.y * constant;
camera.position.z = camera.position.z * constant;
}
If you want to zoom in, closer, then you pass a value less than one value. If you want to zoom out, further, you pass a value greater than one value.
So I have the basic setup of a three.js-canvas rendered inside of a html-div. Inside the 3d-world I want to position an object in such a way that it appears to be glued on to this outside div (should never move in any way). Currently I have this solution:
render {
object.position.x = camera.position.x;
object.position.y = camera.position.y;
object.position.z = camera.position.z - 200;
}
This works for panning the camera (i have rotation disabled since i don't need it). However, once I zoom in or out it obviously doesn't work any more, since zooming doesn't change the camera's position values. My approach was to incorporate the camera.zoom factor into the above function, but i couldn't get it to work properly. Is there an easy transformation function or something i can use?
Edit: I created a jsfiddle, hopefully this helps figuring out the solution. As long as you pan the camera with right mouse the yellow plane doesn't move at all (wanted behaviour). When you zoom in or out it starts to move (unwanted behaviour): https://jsfiddle.net/rdyLp7uc/2/
In the docs of OrbitControls there are various properties to adjust the speed of zoom and so on; e.g., zoomSpeed, rotateSpeed
Unfortunately I couldn't find a property to adjust the speed of the panning, when using a mouse. I only found keyPanSpeed, but it doesn't affect the speed of panning via a mouse.
Is there no such property? How can I slow down the panning speed when using a mouse?
We can consider adding pan speed as a feature of OrbitControls.
In the mean time, you can hack in the change like so:
Add this:
this.panSpeed = 1.0;
Modify TWO occurrences of this:
//panDelta.subVectors( panEnd, panStart );
panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
three.js r.90
using threeJS to create a sphere with a 360 image.
init with:
this.controls = new THREE.DeviceOrientationControls(this.camera, true);
and on click I change controls to OrbitControls.
Is there a way to keep/find current camera position?
results achieved by combining DeviceOrientationControls and OrbitControls, together with controls enable/disable toggle, below.
this.controls.enabled = !this.controls.enabled;
I'm running Three.js r69 with the bundled OrbitControls.js. I have a simple scene with a couple of objects that are selectable. I'd like to be able to disable zooming while an object is selected and re-enable it once I've cleared the selection.
I'm working on a temporary solution, but it involves editing the OrbitControls.js code. This could make it really annoying to upgrade to a new version of Three.js, especially if OrbitControls is ever changed.
Is there currently a way to enable/disable certain features (like zooming, panning, or orbiting) on the fly, independently of each other?
Is simple:
controls = new THREE.OrbitControls( camera );
// to disable zoom
controls.enableZoom = false;
// to disable rotation
controls.enableRotate = false;
// to disable pan
controls.enablePan = false;
If you're editing the source you must have seen noZoom and noPan.
And this post shows how to constrain rotation.
Do these not meet your need?