2016-01-29 121 views
1

我有一個裝有OBJMTLLoader的人體網格,我想對其應用skin.jpgThree.js - 從OBJ文件加載的網格上加載jpg紋理

載入紋理和OBJ文件:

var texloader = new THREE.TextureLoader(); 
var skinTexture = texloader.load('/test/skin.jpg', function (tex) { 
    skinTexture = tex; 
    skinTexture.needsUpdate = true; 
}); 
skinTexture.wrapS = THREE.RepeatWrapping; 
skinTexture.wrapT = THREE.RepeatWrapping; 
skinTexture.repeat.set(4, 4); 


var loader = new THREE.OBJMTLLoader(); 

loader.load('/test/body.obj', 'test/body.mtl', function (res) { 
    body = res; 

    var _body = body.children[0].children[1] 
    _body.material = new THREE.MeshLambertMaterial({ 
     map: skinTexture 
    }); 
    _body.geometry.computeVertexNormals(); 

    scene.add(body); 

}, onProgress, onError); 

,我有一個簡單的立方體,我呈現在皮膚上:

var cubeGeometry = new THREE.BoxGeometry(1, 1, 1); 
    var cubeMaterial = new THREE.MeshPhongMaterial({ 
     map: skinTexture 
    }); 
    cube = new THREE.Mesh(cubeGeometry, cubeMaterial); 
    scene.add(cube); 

我看到的是這樣的:

enter image description here

立方體應用了皮膚,但身體只獲得它的顏色someho W上。如果我將map: skinTexture更改爲color: 0xff0000身體會改變顏色,所以參數應該是正確的。

這是頭部的特寫鏡頭,和立方體上的背景:

enter image description here

skin.jpg尺寸是256×256。

任何想法爲什麼身體不能獲得與立方體相同的紋理?謝謝

+1

是否身體模型都有防紫外線的地圖嗎? – alex

+0

@alex不,它不,我想它有?我期待着某種自動平鋪 –

回答

1

問題是紫外線。感謝@alex提及,@Tamlyn發佈並回答如何生成它們。我使用的代碼是this answer

它看起來像這樣:

function assignUVs(geometry) { 

    geometry.faceVertexUvs[0] = []; 

    geometry.faces.forEach(function(face) { 

     var components = ['x', 'y', 'z'].sort(function(a, b) { 
      return Math.abs(face.normal[a]) > Math.abs(face.normal[b]); 
     }); 

     var v1 = geometry.vertices[face.a]; 
     var v2 = geometry.vertices[face.b]; 
     var v3 = geometry.vertices[face.c]; 

     geometry.faceVertexUvs[0].push([ 
      new THREE.Vector2(v1[components[0]], v1[components[1]]), 
      new THREE.Vector2(v2[components[0]], v2[components[1]]), 
      new THREE.Vector2(v3[components[0]], v3[components[1]]) 
     ]); 

    }); 

    geometry.uvsNeedUpdate = true; 
}