vue项目嵌套three.js模型时three.js事件不触发

512 阅读1分钟

原因

这种情况的话就是因为前端代码外面有一个盒子遮住了three.js模型,点击事件不能穿透div;当然可以通过z-index来解决three.js的点击事件触发;但是就会造成前端代码被模型遮挡。

解决方法

再最外面的盒子的css属性加上 pointer-events: none; ,这样会阻止所有子盒子的点击事件;然后再three.js的盒子外面的css属性加上 pointer-events: auto; 就解决了。如果子盒子里面也有点击事件,也要加上 pointer-events: auto; ,否则子盒子的方法也不会被触发!