Three.js 轨迹球控件拖动事件在 UIkit 模态中不起作用答案

【问题标题】：Three.js trackball controls drag event not working in UIkit modalThree.js 轨迹球控件拖动事件在 UIkit 模态中不起作用
【发布时间】：2016-09-17 18:21:14
【问题描述】：

情况如下：我有一个全屏 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);

正如您在上面的代码示例中看到的，我在渲染器之后实例化了控件，避免了this thread and solved by this answer 中描述的情况。此外，控件对象被显式绑定到渲染器 DOM 元素，以避免阻塞其他事件。

UIkit 模态似乎以某种方式捕获了所有拖动事件。

我在这个fiddle中重现了这个场景。

你们中是否有人遇到过类似情况并找到了解决方案或至少是一种解决方法？

【问题讨论】：

您当前的小提琴链接 TrackballControls.js 不正确。这是fixed version。
谢谢，@LeJeuneRenard。相应地编辑了问题。

标签： javascript three.js uikit

【解决方案1】：

UIkit 模式没有捕捉到拖动事件。您的问题是 TrackballControls 在隐藏元素时计算 domElement 的大小，因此维度为零。

您需要做的是在模式打开后更新控件对domElement 大小的理解，因此domElement 是正确的尺寸：

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

这是fiddle with the change。

这是UI Kit's modal events 上的文档。

【讨论】：