启用轨迹球控件时，three.js mousedown 不起作用答案

【问题标题】：three.js mousedown not working when trackball controls enabled启用轨迹球控件时，three.js mousedown 不起作用
【发布时间】：2013-09-19 17:52:41
【问题描述】：

轨迹球与 onMouseClick 和 onMouseUp 事件侦听器一起在我的 three.js 程序中运行良好。我使用以下行启用轨迹球：-

controls = new THREE.TrackballControls( scene01camera02 , DOM_container);

但是 onMouseDown 事件监听器不起作用。

如果我禁用轨迹球（通过注释掉上面显示的代码行）并禁用任何其他相关代码然后 onMouseDown 工作正常。

有没有办法同时使用 onMouseDown 和 Trackball 控件？

原因是当鼠标按下事件发生时，我可以检测到它在屏幕上发生的位置然后切换控制变量，以便 Trackball 控制适当的 scene_camera_container。

    In HTML
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <div id="ThreeJScontainer" style="position: absolute; left:0px; top:0px"></div>

    In F_Init()
    renderer = new THREE.WebGLRenderer( {antialias:true} );
    DOM_container = document.getElementById( 'ThreeJScontainer' );
    DOM_container.appendChild( renderer.domElement );

    renderer.setSize( window.innerWidth, window.innerHeight );

    controls = new THREE.TrackballControls( scene01camera02 , DOM_container);

    document.addEventListener( 'mousemove', onDocumentMouseMove, false );  //works OK
    document.addEventListener( 'mousedown', onDocumentMouseDown, false );
    document.addEventListener('click', SOW_onDocumentMouseClick, false);  //works OK

    //in SOW_onDocumentMouseClick event handler 
    // I reset the controls to point to a new scene_camera according to the viewport clicked on. 
    //Example:-
    controls = new THREE.TrackballControls( scene01camera01 , DOM_container);

    //if onDocumentMouseDown was working as I expected I would do the resetting in there 

    In F_Update()
    controls.update();

    In F_Render()
    renderer.setViewport( 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT );
    renderer.clear();   

    //...BOTTOM STRIP (DASHBOARD)
    renderer.setViewport( bottomPanelXmin, bottomPanelYmin, bottomPanelWidth, bottomPanelHeight );  
    renderer.render( scene02, scene02camera04 );
    // etc 
    // etc for other "Panels" (my name for viewports)

示例原型运行在：-http://www.zen226082.zen.co.uk/TRI_VP.html（最好在 Chrome 或 Opera 中，在 Firefox 中对齐问题）。

【问题讨论】：

我有一批同时运行轨迹球（交换视图）和 onMouseDown 的代码。我怀疑可能还有更多事情发生，你能告诉我们你的事件监听器声明吗，也许这个 DOM_container 是在哪里初始化的。通常要尝试更多代码来解决这个问题？
可能与事件在您的处理程序获得控制之前被 TrackballControls 取消有关。你绑定的是什么元素，你是在 TrackballControls 实例化之前还是之后绑定的？
作为参考，我的工作场景首先设置了TrackballControls，然后在与我的 webgl 上下文相同的容器上捕获了addEventListener( 'mousedown', ...)。希望这会有所帮助
谢谢两位。我在问题中添加了代码摘录。我还发现当我点击任一滚动条时，onmousedown 确实会收到一个事件。
OK 所以我将事件侦听器设置为 DOM_container 对象而不是文档，现在可以检测到 mousedown。伟大的。谢谢。但现在出现了一个新问题，即让轨迹球控制可靠运行。

标签： three.js mousedown trackball

【解决方案1】：

我知道这很旧，但还没有对此答案的回复，但我最近遇到了同样的问题。

确保您的container.append(renderer.domElement);在在初始化THREE.TrackballControls( camera, renderer.domElement );之前执行

【讨论】：

这突出了我的轨迹球起源问题没有找到我想要的位置的原因。我需要将 TrackballControls 初始化为特定的 domElement（不仅仅是 three.js 容器）。非常感谢。

【解决方案2】：

我发现轨迹球控制模块假定动画循环正在运行，但就我而言，并非如此。我需要修改代码以在处理事件时调用_this.update();（几乎每当它调用_this.dispatchEvent 时，例如在mousewheel 和其他事件处理函数的末尾。

【讨论】：

【解决方案3】：

对于遇到此问题的其他人：简单编辑 TrackballControls.js 并删除该行 event.stopPropagation(); 在

function mousedown( event ) {

功能。这样，所有其他 mousedown 事件侦听器都会保持激活状态。

【讨论】：