1

我在 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 中的更多现有功能来至少简化代码？

谢谢！

4

1 回答 1

1

你是这个意思吗？

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

此外，UV 通常( 0, 0 )位于左下方。

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

关于问题（b）：我希望您可以自己追踪。:-)

于 2013-11-07T01:24:58.320 回答