关于 threejs ui穿透问题 点击穿透div 屏蔽错误点击

很多时候three的载体dom元素内还有更多的元素

这样在点击的时候就会出现穿透div穿透各种UI元素,而触发不必要的麻烦

比如我点这个绿色div就可以点到后面的物体,这样就很麻烦

 

解决方案有两种

1.直接判断点击对象是不是canvas...

        // event 点击事件的参数
        if(!(event.target instanceof HTMLCanvasElement)){
            return;
        }

2.直接判断点击对象的id (因为有可能你会用到多个canvas也不一定吧)

// 你需要给three的canvas赋个id
renderer.domElement.id="你的GUID"; 
        // event 点击事件的参数
        if(event.target.id!=="你的GUID"){
            return;
        }

好吧就这样了

 

有问题可以回复~

 

 

L.Jason