2017-01-09 54 views
0

如何使几何体中的合并网格在一次安宁而不是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; 
} 

回答

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布局的事实引起的。您需要在创建的几何图形上编辑faceVertexUvs或faceUvs,以使UVs连续,然后设置uvsNeedUpdate

+0

是的,这是做的工作。另外,我们可以将图像/纹理旋转90度吗? –

+0

简单地翻转U和V坐标。这会产生旋转90度的效果。 – griffin2000

+0

再次罚款。但是现在我遇到了紫外线不能正确使用侧边纹理和最差的问题,即圆柱体的问题。我发现这种技术使用曲面法线,但它不起作用。 (http://stackoverflow.com/questions/20774648/three-js-generate-uv-coordinate) –