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).

I have a batch of code that has Trackball (that swaps views) and an onMouseDown working at the same time. I suspect there may be more going on, can you show us your event listener declarations, perhaps where this DOM_container is initialized. Generally more code to try and figure this one out? — Darryl_Lehmann, Sep 15 '13 at 20:48
Might have something to do with the event getting canceled by TrackballControls before your handler gets control. What element are you binding on, and do you do it before or after `TrackballControls` gets instantiated? — IceCreamYou, Sep 16 '13 at 08:03
For reference my working scenario has `TrackballControls` setup first, then the `addEventListener( 'mousedown', ...)` is captured on the same container as my webgl context. Hope this helps — Darryl_Lehmann, Sep 16 '13 at 12:26
Thanks both. I have added extracts of code to the question. Also I found that onmousedown does receive an event when I click on either scrollbar. — steveOw, Sep 16 '13 at 20:45
OK so I set event listeners to the DOM_container object instead of document and now mousedown is detected OK. Great. Thanks. But now a new problem has arisen in getting the trackball control to operate reliably. — steveOw, Sep 17 '13 at 16:05
By unreliable do you mean that it jerks and generally acts weird once the camera is changed, as if the mouse is locked on to it? If so you can try resetting the trackball before swapping it out with `controls.reset();` this may be undesired as the orientation will be reset to the starting positions. If so you could try setting the `controls.target0`, `controls.position0`, and `controls.up0` before doing a `controls.reset()` — Darryl_Lehmann, Sep 17 '13 at 20:36
I have three cameras sending to three viewports aligned consecutively left, middle, right on one renderer (bound to one dom_container). I can now toggle which viewport/camera is controlled by Trackball on mousedown and filtering according to stored viewport coordinates. But I have now discovered that Trackball inputs are measured relative to the centre of the dom_container. I do not know how to re-centre trackball function relative to the centre of the relevant viewport. I am not sure what controls.target0, controls.position0, and controls.up0 are supposed to do. — steveOw, Sep 21 '13 at 15:57

score 10 · Accepted Answer · answered Feb 03 '16 at 10:51

10

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 );

answered Feb 03 '16 at 10:51

user151496

1,849
24
38

This highlighted the cause of my problem of trackball origin not locating where I wanted it. I needed to initialize TrackballControls to the particular domElement (not just the three.js container). Many thanks. – steveOw Jun 18 '20 at 22:47

score 0 · Answer 2 · answered Jul 06 '17 at 02:48

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.

score 0 · Answer 3 · answered Jun 04 '20 at 06:26

0

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.

answered Jun 04 '20 at 06:26

Christian Lehmann

53
4

three.js mousedown not working when trackball controls enabled

3 Answers3