Three.js 3D缩放到鼠标位置
Posted
技术标签:
【中文标题】Three.js 3D缩放到鼠标位置【英文标题】:Three.js 3D Zoom to mouse position 【发布时间】:2015-04-20 18:43:56 【问题描述】:我还有一个问题。 我有一个用 Three.js + orbitControls.js 制作的用于相机处理的项目。 有一个场景,上面有一个简单的立方体,还有相机。我有一个来自 orbitControls.js 的相机,当我使用鼠标滚轮时,它会向屏幕中心放大/缩小(默认行为)。 我需要修改它,以便放大/缩小到 3D 对象上的鼠标位置,就像在 3D 编辑器(如 3D Max、搅拌机)中一样。
我明白逻辑应该是这样的: 从您开始缩放的位置获取鼠标的位置,以及实际要放大的位置,存储该值,放大并获取新的鼠标位置,找到第一个鼠标位置和当前鼠标位置之间的偏移量,然后将相机移动到该位置放大时的偏移。 但是,它不能正常工作。大多数情况下,我认为这可能是我的相机坐标的问题,以及我想要放大的位置。
这是我的代码:
window.onload = function()
var renderer = new THREE.WebGLRenderer();
var width = 640;
var height = 480;
renderer.setSize( width, height );
var div = document.getElementById('canvas')
div.appendChild( renderer.domElement );
var scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(
70,
width / height,
0.1,
10000
);
camera.position.set( 0, 10, 10 );
camera.lookAt( scene.position );
control = new THREE.OrbitControls( camera );
var geometry = new THREE.CubeGeometry( 5, 5, 5 );
var material = new THREE.MeshLambertMaterial( color: 0xFF0000 );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
var light = new THREE.PointLight( 0xFFFF00 );
light.position.set( 10, 0, 10 );
scene.add( light );
var dt = 30;
var renderFunc = function()
update(dt);
renderer.render(scene,camera);
;
setInterval(renderFunc,dt);
//MY ZOOMING CODE.
var mouseVector = new THREE.Vector3();
var projector = new THREE.Projector();
var startMousePos = new THREE.Vector3();
var intersectedPoint = new THREE.Vector3();
var intersectedOffset = new THREE.Vector3();
//FIND INTERSECTED POSITION ON THE CUBE
canvas.onmousemove = function (event)
mouseVector.x = ( event.clientX / 640 ) * 2 - 1;
mouseVector.y = - ( event.clientY / 480 ) * 2 + 1;
startMousePos.x = mouseVector.x;
startMousePos.y = mouseVector.y;
var vector = new THREE.Vector3( mouseVector.x, mouseVector.y, 1 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
var intersects = ray.intersectObjects( scene.children );
if ( intersects.length > 0 )
intersectedPoint = intersects[0].point;
//HERE I THINK I MUST TRANSLATE MY CAMERA.
canvas.onmousewheel = function(event)
if(event.wheelDelta > 0)
camera.position.x -= intersectedPoint.x;
camera.position.y -= intersectedPoint.y;
camera.position.z -= intersectedPoint.z;
else
camera.position.x += intersectedPoint.x;
camera.position.y += intersectedPoint.y;
camera.position.z += intersectedPoint.z;
;
以前有人做过吗?你能告诉我你是怎么解决这个问题的,或者给我一个如何处理的建议吗?
谢谢!
【问题讨论】:
已解决:***.com/questions/23994206/zoom-to-object-in-threejs/… 非常感谢!这对我有帮助! 【参考方案1】:得到相交点后,您可以像这样将其应用为 orbitControl 的目标:
if ( intersects.length > 0 )
intersectedPoint = intersects[0].point;
control.target = intersectedPoint ;
然后,当您放大时,它将朝向您选择的点。
【讨论】:
【参考方案2】:试试这个,效果很好
mousewheel = function (event)
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));
controls.target.addVectors(controls.target, vector.setLength(factor));
else
camera.position.subVectors(camera.position, vector.setLength(factor));
controls.target.subVectors(controls.target, vector.setLength(factor));
;
【讨论】:
以上是关于Three.js 3D缩放到鼠标位置的主要内容,如果未能解决你的问题,请参考以下文章