如何检测WebGL中单击的对象？

问题描述

首先，我没有在Orbits应用中使用3J，因为我遇到了许多限制，包括但不限于纹理分辨率问题和对复杂照明方程的要求，但我想实现一些东西就像3Js的raycaster一样，允许我检测用户单击的物体。

我是WebGL的新手，但是在软件开发中是“老手”，因此我正在寻找有关从何开始的提示。

解决方法

方法如下：

您生成了两次场景，一次正常显示，第二次生成，对象具有唯一的颜色但未显示。然后，使用第二个场景中的gl.readPixels使用第一个场景中的位置，并解码颜色以识别对象。

现在我必须自己实现它。

,

捡球体

在拾取球体或分离的对象（不是彼此内部）时，您可以使用简单的距离ray来快速获取最接近的对象。

示例

该函数返回执行计算的函数。因为它只是距离中您最感兴趣的距离，所以可以保持正方形。距相机的距离保持为沿光线的单位距离。

function distanceFromRay() { 
    var dSqr,ox,oy,oz,vx,vy,vz;
    function distanceSqr(px,py,pz) {
        const ax = px - ox,ay = py - oy,az = pz - oz;
        const u = (ax * vx + ay * vy + az * vz) / dSqr;        
        distanceSqr.unit = u;
        if (u > 0) { // is past origin
            const bx = ox + vx * u - px,by = oy + vy * u - py,bz = oz + vz * u - pz;
            return bx * bx + by * by + bz * bz; // dist sqr to closest point on ray 
        }
        return Infinity;
    }
    distanceSqr.unit = 0;
    distanceSqr.setRay(x,y,z,xx,yy,zz) { // ray from origin x,// infinite length along xx,zz
       (ox = x,oy = y,oz = z);
       (vx = xx,vy = yy,vz = zz);
       dSqr = vx * vx + vy * vy + vz * vz;
    }
    return distanceSqr;
}

用法

有一次设置呼叫；

// setup
const distToRay = distanceFromRay();

在需要拾取的帧开始时，计算并设置拾取光线。还要设置距光线和眼睛的最小距离。

// at start of frame set pick  ray
distToRay.setRay(eye.x,eye.y,eye.z,pointer.ray.x,pointer.ray.y,pointer.ray.y);
var minDist = maxObjRadius * maxObjRadius;
var nearestObj = undefined;
var eyeDist = Infinity;

然后，对于每个可拾取对象，通过使对象中心经过并将其与之前（在帧中）找到的任何距离，对象半径和距眼睛的距离进行比较，来获得距离。

// per object
const dis = distToRay(obj.pos.x,obj.pos.y,obj.pos.z);
if (dis < obj.radius && dis < minDist && distToRay.unit > 0 && distToRay.unit < eyeDist ) {
    minDist = dis;
    eyeDist = distToRay.unit;
    nearestObj = obj;
}

在帧的末尾，如果nearestObj不是undefined，它将保留对所拾取对象的引用。

// end of frame
if (nearestObj) {
    // you have the closest object
}