threejs下监听mesh事件与监听3D对象的区别

先说结论

监听mesh时会导致同一mesh下同一个位置,如果重叠着多个3D对象,点击事件会被触发多次。而监听3D对象只有这个对象会触发这个事件一次。而如果监听平面,则不会检测到mesh下其它重叠的对象。

技术架构

  • react
  • threejs
  • @react-three/drei
  • @react-three/fiber

场景

有这样一段代码,一个网格对象(mesh)中有一个平面(Plane),当我在网格上监听鼠标抬起事件时,被触发了三次:

tsx 复制代码
const PerspectiveCameraZ = 500

/**
 * 区域平面
 */
const SrAreaPlane: React.FC<SrAreaPlaneProps> = (props) => {
  const { imageUrl } = props

  const texture = useLoader(TextureLoader, isEmpty(imageUrl) ? defaultImage : imageUrl)
  // 获取纹理的宽度和高度,固定宽度
  const textureWidth = PerspectiveCameraZ
  // 高度等比缩小
  const textureHeight = (texture.image.height * PerspectiveCameraZ) / texture.image.width

  return (
    <mesh
        onPointerUp={(event) => {
          // ...
        }}>
      <Plane args={[textureWidth, textureHeight]}>
        <meshBasicMaterial map={texture} side={DoubleSide} transparent={true} />
      </Plane>
      // 假设这里有更多的内容
    </mesh>
  )

后来排查原因得到了上文的结论,将事件监听移动到Plane上,问题就得到解决了。

这是个有意思的问题,值得分享。

相关推荐
Icoolkj6 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
^Rocky7 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
西陵7 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
笑鸿的学习笔记8 小时前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
萌萌哒草头将军9 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
gnip10 小时前
http缓存
前端·javascript
JohnYan11 小时前
工作笔记 - 微信消息发送和处理
javascript·后端·微信
陈陈爱java11 小时前
Spring八股文
开发语言·javascript·数据库
@大迁世界12 小时前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html
烛阴12 小时前
【TS 设计模式完全指南】用工厂方法模式打造你的“对象生产线”
javascript·设计模式·typescript