在ThreeJS中缩放到对象

我在哪里可以改变three.js中的缩放方向？ 我想放大鼠标光标的方向，但我不知道你可以改变缩放目标的位置。

Answer 1

更新了wetwipe的解决方案以支持Three.js的修订版71，并清理了一点，就像一个魅力，请参阅http://www.tectractys.com/market_globe.html以获取完整的用法示例：

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)); 

Answer 2

好！ 我解决了这样的问题……只需禁用THREEJS提供的缩放function。

 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 < 0){ // zoom to the front camera.position.x -= mouseX * .00125; camera.position.y += mouseY * .00125; camera.position.z += 1.1 * 10; controls.target.x -= mouseX * .00125; controls.target.y += mouseY * .00125; controls.target.z += 1.1 * 10; }else{ // zoom to the back camera.position.x += mouseX * .00125; camera.position.y -= mouseY * .00125; camera.position.z -= 1.1 * 10; controls.target.x += mouseX * .00125; controls.target.y -= mouseY * .00125; controls.target.z -= 1.1 * 10; } }); 

我知道它并不完美...但我跳它会帮助你一点......无论如何......我会努力让它变得更好。

Answer 3

所以我最近遇到了类似的问题，但我需要缩放以应用于更广阔的空间。 我已经采用了Niekes在他的解决方案中提供的代码，并提出以下内容：

 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 < 0 ){ camera.position.x += vector.x * factor; camera.position.y += vector.y * factor; camera.position.z += vector.z * factor; controls.target.x += vector.x * factor; controls.target.y += vector.y * factor; controls.target.z += vector.z * factor; } else{ camera.position.x -= vector.x * factor; camera.position.y -= vector.y * factor; camera.position.z -= vector.z * factor; controls.target.x -= vector.x * factor; controls.target.y -= vector.y * factor; controls.target.z -= vector.z * factor; } }); 

它不漂亮，但至少是function性的。 欢迎改进:)

Answer 4

从未听说过变焦方向，

您可能想检查相机的FOV参数，

以及调用此方法来应用更改：

 yourCam.updateProjectionMatrix(); 

Answer 5

如果您正在使用轨迹球控件，请设置

 trackBallControls.noZoom=true; 

并在mousewheel事件中使用此代码，

 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 < 0) { Camera.position.addVectors(Camera.position, vector.setLength(factor)); trackBallControls.target.addVectors(trackBallControls.target, vector.setLength(factor)); Camera.updateProjectionMatrix(); } else { Camera.position.subVectors(Camera.position, vector.setLength(factor)); trackBallControls.target.subVectors(trackBallControls.target, vector.setLength(factor)); } }; 

Answer 6

我是Three.js的新手，但它很精彩。 我甚至不是一个好的开发者。 我正在练习。 我正面临着缩放到鼠标位置的问题，我想我改进了一点代码。 这里是。

 // 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 < 0) { // zoom-in -> 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(); } 

另一个改进可能是将targetToCameraDistance设置为当用户开始轨道运行时鼠标击中的物体的距离。
如果鼠标击中一个对象，并且距离> minTargetToCameraDistanceAllowed，则计算并设置新目标。
……但我仍然不知道该怎么做。