18

我正在用 WebGL 构建一个棋盘游戏。该板可以旋转/缩放。我需要一种将画布元素 (x,y) 上的单击转换为 3D 空间中的相关点 (x, y, z) 的方法。最终的结果是我想知道 (x, y, z) 坐标，其中包含接触到最接近用户的对象的点。例如，用户点击一个棋子，你想象一条穿过 3D 空间的射线穿过棋子和游戏板，但我想要棋子的 (x, y, z) 坐标在它所在的点感动。

我觉得这一定是一个非常普遍的问题，但我似乎无法在我的谷歌中找到解决方案。必须有某种方法可以将 3D 空间的当前视图投影到 2D 中，以便您可以将 2D 空间中的每个点映射到 3D 空间中的相关点。我希望用户能够将鼠标悬停在板上的空间上，并让斑点改变颜色。

4

4 回答 4

28

您正在寻找一个 unproject 函数，它将屏幕坐标转换为从相机位置投射到 3D 世界的光线。然后，您必须执行射线/三角形相交测试，以找到最接近与射线相交的相机的三角形。

我在jax/camera.js#L568上提供了一个非投影示例——但您仍然需要实现射线/三角形相交。我在jax/triangle.js#L113有一个实现。

然而，有一种更简单且（通常）更快的替代方法，称为“挑选”。如果您想选择整个对象（例如，一个棋子），并且您不关心鼠标实际单击的位置，请使用此选项。这样做的 WebGL 方法是将整个场景以各种蓝色阴影（蓝色是关键，而红色和绿色用于场景中对象的唯一 ID）渲染到纹理，然后从那种质地。将 RGB 解码为对象的 ID 将为您提供被单击的对象。同样，我已经实现了这个，它可以在jax/world.js#L82 获得。（另见第 146、162、175 行。）

两种方法都有利有弊（在此处和之后的一些评论中进行了讨论），您需要弄清楚哪种方法最能满足您的需求。大型场景的拾取速度较慢，但​​纯 JS 中的非投影非常慢（因为 JS 本身并不是那么快），所以我最好的建议是尝试两者。

仅供参考，您还可以查看 GLU 项目和取消项目代码，我的代码大致基于：http ://www.opengl.org/wiki/GluProject_and_gluUnProject_code

于 2011-09-10T18:27:51.293 回答
2

我目前正在解决这个问题 - 我正在采取的方法是

  1. 渲染对象以选择每个具有唯一颜色的缓冲区
  2. 读取缓冲区像素，映射回拾取的对象
  3. 将拾取的对象渲染到缓冲区，每个像素颜色是 Z 深度的函数
  4. 读取缓冲区像素，映射回 Z 深度
  5. 我们已经为拾取坐标选择了对象和近似 Z
于 2011-10-16T13:44:53.787 回答
1

这是工作演示

function onMouseUp(event) {

    event.preventDefault();        
    x_pos = (event.clientX / window.innerWidth) * 2 - 1;
    y_pos = -(event.clientY / window.innerHeight) * 2 + 1;
    z_pos = 0.5;

    var vector = new THREE.Vector3( x_pos , y_pos , z_pos );

    var projector = new THREE.Projector();
    projector.unprojectVector(vector, camera);
    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
    var intersects = raycaster.intersectObjects(intersectObjects);

    if (intersects.length > 0) {

        xp = intersects[0].point.x.toFixed(2);
        yp = intersects[0].point.y.toFixed(2);
        zp = intersects[0].point.z.toFixed(2);  
        destination = new THREE.Vector3( xp , yp , zp );

        radians =  Math.atan2( ( driller.position.x - xp) , (driller.position.z - zp));
        radians += 90 * (Math.PI / 180);
        console.log(radians);

        var tween = new TWEEN.Tween(driller.rotation).to({ y : radians },200).easing(TWEEN.Easing.Linear.None).start();

    }

weissner-doors.de/drone/

于 2013-06-28T08:44:33.097 回答
0

由其中一根线培养而成。不确定 (x,y,z) 但你可以canvas(x,y)使用

getBoundingClientRect()

function getCanvasCoord(){
  var mx = event.clientX;
  var my = event.clientY;
  var canvas = document.getElementById('canvasId');
  var rect = canvas.getBoundingClientRect();// check if your browser supports this
  mx = mx - rect.left;
  my = my - rect.top;
  return {x: mx , y: my};
}
于 2013-07-02T04:59:44.480 回答