threejs 模型点击事件

前言

在三维场景中我们经常会用到一个功能，那就是与场景中的模型有事件交互即点击模型对象希望可以获取点击的模型对象，然后进行一系列的操作。这个功能在三维场景中用的比较多，今天和大家分享一下（主要是threejs引擎，其他引擎逻辑一样）。

1. 坐标系转换

要知道我们呈现到用户面前的三维场景都是通过显示器来实现的，呈现端并非真实的三维空间。用户在浏览器里操作鼠标其实改变的只是平面坐标x、和y。这里的x和y（鼠标在屏幕上的坐标）并非我们三维场景里的坐标x、y值，但他们有一个坐标转换关系；公式推导过程可以点这里看这位大神分享的过程；我这里直接看结果：

var mouse=new THREE.Vector2();

 mouse.x=(event.clientX/window.innerWidth)*2-1;

 mouse.y=-(event.clientY/window.innerHeight)*2+1;

event.clientX,event.clientY是鼠标的x、y坐标；这种情况一般是你画布和浏览器窗口一样大的时候，一般我们画布都不会这么大，或者画面在窗口的某一部分，这时候这个公式需要稍微改一下，改成你画面实际的大小；改过后如下：

图例1

2.射线检测

坐标转换完成后我们就该在三维空间里找到我们想要的对象了，这里threejs提供了一个射线检测（其它引擎里也是如此）THREE.Raycaster的方法，具体使用方法如下：

图例2

3. 拿到模型对象

一般在射线检测会获取到鼠标位置附近的所有对象，我们只需要取鼠标位置最近的一个就是了，射线检测方法会按照由近到远顺序排我们去数组第一个就可以了 如下图：

图例三

我在图例里是改变了选中模型的颜色，如果想让模型高亮也可以改变材质的亮度，这个下次再讲了。到这为止，基本就实现了鼠标点哪哪的模型就会改变颜色。

今天模型点击交互就分享到这了，希望可以帮助到大家