3

ThreeJS で押し出しジオメトリを使用してランダムな形状を作成しています。テクスチャを適用したいのですが、結果が見苦しくなります。テクスチャを正しく表示するために UVMapping を生成する方法がわかりません。

私は自分の問題をいじりました： http://jsfiddle.net/PsBtn/8/

左のメッシュでは、1 つの面が正しくテクスチャリングされていません。面が平らであるため、テクスチャが歪まないようにする必要があります。

右側では、テクスチャが回転していますが、この結果は望ましくありません。

これら 2 つのメッシュでテクスチャ レンダーを同じにするために UVMapping を自動的に生成する方法はありますか (ジオメトリの押し出し)?

メッシュを生成する方法は次のとおりです。

var points = []

points.push(new THREE.Vector2(-1000, -700));
points.push(new THREE.Vector2(-1000, -300));
points.push(new THREE.Vector2(-300, -300));
points.push(new THREE.Vector2(-300, -500));

shape = new THREE.Shape(points);
var geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings),
    texture = new THREE.Texture(canvas);
texture.needsUpdate = true;

var material = new THREE.MeshBasicMaterial({
    color: 0xFF00FF,
    map: texture
});

geometry.faceUvs = [[]];
geometry.faceVertexUvs = [[]];

for (var f = 0; f < geometry.faces.length; f++) {

    var faceuv = [
        new THREE.Vector2(0, 1),
        new THREE.Vector2(1, 1),
        new THREE.Vector2(1, 0),
        new THREE.Vector2(0, 0)
    ];

    geometry.faceUvs[0].push(new THREE.Vector2(0, 1));
    geometry.faceVertexUvs[0].push(faceuv);
}

mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [material, new     THREE.MeshBasicMaterial({
    color: 0x000000,
    wireframe: true,
    transparent: true
})]);
mesh.position.z = -100;
mesh.position.y = 200;
scene.add(mesh);
4

1 に答える 1

1

解決策を見つけました。カスタムフォームのUVフォームを計算する必要があります。このウェブページは本当に便利です：

http://paulyg.f2s.com/uv.htm

于 2013-02-26T16:51:58.943 に答える