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上,问题就得到解决了。

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

相关推荐
Myli_ing42 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风44 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave1 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟1 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
旭日猎鹰3 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
一条晒干的咸魚4 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷4 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript