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

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

相关推荐
A_ugust__1 小时前
vue3+ts 封装跟随弹框组件,支持多种模式【多选,分组,tab等】
前端·javascript·vue.js
林九生1 小时前
【Vue3】v-dialog 中使用 execCommand(‘copy‘) 复制文本失效的原因与解决方案
前端·javascript·vue.js
emma羊羊3 小时前
【xsslabs】第12-19关
前端·javascript·靶场·xss
Larry_Yanan5 小时前
QML学习笔记(十七)QML的属性变更信号
javascript·c++·笔记·qt·学习·ui
真的想不出名儿5 小时前
vue项目引入字体
前端·javascript·vue.js
GISer_Jing7 小时前
0926第一个口头OC——快手主站前端
开发语言·前端·javascript
奶糖 肥晨9 小时前
Uniapp 开发中遭遇「可选链赋值」语法陷阱:一次编译错误排查实录
javascript·vue.js·uni-app
个人看法9 小时前
h5实现一个吸附在键盘上的工具栏
前端·javascript·vue
知识分享小能手10 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面制作(2)
前端·javascript·学习·微信小程序·小程序·前端框架·notepad++
jason_yang10 小时前
JavaScript 风格指南 精选版
前端·javascript·代码规范