Threejs中的鼠标对象选择

Question

我设法得到了一个使用 help of the stackoverflow community 的简单对象拾取示例。

工作代码是 here。

但这个例子是画布适合窗口的特殊情况。

如果画布比窗口小并且存在左上偏移，则拾取不起作用（准确地说）。

如何修正偏移量？必须改变什么才能使采摘再次适合？

我尝试了一些方法，包括设置 renderer.setSize(threejsCanvas.clientWidth, threejsCanvas.clientHeight); 但无济于事。

Answer 1

问题在于您使用 window.innerWidth 和 .innerHeight 来获取光线投射器的位置：

  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

如果画布的宽度不是 window.innerWidth，则使用您指定的替代尺寸。此外，您可能不想将 "click" 事件添加到 document，您可能希望将其添加到 renderer.domElement 以便它仅在点击画布时触发。