Three.js 通过 Gui 防止 Raycast

Question

我想 select 带有光线投射的对象，但每次我想 select three.js gui 上的东西时，都会触发 Mousdownevent。我怎么能说 "if the Gui is in front of the object, dont trigger"

document.addEventListener( 'mousedown', onDocumentMouseDown, false ); function onDocumentMouseDown( event ) { if (event){}

这个 gui 是一个普通的 three.js gui 是这样制作的:

gui = new GUI( { width: 330 } );

Answer 1

解决这个问题的一种方法是使用 jQuery 和一个额外的控制变量：

$( gui.domElement ).mouseenter(function(evt) {

    enableRaycasting = false;

} );

$( gui.domElement ).mouseleave(function() {

    enableRaycasting = true;

} );

然后您可以使用 enableRaycasting 来确定是否应该进行光线投射。

演示：https://jsfiddle.net/gnwz5ae7/

Three.js 通过 Gui 防止 Raycast

Three.js prevent Raycast through Gui

three.js

dat.gui