QML中3D彩色取色立方体如何实现点击拾取对应位置颜色

该功能完全可以基于你现有的Qt3D代码实现，具体方案如下：

方案1：RGB立方体直接计算（适配你的场景，改动最小） #

从你提供的效果图来看，你做的是标准RGB三通道立方体，三个坐标轴分别对应红、绿、蓝三个颜色通道，这种场景不需要读取纹理像素，直接用你已经拿到的交点坐标即可计算出对应颜色，修改ObjectPicker的onClicked回调逻辑即可：

ObjectPicker {
    id: cubePicker
    onClicked: {
        // 标准cube.obj的本地坐标范围为[-1, 1]，映射到[0,1]颜色通道范围
        const localPos = pick.localIntersection
        const r = Math.min(Math.max((localPos.x + 1) / 2, 0), 1)
        const g = Math.min(Math.max((localPos.y + 1) / 2, 0), 1)
        const b = Math.min(Math.max((localPos.z + 1) / 2, 0), 1)
        const pickedColor = Qt.rgba(r, g, b, 1)
        // 输出测试，可直接将pickedColor赋值给其他UI组件的color属性使用
        console.log("拾取颜色：", pickedColor, "十六进制：", pickedColor.toString())
    }
}

方案2：通用纹理采样（适用任意纹理的立方体） #

如果你的立方体使用的是自定义纹理，不是规则的RGB映射，可按以下步骤实现：

1. 预加载纹理对应的图片到内存，可用C++写一个辅助工具类暴露给QML，提供getColor(uvX, uvY)方法返回对应坐标的颜色
2. 通过交点的法向判断点击的是立方体的哪个面，将3D交点坐标转换为对应面的2D UV坐标：

onClicked: {
    const localPos = pick.localIntersection
    const normal = pick.localNormal
    let u, v
    // 判断点击面，计算UV坐标
    if (Math.abs(normal.x) > 0.9) { // X轴方向的面
        u = (localPos.z + 1) / 2
        v = (localPos.y + 1) / 2
    } else if (Math.abs(normal.y) > 0.9) { // Y轴方向的面
        u = (localPos.x + 1) / 2
        v = (localPos.z + 1) / 2
    } else { // Z轴方向的面
        u = (localPos.x + 1) / 2
        v = (localPos.y + 1) / 2
    }
    // 调用辅助类读取纹理对应UV的颜色
    const pickedColor = textureHelper.getColor(u, v)
}

注意事项 #

• 以上逻辑默认你的cube.obj是标准立方体，本地坐标范围为[-1,1]，如果你的模型坐标范围不同，调整映射公式的系数即可
• 如果立方体有缩放变换，需要先对localIntersection除以缩放系数再做计算

你当前实现的立方体效果如下：

内容的提问来源于stack exchange，提问作者Etienne PERIANA