Question

我用三个j构建我的场景，当我渲染场景时，一切都正常工作。但是现在我需要场景在div上，70％的视口是特定的，另外30％是左侧面板，有一些信息。我将每个window.height和宽度替换为div本身的宽度和高度，但现在事件都被打破了。我尝试冒泡和捕捉，但问题似乎与相机或三个js中的东西有关，因为当我在角落上盘旋时发生了什么......但是当我悬停/点击3d地球仪时什么也没发生。我谷歌一切，没有找到答案或有类似问题的人..我没有希望，帮助？感谢。

编辑：这是一个小提琴：https://jsfiddle.net/2L686cnw/

Answer 1

您是否在窗口调整大小时更新渲染器相关变量的全部内容？
就像这样：

var onWindowResize = function(){
  renderWidth = element.offsetWidth;
  renderHeight = element.offsetHeight;
  camera.aspect = renderWidth/renderHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(renderWidth, renderHeight);
};

$(window).on('resize', function() {
  onWindowResize();
});

Answer 2

问题听起来就是您的点击位置出现了错误的视口坐标。大多数three.js示例将事件侦听器添加到window或document对象，并使用event.clientX（和clientY）将鼠标屏幕坐标转换为视口坐标，以将其用于光线投射。

将3D场景放在一个单独的div中，只覆盖页面的一部分，它应该有点不同：

function onClick(event) {
  var mouse = new THREE.Vector2();
    mouse.x = (event.offsetX / panelWidth) * 2 - 1;
    mouse.y = - (event.offsetY / panelHeight) * 2 + 1;

  // do raycasting
}

canvas.addEventListener('click', onClick);

在div上渲染三个j时的事件问题

2 个答案: