Ситуация такова: у меня есть полноэкранный холст 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);
Как вы можете видеть в приведенном выше примере кода, я создаю элементы управления после средства визуализации, избегая ситуации, описанной в этой теме и решенной этим ответом . Также объект управления явно привязывается к элементу DOM средства визуализации, чтобы избежать блокировки других событий.
Похоже, модальное окно UIkit каким-то образом перехватывает все события перетаскивания.
Я воспроизвел сценарий в этой скрипте.
Кто-нибудь из вас сталкивался с подобной ситуацией и нашел решение или хотя бы обходной путь?
