如果画布不是全屏，ThreeJS Raycaster就找不到相交的对象

Question

我用ThreeJS在画布元素中创建了一个包含多个对象的场景。现在，如果用户单击该对象，我希望更改它的材质颜色。

​

​

摘录了我的角5组件，它保存了所有ThreeJS内容：

public onMouseDown(event: MouseEvent) {
    console.log("onMouseDown");
    event.preventDefault();

    var rayCaster = new THREE.Raycaster();
    var mouse = new THREE.Vector2();

    mouse.x = (event.clientX / this.renderer.domElement.clientWidth) * 2 - 1;
    mouse.y = -(event.clientY / this.renderer.domElement.clientHeight) * 2 + 1;

    rayCaster.setFromCamera(mouse, this.camera);

    var intersects = rayCaster.intersectObjects(this.scene.children);

    console.log("Scene has " + obj.length + " objects");
    console.log(intersects.length + " intersected objects found");

    intersects.forEach((i) => {
      i.object.material =
        new THREE.MeshBasicMaterial({color: 0xf1f11f});
    });
    this.render();
}

问题是，由于元素与文档外部边缘之间的距离，的鼠标坐标是不正确的。每当我在场景中点击时，鼠标的右上方就会得到新的材质颜色。

一些信息：this.renderer.domElement.clientWidth保存画布元素的宽度

如果画布元素不是全屏，如何计算正确的鼠标坐标？

Answer 1

如果您的流被破坏(您的容器被浮动或手动定位)，那么clientX/clientY将报告“坏”值(相对于页面，而不是您可能预期的容器)。属性offsetX/offsetY通过报告相对于激发事件的容器的值来说明这一点。

据MDN，支持有限，但我刚才的测试(01/22/2018)显示，最新版本的Chrome，火狐，边缘和IE都报告了正确的值*。请注意，一些浏览器报告整数值，而另一些浏览器则报告双值。

*这可能不适用于Safari或移动浏览器。YMMV