Three.js实现hover与Click选中效果

一、效果展示

Three.js实现hover与Click选中效果_第1张图片

二、如何实现

  1. 使用Three.js提供的光线投射Raycaster模块
  2. 通过Raycaster将物体在场景中的位置与鼠标的位置进行对比
  3. 当鼠标的平面坐标与场景中物体的平面坐标发生重叠时认为选中了物体

三、代码实现


四、注意点

  1. 在场景中的所有对象都会被raycaster都会被选中,在处理时应该判断那些是自己需要处理的对象
  2. raycaster判断物体是否被选中时,重叠在一起的物体也会被选中,并按照层级顺序存放在数组中

你可能感兴趣的:(three)