html5 zoom-in,Zoom to object in ThreeJS

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Where can I change the zoom direction in three.js? I would like to zoom in the direction of the mouse cursor but I don't get where you can change the zoom target.

回答1:

updated wetwipe's solution to support revision 71 of Three.js, and cleaned it up a little bit, works like a charm, see http://www.tectractys.com/market_globe.html for a full usage example: mX = ( event.clientX / window.innerWidth ) * 2 - 1; mY = - ( event.clientY / window.innerHeight ) * 2 + 1; var vector = new THREE.Vector3(mX, mY, 1 ); vector.unproject(camera); vector.sub(camera.position); camera.position.addVectors(camera.position,vector.setLength(factor)); controls.target.addVectors(controls.target,vector.setLength(factor));

回答2:

OK! I solved the problem like this...just disable the zoom which is provided by THREEJS. controls.noZoom = true; $('body').on('mousewheel', function (e){ var mouseX = (e.clientX - (WIDTH/2)) * 10; var mouseY = (e.clientY - (HEIGHT/2)) * 10; if(e.originalEvent.deltaY

I know it's not perfect...but I hop it will help you a little bit....anyway...I'll work on it to make it even better.

回答3:

So I recently ran into a similar problem, but I need the zoom to apply in a broader space. I've taken the code presented by Niekes in his solution, and come up with the following: container.on('mousewheel', function ( ev ){ var factor = 10; var WIDTH = window.innerWidth; var HEIGHT = window.innerHeight; var mX = ( ev.clientX / WIDTH ) * 2 - 1; var mY = - ( ev.clientY / HEIGHT ) * 2 + 1; var vector = new THREE.Vector3(mX, mY, 1 ); projector.unprojectVector( vector, camera ); vector.sub( camera.position ).normalize(); if( ev.originalEvent.deltaY

Its not pretty, but is at least functional. Improvements are welcome :)

回答4:

If you are using trackball controls,set trackBallControls.noZoom=true;

and in mousewheel event use this code, mousewheel = function (event) { event.preventDefault(); var factor = 15; var mX = (event.clientX / jQuery(container).width()) * 2 - 1; var mY = -(event.clientY / jQuery(container).height()) * 2 + 1; var vector = new THREE.Vector3(mX, mY, 0.1); vector.unproject(Camera); vector.sub(Camera.position); if (event.deltaY

回答5:

Never heard of zoom direction,

you might want to inspect the FOV parameter of the camera,

as well as call this to apply the change: yourCam.updateProjectionMatrix();

回答6:

I am completely new to Three.js but it's.... wonderful. I am not even a good developer. I am practicing. I was facing the problem of zooming to the mouse location and I think I improved the code a little bit. Here it is. // zooming to the mouse position window.addEventListener('mousewheel', function (e) { mousewheel(e); }, false); function mousewheel(event) { orbitControl.enableZoom = false; event.preventDefault(); // the following are constants depending on the scale of the scene // they need be adjusted according to your model scale var factor = 5; // factor determines how fast the user can zoom-in/out var minTargetToCameraDistanceAllowed = 15; // this is the minimum radius the camera can orbit around a target. // calculate the mouse distance from the center of the window var mX = (event.clientX / window.innerWidth) * 2 - 1; var mY = -(event.clientY / window.innerHeight) * 2 + 1; var vector = new THREE.Vector3(mX, mY, 0.5); vector.unproject(camera); vector.sub(camera.position); if (event.deltaY the camera is approaching the scene // with OrbitControls the target is always in front of the camera (in the center of the screen) // So when the user zoom-in, the target distance from the camera decrease. // This is achieved because the camera position changes, not the target. camera.position.addVectors(camera.position, vector.setLength(factor)); } else { // zoom-out -> the camera is moving away from the scene -> the target distance increase camera.position.subVectors(camera.position, vector.setLength(factor)); } // Now camera.position is changed but not the control target. As a result: // - the distance from the camera to the target is changed, and this is ok. // - the target is no more in the center of the screen and needs to be repositioned. // The new target will be in front of the camera (in the direction of the camera.getWorldDirection() ) // at a suitable distance (no less than the value of minTargetToCameraDistanceAllowed constant). // Thus, the target is pushed a little further if the user approaches too much the target. var targetToCameraDistance = Math.max(minTargetToCameraDistanceAllowed, orbitControl.target.distanceTo(camera.position)); var newTarget = camera.getWorldDirection().setLength( targetToCameraDistance ).add(camera.position); orbitControl.target = newTarget; camera.updateProjectionMatrix(); }

Another improvement could be to set the targetToCameraDistance to the distance of an object hit by the mouse when the user starts orbiting.

If the mouse hit an object, and the distance > minTargetToCameraDistanceAllowed, then the new target is calculated and set.

... but I still don't know how to do this.