如何在p5.js中检测像素颜色？自制3D光线投射器遇阻

p5.js完全支持读取像素颜色，不需要手动设置光线碰撞区域，你的代码问题主要出在这几个细节上：

• 坐标类型不匹配：get()方法要求传入整数坐标，但你的sx、sy是三角函数计算得到的浮点数，直接传入会导致读取位置偏移。可以用floor()或round()将坐标转为整数：

  let px = floor(sx);
  let py = floor(sy);
  let pixelColor = get(px, py);
  

• 返回值处理错误：get()返回的是p5.Color对象，直接print(e)只会输出对象引用，要查看具体颜色值，需要调用对象的属性或方法：

  • 获取单通道值：pixelColor.r、pixelColor.g、pixelColor.b、pixelColor.a
  • 输出完整颜色信息：print(pixelColor.toString())

• 像素缓存更新时机：如果场景是在draw()中动态绘制的，确保调用get()前像素数据已经更新。虽然get()默认会自动同步，但复杂动画场景下，可以在绘制完所有元素后调用loadPixels()强制刷新像素缓存。

修正后的代码示例 #

for (let m = 0; m < 30; m++) {
    for (let i = 0; i < 100; i++) {
        sx += 1 * sin(sdir);
        sy += 1 * cos(sdir);
        // 转换为整数坐标
        let px = floor(sx);
        let py = floor(sy);
        // 读取像素颜色
        let pixelColor = get(px, py);
        // 输出具体颜色通道值
        print(`R: ${pixelColor.r}, G: ${pixelColor.g}, B: ${pixelColor.b}`);
    }
    line(sx, sy, x, y);
    sdir += 1;
}

额外优化建议 #

如果你的光线投射器是用来检测墙壁等碰撞，预先维护一个二维碰撞地图数组（比如用0/1标记可通行/碰撞区域），比实时读取像素的效率更高，更适合光线投射的性能需求。

内容的提问来源于stack exchange，提问作者chicken nugget