three.js mousedown not working when trackball controls enabled

Question

Trackball works well in my three.js program along with onMouseClick and onMouseUp event listeners. I enable Trackball using the line:-

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

But the onMouseDown event listener does not work.

If I disable trackball (by commenting out the line of code shown above) and disable any other related code then onMouseDown works fine.

Is there some way to use both onMouseDown and Trackball control at the same time?

The reason is so that when a mousedown event occurs I can detect where on screen it occurred and then toggle the controls variable so Trackball controls the apropriate 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)

Example prototype running at:- http://www.zen226082.zen.co.uk/TRI_VP.html (best in Chrome or Opera, alignment problem in Firefox).

Answer 1

i know this is old but there is no reply to this answer yet, but i have recently bumped into the same issue.

make sure that your container.append(renderer.domElement); is executed before initializing THREE.TrackballControls( camera, renderer.domElement );

Answer 2

I found that the trackball controls module assumes an animation loop is running, but in my case, not so. I needed to modify the code to call _this.update(); as events were being processed (pretty much whenever it calls _this.dispatchEvent, e.g at the end of mousewheel and other event processing functions.

Answer 3

To anyone else having this problem: simple edit TrackballControls.js and remove the line event.stopPropagation(); in the

function mousedown( event ) {

function. This way all further mousedown event listeners stay activated.