ThreeJS中选中物体，并显示相关信息

博文参考

选中物体的原理

1、如果一个点A在被另一个物体B里面。
2、则从点A到空间另一点(C)的射线一定与物体B的边缘相交。
3、通过以物体B中心为起点，向物体的各个顶点发出射线，检测射线是否与其他点（A）相交，若相交则 检查最近的一个交点与射线起点的距离，如果这个距离比物体中心到物体顶点的距离都要小，则点A在 物体B里面 点A就是鼠标点击到世界坐标系中的坐标 物体B就是选中的物体 而点C就是相机的位置。

点A就是鼠标点击到世界坐标系中的坐标
物体B就是选中的物体
而点C就是相机的位置。

Raycaster基础概念

坐标系

我们的手机屏幕是二维的，但是我们展示物体的世界是三维的，当我们在构建一个物体的时候我们 是以一个三维世界既是世界坐标来构建，而转化为屏幕坐标展示在我们眼前，则需要经历多道矩阵 变化，中间webGL替我们操作了许多事情。

世界坐标系：在webGL中，世界坐标系是以屏幕中心为原点(0, 0, 0)，且是始终不变的。你面对屏
幕，你的右边是x正轴，上面是y正轴，屏幕指向你的为z正轴。长度单位这样来定：窗口范围按此
单位恰好是(-1,-1)到(1,1)，即屏幕左下角坐标为（-1，-1），右上角坐标为（1,1）。 

屏幕坐标系：webGL的重要功能之一就是将三维的世界坐标经过变换、投影等计算，最终算出它在显示设备上对应的位置，这个位置就称为设备坐标。在屏幕、打印机等设备上的坐标是二维坐标。

Raycaster

光线投射Raycaster

这个类设计用于鼠标去获取在3D世界被鼠标选中的一些物体

Raycaster( origin, direction, near, far )
origin — 射线的起点向量。
direction — 射线的方向向量，应该归一标准化。
near — 所有返回的结果应该比 near 远。Near不能为负，默认值为0。
far — 所有返回的结果应该比 far 近。Far 不能小于 near，默认值为无穷大。

代码实现

//将鼠标点击位置的屏幕坐标转成threejs中的标准坐标,具体解释见代码释义
mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
var raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);
//射线和模型求交，选中一系列直线
var intersects = raycaster.intersectObjects(objects);
console.log('imtersrcts=' + intersects)
if (intersects.length > 0) {
//选中第一个射线相交的物体
SELECTED = intersects[0].object;
var intersected = intersects[0].object;
console.log(intersects[0].object)
}
}

代码释义

//得到
mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
推导过程：
设A点为点击点(x1,y1),x1=e.clintX, y1=e.clientY
设A点在世界坐标中的坐标值为B(x2,y2);
由于A点的坐标值的原点是以屏幕左上角为(0,0);
我们可以计算可得以屏幕中心为原点的B'值
x2' = x1 - innerWidth/2
y2' = innerHeight/2 - y1
又由于在世界坐标的范围是[-1,1],要得到正确的B值我们必须要将坐标标准化
x2 = (x1 -innerWidth/2)/(innerwidth/2) = (x1/innerWidth)*2-1
同理得 y2 = -(y1/innerHeight)*2 +1