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 平面に揃えてから、1x1 の正方形が描かれたかのように UV を計算しようと考えました。したがって、このような三角形は、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 に答える