Трекбол Three.js управляет событием перетаскивания, не работающим в модальном UIkit

Question

Ситуация следующая: у меня есть полноэкранный холст Three.js, где все отлично работает, но я должен показать предварительный просмотр в модальном UIkit. Там элементы управления работают только частично: масштабирование работает, панорамирование - нет.

JS: рендерер и управление

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

Как вы можете видеть в приведенном выше примере кода, я создаю экземпляры Controls после рендера, избегая ситуации, описанной в этом потоке и решаемой с помощью этого ответа. Кроме того, объект управления получает явную привязку к элементу DOM визуализатора, чтобы избежать блокировки других событий.

Кажется, что модал UIkit как-то ловит все события перетаскивания.

Я воспроизвел сценарий в этой скрипке.

Кто-нибудь из вас сталкивался с похожей ситуацией и нашел решение или хотя бы обходной путь?

Answer 1

Модал UIkit не перехватывает события перетаскивания. Ваша проблема в том, что TrackballControls рассчитывает domElementРазмер, пока элемент скрыт, следовательно, имеет нулевые размеры.

Что вам нужно сделать, это обновить понимание элемента управления domElementразмер, как только модальный открыт и, следовательно, domElement это правильные размеры:

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

Вот скрипка с изменением.

Вот документация по модальным событиям UI Kit.