在容器中three.js所raycaster

Question

我需要的实习，以与three.js所的aplication什么需要在一个页面上的容器，但它需要在对象上一个onclick功能。问题是我不能只在一个容器光线投射和点击发现annything现在不会得到对象，我需要

application

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

Answer 1

如果你是用帆布，是不是在页面的左上角工作，你需要一个步骤去归一化设备坐标。需要注意的是，在NDC的WebGL是相对于画布绘制区域，而不是屏幕或文件（[-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最终值。这具有更稳定的位（因为它不滚动依赖型）并且将允许缓存顶部/左/宽度/高度值的益处。