Three.jsトラックボールコントロールのドラッグイベントがUIkitモーダルで動作しない

Question

状況は次のとおりです。すべてが正常に機能しているフルスクリーンThree.jsキャンバスがありますが、UIkitモーダルでプレビューを表示する必要があります。コントロールは部分的にしか機能しません。ズームは機能し、パンはしません。

JS：レンダラとあなたは私がthis thread and solved by this answerで説明したような状況を回避レンダラ後のコントロールをインスタンス化し、上記のコードサンプルで見ることができるように

renderer = new THREE.WebGLRenderer({ 
    alpha: true 
}); 
// renderer size 
if (typeof size === "object") { 
    renderer.setSize(size.width, size.height); 
} else { 
    renderer.setSize(window.innerWidth, window.innerHeight); 
} 
$(canvas).append(renderer.domElement); 

renderer.gammaInput = true; 
renderer.gammaOutput = true; 

renderer.shadowMap.enabled = true; 
renderer.shadowMap.cullFace = THREE.CullFaceBack; 

controls = new THREE.TrackballControls(camera, renderer.domElement); 
controls.rotateSpeed = 10; 
controls.zoomSpeed = 1.2; 
controls.panSpeed = 0.8; 

controls.noZoom = false; 
controls.noPan = false; 
controls.dynamicDampingFactor = 0.3; 

controls.keys = [65, 83, 68]; 

controls.addEventListener("change", render); 

を制御します。また、コントロールオブジェクトはレンダラーDOM要素に明示的にバインドされ、他のイベントのブロックを回避します。

UIkitモーダルは、何らかの形ですべてのドラッグイベントをキャッチするようです。

このfiddleのシナリオを再現しました。

誰かが似たような状況に遭遇し、解決策または少なくとも回避策が見つかりましたか？

Answer 1

UIkitモーダルがドラッグイベントをキャッチしていません。あなたの問題は、TrackballControlsが要素が隠されているのでdomElementのサイズを計算することです。したがって、次元はゼロです。ここで

$('#modal').on('show.uk.modal', function(){ 
    var cachedControl = controlsMap['#dialog-canvas'] 
    cachedControl.handleResize(); // Recalculate size 
}); 

はfiddle with the changeです：あなたがする必要がどのような

は更新がモーダルが開いているので、domElementが適切な大きさになるとのはdomElementのサイズに対する理解コントロールです。

ここにはUI Kit's modal eventsに関するドキュメントがあります。