如果画布不是全屏幕，则ThreeJS Raycaster无法找到相交的对象

Question

我使用ThreeJS在canvas元素中创建了一个包含多个对象的场景。我现在想要在用户点击它时更改对象的材质颜色。

我的Angular 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();
}

由于canvas元素与文档外边缘之间的距离，问题是鼠标坐标不正确。每当我在场景中单击时，鼠标右侧的对象将获得新的材质颜色。

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

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

Answer 1

如果您的流量被破坏（您的容器已浮动或手动放置），则clientX / clientY将报告＆＃34;坏＆＃34;值（相对于页面，而不是您可能期望的容器）。属性offsetX / offsetY通过报告相对于触发事件的容器的值来解释此问题。

根据MDN support is limited，但我刚才的测试（01/22/2018）显示Chrome，Firefox，Edge和IE的最新版本都报告了正确的值*。请注意，某些浏览器会报告整数值，而其他浏览器可能会报告双倍值。

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