2017-01-09 1 views
0

3 개가 아닌 1 개의 평탄함으로 텍스처의 병합 된 메쉬를 텍스처로 만들려면 어떻게해야합니까? 필자의 샘플 코드에서 텍스처는 각 분리 된 지오메트리에서 수행됩니다 (이미지 1, 2 번 참조). 두 개의 큐브와 한 개의 실린더. 사용병합 된 메쉬의 균일 한 텍스처

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

커뮤니티를위한 것입니다. 여기 내가 그것을 고치기 위해 사용했던 기능. mergeMeshes() 후에 호출하십시오.

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) –