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

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

相关推荐
栈老师不回家17 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙23 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠27 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
阿伟来咯~2 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨2 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js