2017-01-09 2 views
0

ジオメトリからマージされたメッシュを3の代わりに1つの平和でテクスチャ化するにはどうすればよいですか?私のサンプルコードでは、テクスチャは分離された各ジオメトリ上で実行されます(画像、ポイント1と2を参照)。 2つの立方体と1つの円柱。使用マージされたメッシュの統一テクスチャ

Wrong result コード:

scene = new THREE.Scene(); 

var texture = new THREE.TextureLoader().load('1-3-2-5-Bois.jpg'); 
var mesh = [], no = 0; 
var meshes = []; 
var geometry = new THREE.CubeGeometry(2, 10, 1); 
mesh[no] = new THREE.Mesh(geometry); 
meshes.push(mesh[no]); 
no++; 

geometry = new THREE.CylinderGeometry(0.5, 0.5, 10, 32); 
mesh[no] = new THREE.Mesh(geometry); 
mesh[no].position.set(1, 0, 0); 
mesh[no].rotation.x = 0; 
mesh[no].rotation.y = Math.PI/2; 
mesh[no].rotation.z = 0; 
meshes.push(mesh[no]); 
no++; 

geometry = new THREE.CubeGeometry(5, 10, 1); 
mesh[no] = new THREE.Mesh(geometry); 
mesh[no].position.set(-3.5, 0, 0); 
meshes.push(mesh[no]); 
no++; 
geometry = mergeMeshes(meshes); 

var material = new THREE.MeshBasicMaterial({ map: texture }); 
mesh = new THREE.Mesh(geometry, material); 
scene.add(mesh); 
... 
function mergeMeshes (meshes) { 
    var combined = new THREE.Geometry(); 
    for (var i = 0; i < meshes.length; i++) { 
     meshes[i].updateMatrix(); 
     combined.merge(meshes[i].geometry, meshes[i].matrix); 
    } 
    return combined; 
} 

答えて

0

コミュニティのためだけです。ここで私はそれを修正するために使用した関数です。 mergeMes​​hes()の後に呼び出します。

function assignUVs(geometry) { 
geometry.computeBoundingBox(); 

var max = geometry.boundingBox.max, min = geometry.boundingBox.min; 
var offset = new THREE.Vector2(0 - min.x, 0 - min.y); 
var range = new THREE.Vector2(max.x - min.x, max.y - min.y); 
var faces = geometry.faces; 
var vertices = geometry.vertices; 

geometry.faceVertexUvs[0] = []; 
for (var i = 0, il = faces.length; i < il; i++) { 
    var v1 = vertices[faces[i].a], v2 = vertices[faces[i].b], v3 = vertices[faces[i].c]; 

    geometry.faceVertexUvs[0].push([ 
    new THREE.Vector2((v1.x + offset.x)/range.x, (v1.y + offset.y)/range.y), 
    new THREE.Vector2((v2.x + offset.x)/range.x, (v2.y + offset.y)/range.y), 
    new THREE.Vector2((v3.x + offset.x)/range.x, (v3.y + offset.y)/range.y) 
    ]); 
} 
geometry.uvsNeedUpdate = true; 
} 
1

あなたがマージされたメッシュの間で確認したUVの試合をする必要があります。そのシームは、異なるオブジェクトが異なるUVレイアウトを持つという事実によって引き起こされます。 UVが連続するように、作成されたジオメトリのfaceVertexUvsまたはfaceUvsを編集し、次にuvsNeedUpdateを設定する必要があります。

+0

はい、これは仕事をしました。また、イメージ/テクスチャを90度回転できますか? –

+0

U座標とV座標を反転するだけです。それは90度回転する効果があります。 – griffin2000

+0

もう一度。しかし、今私はUVの問題は、側面のテクスチャーと最悪の、シリンダーに適切な値を使用していない。表面の法線を使ってこのテクニックを見つけましたが、うまくいきません。 (http://stackoverflow.com/questions/20774648/three-js-generate-uv-coordinate) –

関連する問題