three.js 容器中的光线投射器

Question

我的实习需要使用 three.js 需要在页面上的容器中进行应用，但它需要对象上的 onclick 函数。问题是我无法仅在容器中找到有关光线投射的任何内容，现在单击将无法获得我需要的对象

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他不在容器中工作是不一样的。另外他对我的边距有一点问题我点击屏幕它没有检测到我需要什么我需要它只在容器上工作而不是整个网页加上帮助已经过时并且不再工作

Answer 1

如果您正在使用不在页面左上角的 canvas，您需要再执行一个步骤才能获得规范化的设备坐标。请注意，WebGL 中的 NDC 是相对于 canvas 绘图区域的，而不是屏幕或文档（[-1,-1] 和 [1,1] 是 [= 的左下角和右上角27=]).

理想情况下，您会使用 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

另一种选择是静态计算canvas在页面上的偏移位置和大小，并根据ev.pageX/ev.pageY计算最终值。这样做的好处是更加稳定（因为它不依赖于滚动）并且允许缓存 top/left/width/height 值。

three.js 容器中的光线投射器

three.js raycaster in a container

three.js

raycasting