Javascript 缩放到3JS中的对象

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

从未听说过缩放方向

您可能需要检查摄像机的FOV参数

并调用此选项以应用更改：

yourCam.updateProjectionMatrix();

---

好的！我解决了这样的问题…只需禁用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;
        }
});

controls.noZoom=true；
$（'body'）。在（'mousewheel'，函数（e）上{
var mouseX=（e.clientX-（宽度/2））*10；
var mouseY=（e.clientY-（身高/2））*10；
如果（e.originalEvent.deltaY<0）{//缩放到前面
camera.position.x-=mouseX*.00125；
camera.position.y+=mouseY*.00125；
摄像机位置z+=1.1*10；
controls.target.x-=mouseX*.00125；
controls.target.y+=mouseY*.00125；
controls.target.z+=1.1*10；
}否则{//缩放到后面
camera.position.x+=mouseX*.00125；
camera.position.y-=mouseY*.00125；
摄像机位置z-=1.1*10；
controls.target.x+=mouseX*.00125；
controls.target.y-=mouseY*.00125；
对照组.target.z-=1.1*10；
}
});

---

我知道它并不完美……但我希望它会对你有所帮助……无论如何……我会努力让它变得更好。

所以我最近遇到了类似的问题，但我需要在更广阔的空间中应用缩放功能。我采用了他在解决方案中提供的代码，并得出以下结论：

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

container.on（'mouseweel'，函数（ev）{
var系数=10；
变量宽度=window.innerWidth；
var HEIGHT=window.innerHeight；
var mX=（ev.clientX/宽度）*2-1；
var mY=-（电动客户/身高）*2+1；
var向量=新的三个向量3（mX，mY，1）；
投影仪。未投影向量（向量，相机）；
vector.sub（camera.position）.normalize（）；
如果（ev.originalEvent.deltaY<0）{
camera.position.x+=向量.x*因子；
camera.position.y+=向量.y*因子；
camera.position.z+=向量.z*因子；
controls.target.x+=vector.x*因子；
controls.target.y+=vector.y*因子；
controls.target.z+=vector.z*因子；
}否则{
camera.position.x-=向量.x*因子；
camera.position.y-=向量.y*因子；
camera.position.z-=向量.z*因子；
controls.target.x-=vector.x*因子；
controls.target.y-=vector.y*因子；
controls.target.z-=vector.z*因子；
}
});

---

它并不漂亮，但至少是功能性的。欢迎改进：）

更新了Wetweep的解决方案，以支持Three.js的第71版，并对其进行了一些清理，效果非常好，有关完整的使用示例，请参见：

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

---

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

trackBallControls.noZoom=true;

在鼠标滚轮事件中使用此代码

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

            }

        };

mouseweel=功能（事件）{
event.preventDefault（）；
var系数=15；
var mX=（event.clientX/jQuery（container.width（））*2-1；
var mY=-（event.clientY/jQuery（container.height（））*2+1；
var向量=新的三个向量3（mX，mY，0.1）；
矢量。取消投影（摄像机）；
矢量子（摄像机位置）；
if（event.deltaY<0）{
Camera.position.addVectors（Camera.position，vector.setLength（因子））；
trackBallControls.target.addVectors（trackBallControls.target，vector.setLength（factor））；
Camera.updateProjectMatrix（）；
}否则{
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();

}

//缩放到鼠标位置
addEventListener（'mousewheel'，函数（e）{mousewheel（e）；}，false）；
功能鼠标滚轮（事件）{
orbitControl.enableZoom=false；
event.preventDefault（）；
//以下是取决于场景比例的常量
//它们需要根据您的模型比例进行调整
var系数=5；
//系数决定用户放大/缩小的速度
var MinTargetToCameraRadisTanceAllowed=15；
//这是相机可以围绕目标旋转的最小半径。
//计算鼠标与窗口中心的距离
var mX=（event.clientX/window.innerWidth）*2-1；
变量mY=-（event.clientY/window.innerHeight）*2+1；
var vector=新的3.Vector3（mX，mY，0.5）；
矢量。取消投影（摄像机）；
矢量子（摄像机位置）；
如果（event.deltaY<0）{
//放大->摄影机正在接近场景
//使用轨道控制时，目标始终位于摄像机前面（屏幕中央）
//因此，当用户放大时，目标与摄影机的距离会减小。
//这是因为相机位置改变，而不是目标。
camera.position.addVectors（camera.position，vector.setLength（因子））；
}否则{
//缩小->相机正在远离场景->目标距离增加
camera.position.subVectors（camera.position，vector.setLength（factor））；
}
//现在camera.position已更改，但控制目标未更改。因此：
//-摄像机到目标的距离改变，这是正常的。
//-目标不再位于屏幕中央，需要重新定位。
//新的目标将在摄像机前面