合併網格上的均勻紋理

如何使幾何體中的合併網格在一次安寧而不是3次紋理化？在我的示例代碼中，紋理是在每個分離的幾何體上完成的（請參閱圖像，點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; 
}

來源

2017-01-09 Martin Pineault

僅供社區使用。這裏是我用來修復它的功能。在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; 
}

來源

2017-01-09 20:43:04

你需要讓合併後的網格之間確定的UV比賽。該接縫是由不同物體具有不同UV佈局的事實引起的。您需要在創建的幾何圖形上編輯faceVertexUvs或faceUvs，以使UVs連續，然後設置uvsNeedUpdate

來源

2017-01-09 18:09:30 griffin2000

是的，這是做的工作。另外，我們可以將圖像/紋理旋轉90度嗎？ –

簡單地翻轉U和V座標。這會產生旋轉90度的效果。 – griffin2000

再次罰款。但是現在我遇到了紫外線不能正確使用側邊紋理和最差的問題，即圓柱體的問題。我發現這種技術使用曲面法線，但它不起作用。（http://stackoverflow.com/questions/20774648/three-js-generate-uv-coordinate） –

合併網格上的均勻紋理

回答

相關問題