网站更换服务器影响,设计网站musil,赚钱游戏,tp5网站开发模板下载先说结论
监听mesh时会导致同一mesh下同一个位置#xff0c;如果重叠着多个3D对象#xff0c;点击事件会被触发多次。而监听3D对象只有这个对象会触发这个事件一次。
技术架构
reactthreejsreact-three/dreireact-three/fiber
场景
有这样一段代码#xff0c;一个网格对…先说结论
监听mesh时会导致同一mesh下同一个位置如果重叠着多个3D对象点击事件会被触发多次。而监听3D对象只有这个对象会触发这个事件一次。
技术架构
reactthreejsreact-three/dreireact-three/fiber
场景
有这样一段代码一个网格对象mesh中有一个平面Plane当我在网格上监听鼠标抬起事件时被触发了三次
const PerspectiveCameraZ 500/*** 区域平面*/
const SrAreaPlane: React.FCSrAreaPlaneProps (props) {const { imageUrl } propsconst texture useLoader(TextureLoader, isEmpty(imageUrl) ? defaultImage : imageUrl)// 获取纹理的宽度和高度固定宽度const textureWidth PerspectiveCameraZ// 高度等比缩小const textureHeight (texture.image.height * PerspectiveCameraZ) / texture.image.widthreturn (meshonPointerUp{(event) {// ...}}Plane args{[textureWidth, textureHeight]}meshBasicMaterial map{texture} side{DoubleSide} transparent{true} //Plane// 假设这里有更多的内容/mesh)后来排查原因发现
监听mesh时会导致同一mesh下同一个位置如果重叠着多个3D对象点击事件会被触发多次。而监听3D对象只有这个对象会触发这个事件一次。
将事件监听移动到Plane上问题就得到解决了。
这是个有意思的问题值得分享。