[英]Zoom to object in ThreeJS
在哪里可以更改three.js的缩放方向? 我想在鼠标光标的方向上缩放,但是我不知道可以更改缩放目标的位置。
更新了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));
好! 我解决了这样的问题...只需禁用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();
如果使用轨迹球控件,请设置
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,则将计算并设置新目标。
...但是我仍然不知道该怎么做。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.