threejs 模型点击事件插曲

模型点击事件插曲

在做三维可视化项目的过程中，我们经常会有模型的点击交互事件，在上一篇我有介绍过模型点击交互的方法，想了解的话点这里，这里不再赘述。我今天要分享的是模型遮挡或者叫点击事件穿透。这是一种什么情况下才会有场景呢？我举一个例子，你有一个木箱（木箱封闭且半透明只是起到一个容器的作用），你在木箱里放一瓶酒，这时负责交互的同事说了，我只想点击木箱里的酒瓶，展示酒的品种、年份等等，不想点到木箱（有点隔空取物的意思）。在u3d引擎里这种实现比较简单，酒瓶需要交互，箱子不需要也不想点击到箱子，只需要在添加碰撞器的时候只给酒瓶添加就可以轻松规避了。但在threejs怎么实现这一伟大壮举呢，好像我在上一篇讲模型点击事件的时候也没提到有加碰撞器的说法，其实很简单。我虽然没提碰撞器，但我提到了交互模型容器管理，还记得我说的MeshArr(个人命名习惯)吗，这里是存放我们需要交互模型的数组，在射线检测时我们只需要检测鼠标指针范围内需要交互模型的就行了，很简单就实现了。末了还是想配一张图：