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，避免了this thread and solved by this answer中描述的情况。此外，控件对象显式绑定到呈现器DOM元素，以避免阻塞其他事件。

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

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

您是否有人遇到类似情况并找到解决方案或至少是解决方法？

Answer 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的文档。

Three.js轨迹球控制拖动事件在UIkit模式中不起作用

1 个答案: