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

Question

首先，我没有在我的Orbits应用程序中使用3Js，因为我遇到了许多限制，包括但不限于纹理分辨率问题和我对复杂照明方程的要求，但我想实现类似3Js的光线投射器的东西让我能够检测用户单击的对象。

我是 WebGL 新手，但是是软件开发领域的“老手”，所以我正在寻找一些关于从哪里开始的提示。

Answer 1

做法如下：

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

现在我必须自己实现。

Answer 2

拾取球体

当拾取球体或分离的物体（不是一个在另一个内）时，您可以使用与射线的简单距离来快速获取最近的物体。

示例

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

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, y,z, 
                                              // infinite length along xx,yy,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
}

Answer 3

单击时，将投影中使用的相同变换矩阵应用到网格几何形状。您将获得画布中绘制的位置。扫描所有网格（三角形），找到鼠标在其中坐标的网格。