光投射-用于射击游戏、选中多个物体

1、光投射Raycasts

光线rays类似太阳光，在3D场景中，用于物体或点之间的碰撞或相交检测。

首先我们必须先创建一束光线。

使用scene.pickWithRay()方法把光线发射出去，并选中一个物体。

从scene.pickWithRay()方法返回的picking信息中，做进一步的处理。

//当点击事件被处罚时

1
2
3
4
5
6
7

window.addEventListener("click", function () {

 // We try to pick an object

 var pickResult = scene.pick(scene.pointerX, scene.pointerY);

});

结果对象 pickResult 主要由4个信息部分组成：

hit（bool）：如果点击击中了场景中的一个对象，则为true。

distance（float）：当前活动相机与命中点之间的距离（如果未命中任何物体，则为infinite无限）。

pickMesh（BABYLON.Mesh）：如果击中一个物体，则这就是这个物体的实例对象。 如果不是，则为空。

pickPoint（BABYLON.Vector3）：单击的点，已经转换为3D坐标，具体取决于单击的对象。 如果未命中，则为Null。

现在，构建示例场景所需的数据已经齐全。 当用户单击墙平面时，我们只需要放置弹痕图片即可：

1
2
3
4
5
6
7
8
9

// 假如点击了墙体对象，就改变弹痕图片impact的位置即可

if (pickResult.hit) {

 impact.position.x = pickResult.pickedPoint.x;

 impact.position.y = pickResult.pickedPoint.y;

}

3、选中功能的高级应用

pickResult对象还可以提供更多的信息，如下所示：

faceId：关于所选物体的面的索引数据，这个索引数据是该面在物体面数组中的位置。可以这样访问：

1
2
3
4
5
6
7
8
9
10
11

//得到物体的顶点信息

var indices = pickResult.pickedMesh.getIndices();

//因为3d物体的面facet是一个三角形，所以由3个顶点决定。

var index0 = indices[pickResult.faceId \* 3];

var index1 = indices[pickResult.faceId \* 3 + 1];

var index2 = indices[pickResult.faceId \* 3 + 2];

submeshId: 选中物体如果存在子物体，则这个参数就是子物体的索引。

bu和bv属性：这是在物体的面上，所拾取点的重心坐标。 选取的面facet是由3个顶点组成的三角形，选取的点是这3个顶点的重心，其权重如下：

1 - bu - bv ：第N个面Facet的第1个顶点坐标

bu ： 第N个面Facet的第2个顶点坐标

bv ： 第N个面Facet的第3个顶点坐标

getTextureCoordinates(): 计算选取点的纹理坐标；将返回在纹理空间中的Vector2坐标，坐标值将在0到1之间。

以上功能可能的用途包括：

根据选择纹理坐标，使用DynamicTexture绘制一个新的纹理

修改被选中的面（删除、移动顶点、更改颜色等），如果可能的话，可以造一个web建模工具哦

更改子物体的材质，例如一把枪，单独更改瞄准镜的材质

还有太多用途了…