在使用three.js raycaster时 怎么避免透过上层div选择到物体

Question

使用three.js 时利用raycaster选择物体时如果canvas的上层有div遮挡，鼠标仍然能选择到canvas里的模型，想要在有div遮挡时选择不到模型该如何做

Answer 1

判断一下是不是点击在canvas上面了

        if(!(event.target instanceof HTMLCanvasElement)){
            return;
        }

如果里面不止一个canvas的话
可以给three的canvas加个id
renderer.domElement.id="你的GUID"
然后判断id就行了