容器中的三个.js raycaster答案

【问题标题】：three.js raycaster in a container容器中的三个.js raycaster
【发布时间】：2019-06-27 23:55:59
【问题描述】：

对于我的实习，我需要使用 three.js 进行应用，页面上的容器中需要有什么，但它需要对象上的 onclick 功能。问题是我只能在容器中找到关于光线投射的任何东西，现在单击不会得到我需要的对象

onMouseDown(event) {
    let s = this;

    // calculate mouse position in normalized device coordinates
    // (-1 to +1) for both components
    s.mouse.x = ( event.clientX / s.renderer.domElement.clientWidth ) * 2 - 1;
    s.mouse.y = - ( event.clientY / s.renderer.domElement.clientHeight ) * 2 + 1;


    s.intersects = s.raycaster.intersectObjects(s.blocks, true);
    for ( var i = 0; i < s.intersects.length;){

        s.intersects[ i ].object.material.color.set( 0xff0000 );
        console.log(i)
        console.log(s.getScene().children)
        console.log(s.intersects)
        console.log("test 123")

    } 
    if (s.intersects == 0){
        console.log(s.mouse.x)
        console.log(s.mouse.y)
    }

}

编辑：这与Detect clicked object in THREE.js 不同，他不在容器中工作。再加上他对我在任何地方的边距都有一点问题我点击屏幕它没有检测到我需要什么，我需要它只在容器上工作而不是整个网页加上那里的帮助已经过时并且无法正常工作 annymore

【问题讨论】：

Detect clicked object in THREE.js的可能重复
您是否遗漏了一些代码？因为看起来您没有使用鼠标坐标设置光线投射器。
我遗漏了一些代码，是的，我的主要问题已解决，但现在遇到了一个新问题，即点击将看不到对象\

标签： three.js raycasting

【解决方案1】：

如果您正在使用不在页面左上角的画布，则需要再执行一步才能获得标准化的设备坐标。请注意，WebGL 中的 NDC 与画布绘图区域相关，而不是屏幕或文档（[-1,-1] 和 [1,1] 是画布的左下角和右上角）。

理想情况下，您应该使用ev.offsetX/ev.offsetY，但目前尚不支持浏览器。相反，您可以这样做：

const {top, left, width, height} = renderer.domElement.getBoundingClientRect();

mouse.x = -1 + 2 * (ev.clientX - left) / width;
mouse.y = 1 - 2 * (ev.clientY - top) / height;

查看这里的工作示例：https://codepen.io/usefulthink/pen/PVjeJr

另一种选择是静态计算页面上画布的偏移位置和大小，并根据ev.pageX/ev.pageY 计算最终值。这样做的好处是更稳定（因为它不依赖于滚动），并且允许缓存顶部/左侧/宽度/高度值。

【讨论】：