2

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

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

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

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

有什么方法可以同时使用 onMouseDown 和 Trackball 控件吗？

原因是当 mousedown 事件发生时，我可以检测到它在屏幕上发生的位置，然后切换控件变量，以便 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 中对齐问题）。

4

3 回答 3

8

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

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

于 2016-02-03T10:51:40.413 回答
0

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

function mousedown( event ) {

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

于 2020-06-04T06:26:16.760 回答
0

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

于 2017-07-06T02:48:56.463 回答