frncsdrk frncsdrk - 2 years ago 230
Javascript Question

Three.js trackball controls drag event not working in UIkit modal

Situation is as follows: I've got a fullscreen Three.js canvas where all is working perfectly fine, but I have to show a preview in a UIkit modal. There the controls only work partially: Zooming works, panning does not.

JS: Renderer and Controls

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

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

As you can see in the above code sample I instantiate the Controls after the renderer avoiding the situation described in this thread and solved by this answer. Also the controls object gets explicitly bound to the renderers DOM element to avoid blocking of other events.

It seems like the UIkit modal somehow catches all drag events.

I reproduced the scenario in this fiddle.

Did anyone of you encounter a similiar situation and found a solution or at least a workaround?

Answer Source

The UIkit modal is not catching the drag events. Your problem is that the TrackballControls calculates the domElement's size while the element is hidden, hence has zero dimensions.

What you need to do is update the control's understand of the domElement's size once the modal is open and hence the domElement is the proper dimensions:

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

Here is a fiddle with the change.

Here is the documentation on UI Kit's modal events.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download