如何在给定 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 定义纹理中 'x' 的方向，A->C 类似地定义平面在 3d space 中的另一个方向.. 将纹理 'y' 映射到平面上的位置。

让我们假设您的枢轴点在中间。所以这在世界上是众所周知的 space。然后随着 UV 从 0 变为 1，例如UV 坐标 (1.0, 0.5) 将在平面对象枢轴的矢量方向上位于平面全宽的一半处......从中间一直到边缘。然后在中间，否则 V 为 0.5（如归一化纹理 y 像素坐标）。

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

鉴于您知道平面的大小，实际上您不需要查看顶点，因为平面的方向已经在对象矩阵中。所以你只需要将你的 UV 坐标调整到中间的枢轴 (-0.5) 并乘以平面大小以获得平面中的点 space。然后矩阵乘法将其转换为 world space.

如何在给定 3d 平面对象上的 UV 坐标的情况下获取 3D 点坐标 - Threejs

How to get 3D point coordinates given UV coordinates on a 3d plane object - Threejs

javascript

3d

three.js