当启用轨迹球控件时，Three.js mousedown无效

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

我知道这已经很老了，但是目前还没有答复，但是我最近遇到了同样的问题。

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