如何解决如何检测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
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。