The issue at hand involves a fullscreen Three.js canvas that is functioning perfectly, but there are limitations when displaying a preview in a UIkit modal – zooming works, but panning does not.
JS: Renderer and Controls
renderer = new THREE.WebGLRenderer({
alpha: true
});
// setting 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);
In the code snippet above, the Controls are instantiated after the renderer to prevent an issue outlined in this thread with a solution here. Additionally, the controls object is explicitly linked to the renderer's DOM element to prevent interference with other events.
It appears that the UIkit modal may be capturing all drag events.
A demonstration of this scenario can be found in this fiddle.
Have any of you encountered a similar situation and discovered a solution or workaround?