如何在3d平面对象上给出UV坐标的3D点坐标 - Threejs

Question

我正在尝试构建一些简单的数据可视化，我选择的武器是Three.js。我有一系列PlaneGeometry网格，我在其上应用了一系列红色方块动态创建的透明纹理在我不同的不透明度值上绘制。
我的计划是使用这些点创建其他网格（例如CylinderGeometry）并将它们放在红色方块的顶部，其高度值基于红色方块的不透明度值。到目前为止，我可以设法找到每个方块的UV值并将其存储到一个数组中，但是我在阻止将这些红色方形UV坐标转换为3D世界坐标系时。我已经发现了几个描述应用于球体的相同概念的资源，并且令人惊讶的是它非常直接，但没有其他资源可以将相同的概念应用于其他网格。

如何在纹理内获取红色方块的3D坐标？

Answer 1

编辑：我认为就是这样：

function texturePosToPlaneWorld(planeOb, texcoord)
{    
    var pos = new THREE.Vector3();
    pos.x = (texcoord.x - 0.5) * PLANESIZE;
    pos.y = (texcoord.y - 0.5) * PLANESIZE;

    pos.applyMatrix4(planeOb.matrix);
    return pos;
}

在我制作的jsfiddle中使用如下：http://jsfiddle.net/L0rdzbej/2/

var texcoord = new THREE.Vector2(0.8, 0.65);
var newpos = texturePosToPlaneWorld(planeOb, texcoord);
cubeOb.position.copy(newpos);

飞机很简单。顶点A，B之间的边缘 - 矢量A-> B定义了＆＃39; x＆amp; B的方向。在你的纹理中，和A-> C类似地在平面进入3d空间的另一个方向上..你有纹理＆＃39; s＆＃39; y＆＃39;映射在飞机上。

让我们假设您的支点位于中间位置。这在世界空间中是众所周知的。然后当UV从0变为1时，例如， UV坐标（1.0,0.5）将在平面物体枢轴的矢量方向上位于平面的整个宽度的一半处。从中间一直到边缘。然后在中间，否则，你有0.5英寸的V（如规范化纹理y像素）。

要知道世界空间中平面顶点的坐标，只需将它们与对象的方向对齐即可。

如果您知道平面的大小，实际上您不需要查看顶点，因为平面的方向已经在对象矩阵中。因此，您只需要将UV坐标调整到中间的轴（-0.5），然后乘以平面尺寸即可获得平面空间中的点。然后矩阵乘法将其转换为世界空间。