Three.js (六) 物体的点击和碰撞

点击和碰撞都需要使用光线投射
Raycaster( origin : Vector3, direction : Vector3, near : Float, far : Float )
origin —— 光线投射的原点向量。
direction —— 向射线提供方向的方向向量，应当被标准化。
near —— 返回的所有结果比near远。near不能为负值，其默认值为0。
far —— 返回的所有结果都比far近。far不能小于near，其默认值为Infinity（正无穷。）

使用光线投射实例的intersectObject或intersectObjects方法检查光线和物体的相交关系

点击

function onDocumentMouseDown(event) {
       
       
    var vector = new THREE.Vector3(( event.clientX / window.innerWidth ) * 2 - 1, -( event.clientY / window.innerHeight ) * 2 + 1, 0.5);
    vector = vector.unproject(camera);
    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
    var intersects = raycaster.intersectObjects([sphere, cylinder, cube]);
    if (intersects.length > 0) {
       
       
        console.log(intersects[0]);   
        intersects[0].object.material.transparent = true;
        intersects[0].object.material.opacity = 0.1;
    }
}

当点击鼠标时，上述代码会发生以下处理：

1. 基于屏幕上的点击位置创建一个 THREE.Vector3 向量。
   使用 vector.unproject 方法将屏幕上的点击位置转换成 Three.js 场景中的坐标。换句话说，就是将屏幕坐标转换成三维场景中的坐标。
2. 创建 THREE.Raycaster。使用 THREE.Raycaster 可以向场景中发射光线。在下述案例中，从摄像机的位置（camera.position）向场景中鼠标的点击位置发射光线。
3. 使用 raycaster.intersectObjects 方法来判断指定的对象中哪些被该光线照射到的，并返回包含了所有被光线照射到的对象信息的数组（根据距离摄像机距离，由短到长排序）。

碰撞

我们以物体中心为起点，向各个顶点（vertices）发出射线，然后检查射线是否与其它的物体相交。如果出现了相交的情况，检查最近的一个交点与射线起点间的距离，如果这个距离比射线起点至物体顶点间的距离要小，则说明发生了碰撞。

当物体的中心在另一个物体内部时，该方法会失效

/**
 *  功能：检测 movingCube 是否与数组 collideMeshList 中的元素发生了碰撞
 * 
 */
var originPoint = movingCube.position.clone();

for (var vertexIndex = 0; vertexIndex < movingCube.geometry.vertices.length; vertexIndex++) {
// 顶点原始坐标
var localVertex = movingCube.geometry.vertices[vertexIndex].clone();
// 顶点经过变换后的坐标
var globalVertex = localVertex.applyMatrix4(movingCube.matrix);
// 获得由中心指向顶点的向量
var directionVector = globalVertex.sub(movingCube.position);

<span class="token comment">// 将方向向量初始化</span>
<span class="token keyword">var</span> ray <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">THREE<span class="token punctuation">.</span>Raycaster</span><span class="token punctuation">(</span>originPoint<span class="token punctuation">,</span> directionVector<span class="token punctuation">.</span><span class="token keyword">clone</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">normalize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 检测射线与多个物体的相交情况</span>
<span class="token keyword">var</span> collisionResults <span class="token operator">=</span> ray<span class="token punctuation">.</span><span class="token function">intersectObjects</span><span class="token punctuation">(</span>collideMeshList<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 如果返回结果不为空，且交点与射线起点的距离小于物体中心至顶点的距离，则发生了碰撞</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>collisionResults<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> collisionResults<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>distance <span class="token operator">&lt;</span> directionVector<span class="token punctuation">.</span><span class="token function">length</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    crash <span class="token operator">=</span> <span class="token boolean constant">true</span><span class="token punctuation">;</span>   <span class="token comment">// crash 是一个标记变量</span>
<span class="token punctuation">}</span>

}

转载：https://www.jianshu.com/p/7b0aba80cc59