トラックボールは、onMouseClick および onMouseUp イベント リスナーと一緒に私の three.js プログラムでうまく機能します。次の行を使用してトラックボールを有効にします:-
controls = new THREE.TrackballControls( scene01camera02 , DOM_container);
しかし、onMouseDown イベント リスナーは機能しません。
トラックボールを無効にし (上記のコード行をコメントアウトして)、他の関連コードを無効にすると、onMouseDown は正常に動作します。
onMouseDown と Trackball コントロールの両方を同時に使用する方法はありますか?
その理由は、マウスダウン イベントが発生したときに、画面上のどこで発生したかを検出し、controls 変数を切り替えて、トラックボールが適切な 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 で配置の問題)。