命中测试伪 3d 空间

Question

所以我正在为 html5 中的 canvas 元素编写一个小型伪 3d 引擎。在下面的代码中，我绘制了一堆位置和旋转不同的正方形（绕 z 轴旋转，因此没有变形）

现在我希望能够知道用户单击了哪个正方形。在对象数组中，项目由 z 位置支持，从距相机最远的方块开始（以便它们正确绘制）。那么，给定一个相对于画布左上角的 3d 点，我怎样才能知道哪个方块被点击了呢？

//Draw objects
for (var i = 0; i < objects.length; i++) {
    var object = objects[i];
    var cz = object.position.z - camera.position.z;

    if (cz > 0) {
        cz = 1 / ((cz - 1) * 0.75 + 1);

        context.save();

        context.translate(halfWidth, halfHeight); //viewport transform
        context.scale(1, -1); //invert y axis
        context.scale(cz, cz); //perspective
        context.translate(-camera.position.x, -camera.position.y); //camera transform
        context.translate(object.position.x, object.position.y); //world transform
        context.rotate(object.rotation);

        context.fillStyle = object.color;
        context.fillRect(-40, -40, 80, 80);

        context.restore();
    }
}

PS如果我做了任何奇怪或倒退的事情，而你知道改进的方法，我很乐意听到建议

Answer 1

我建议您将具有相同转换的对象绘制到相同大小的隐藏画布上，但为每个方块赋予唯一的颜色（可能源自索引i）。

您可以这样做：

var col = index.toString(16);                 // convert to hex
while (col.length < 6) col = "0"+col;     // pad leading 0s
ctx.fillStyle = "#"+col;
ctx.fillRect(-40,-40,80,80);

然后，当您在可见画布上收到鼠标单击事件时，查看隐藏画布中的该位置以获取所选对象的颜色（索引）：

var colData = ctx.getImageData(clickX, clickY, 1, 1).data;
var index = (colData[2]<<16) | (colData[1]<<8) | colData[0];

这将适用于最多 16M 对象，并且相当不错简单的。