基于THREE.JS鼠标交互式平移物体_three 鼠标平移

为什么要自己写一个平移功能

  最近的一个项目要做一个网页的三维，于是学习了一下THREE.JS。主要完成了三维模型的基本显示功能。当然显示模型十分简单，在官网随便看一个例子就知道怎么做了。

  接下来就是模型的交互（旋转，缩放，平移等），官网提供了关于交互的插件（Trackball官网示例、Orbit官网示例），这两种插件在旋转和缩放方面都能够很好的支持，但是在平移方面，遇到了一些问题。

  当缩放的距离变小，展示模型的大小变大，很有可能会超出屏幕大小；这时很有可能用户感兴趣的细节部分就超出了屏幕，如果只是单一的通过旋转看超出部分，又会影响视角。在上述的两种插件其实都提供了平移功能，插件应该是平移的相机。使用插件平移遇到的问题是：在平移相机之后，尽管看到了想要看到的细节，但是会影响之后的旋转和缩放。目前还不清楚为什么平移会影响到旋转和缩放，之后有空再去学习一下。

  为了尽量方便的解决这个问题，并且在借鉴了一些三维软件的交互方式之后，决定只使用插件的旋转和缩放功能；平移功能通过平移模型来达到目的。

鼠标拖动平移实现

1、屏幕坐标转设备坐标

  首先是把鼠标的屏幕坐标系转换成three.js中的设备坐标（根据官网的说法：射线），主要方法是：当前的设备坐标的中心点是(0, 0)，左上角的坐标是(-1, 1)–对应展示三维的dom元素的左上角，右下角的坐标是(1, -1)-对应展示三维的dom元素的右下角。

  我们可以通过当前鼠标距离浏览器窗口减去显示区域距离窗口左上角计算出鼠标距离显示区域左上角的偏移量(借鉴前辈博客)。

	let left = wrap.getBoundingClientRect().left;
	let top = wrap.getBoundingClientRect().top;
	let clientX = event.clientX - left;
	let clientY = event.clientY - top;
1
2
3
4

  然后通过获取的偏移量计算标准化后的设备坐标

	let mouse = new THREE.Vector2();
	mouse.x = (clientX / wrap
1