javascript - 改进 THREE.js 中旋转三 Angular 形/面的 UV 坐标生成

Question

我在 StackOverflow 和其他地方看到了很多与此类似的问题，但没有一个直接解决我的问题。我正在 THREE.js 中使用凸包生成器生成 n 边多面体。我想将方形纹理映射到每个多面体的每个面上，使其不变形，并通过透视正确绘制(即不抵消透视或类似的东西)。

我的第一次尝试以及我在其他地方看到的大部分内容都是这样的:

function faceUv( v1, v2, v3 ) {
  return [
    new THREE.Vector2(0,0),
    new THREE.Vector2(1,0),
    new THREE.Vector2(1,1)
  ];
}

这会更改非 XY 对齐直 Angular 三 Angular 形面上纹理的纵横比。也就是说，全部；)

所以，我想我应该尝试旋转面以与 XY 平面对齐，然后计算 UV，就像在其上绘制 1x1 正方形一样。因此，像这样的三 Angular 形(在 XY 对齐后)将获得以下 uv 坐标:

0,0                          1,0
                             * v1(uv=1.0,0.0)


  v3(uv=0.1,0.5)
   *


               * v2(uv=0.5,0.8)

0,1                          1,1

这对于我的目的来说已经足够了。

这是我当前的解决方案:

function faceUv(v1, v2, v3) {
    var z = new THREE.Vector3(0, 0, 1),
        n = new THREE.Triangle(v1, v2, v3).normal(),
        // from http://stackoverflow.com/questions/13199126/find-opengl-rotation-matrix-for-a-plane-given-the-normal-vector-after-the-rotat
        // RotationAxis = cross(N, N')
        // RotationAngle = arccos(dot(N, N') / (|N| * |N'|))
        axis = new n.clone().cross(z),
        angle = Math.acos(n.clone().dot(z) / (n.length() * z.length()));

    var mtx = new THREE.Matrix4().makeRotationAxis(axis, angle);
    var inv = new THREE.Matrix4().getInverse(mtx);
    var v1r = v1.clone().applyMatrix4(inv),
        v2r = v2.clone().applyMatrix4(inv),
        v3r = v3.clone().applyMatrix4(inv),
        ul = v1r.clone().min(v2r).min(v3r),
        lr = v1r.clone().max(v2r).max(v3r),
        scale = new THREE.Vector2(1.0 / (lr.x - ul.x), 1.0 / (lr.y - ul.y));

    v1r.sub(ul);
    v2r.sub(ul);
    v3r.sub(ul);

    return [
        new THREE.Vector2(v1r.x * scale.x, v1r.y * scale.y),
        new THREE.Vector2(v2r.x * scale.x, v2r.y * scale.y),
        new THREE.Vector2(v3r.x * scale.x, v3r.y * scale.y)
    ];
}

它似乎工作得很好，除了与 YZ 平面对齐的面(即法线为 0,-1,0)。这是一个屏幕截图，注意多面体的底部。

所以我的问题是:a)有没有更好/更简单的方法来做到这一点？ b) 如何修复底面？c) 有没有办法通过使用 THREE.js 中的更多现有功能来至少简化代码？

谢谢!

Answer 1

你是这个意思吗？

axis = n.clone().cross( z );

此外，UV 通常位于左下角的 ( 0, 0 ) 中。

关于问题(a)和(c):鉴于您正在做的事情，“不”。

关于问题(b):我希望您可以自己查明这一点。 :-)