Threejs根据鼠标动态改变controls的target（缩放中心点）

来源：互联网发布：开淘宝店怎么进货编辑：程序博客网时间：2024/05/19 22:50

好久没更新博客了，记下一笔
最近看到很多公司的产品的鼠标交互部分，controls的缩放中心不是固定的，比如这个，这个鼠标的交互方式跟我们平常用到的OrbitControls或者TrackballControls都不一样，特别是缩放时，它的target不是固定的，最近研究了一下：
废话不多说，先上图：
普通的缩放操作
这里写图片描述优化后的缩放操作
代码如下：

$('body').on('mousewheel', function ( ev ){        var factor = 3;        var WIDTH = window.innerWidth;        var HEIGHT = window.innerHeight;        //将鼠标的屏幕坐标转换为NDC坐标        var mX = ( ev.clientX / WIDTH ) * 2 - 1;        var mY = - ( ev.clientY / HEIGHT ) * 2 + 1;        //这里定义深度值为0.5，深度值越大，意味着精度越高        var vector = new THREE.Vector3(mX, mY, 0.5 );        //将鼠标坐标转换为3D空间坐标        vector.unproject(camera);        //获得从相机指向鼠标所对应的3D空间点的射线（归一化）        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;        }    });

参考：
http://barkofthebyte.azurewebsites.net/post/2014/05/05/three-js-projecting-mouse-clicks-to-a-3d-scene-how-to-do-it-and-how-it-works

0 0