缩放到ThreeJS中的对象

更新了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));

OK!我是这样解决这个问题的……只要禁用由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 < 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;
        }
});

我知道这不完美…但我希望它能对你有所帮助....无论如何…我会努力使它更好。

所以我最近遇到了一个类似的问题，但我需要缩放应用于更广泛的空间。我采用了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;
        }
});

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

从没听说过缩放方向，

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

以及调用它来应用更改:

yourCam.updateProjectionMatrix();

如果使用trackball控件，则设置

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

我对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，然后计算并设置新目标。
…但是我还是不知道怎么做