Javascript 改进THREE.js中旋转三角形/面的UV坐标生成

我在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对齐直角三角形的面上纹理的纵横比。也就是说，全部；）

因此，我想我会尝试旋转面，使其与XY平面对齐，然后计算UV，就像在其上绘制1x1正方形一样。这样一个三角形——在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中的更多现有功能来至少简化代码

谢谢

你是这个意思吗

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

此外，UV通常位于左下角

（0,0）

关于问题（a）和（c）：鉴于你正在做的事情，“否”

关于问题（b）：我希望你自己能找到答案。：-）

你是这个意思吗

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

此外，UV通常位于左下角

（0,0）

关于问题（a）和（c）：鉴于你正在做的事情，“否”

---

关于问题（b）：我希望你自己能找到答案。：-）

嘘！奇怪的是，总是将轴设置为

（0,0,0）

只能在某些面上破坏它。谢谢你的帮助。如果你回答，我可以接受你的回答，并给你分数或其他东西。嘘！奇怪的是，总是将轴设置为

（0,0,0）

只能在某些面上破坏它。谢谢你的帮助。如果你回答，我可以接受你的回答，并给你分数或其他东西。