Three.js - 从OBJ文件加载的网格上加载jpg纹理

时间:2016-01-29 13:26:45

标签: 3d three.js

我有一个载有Configured with: --prefix=/Applications/Xcode.app/Contents/Developer/usr --with-gxx-include-dir=/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.11.sdk/usr/include/c++/4.2.1 Apple LLVM version 7.0.0 (clang-700.0.72) Target: x86_64-apple-darwin14.5.0 Thread model: posix 的人体网格,我想在其上应用OBJMTLLoader

加载纹理和OBJ文件:

skin.jpg

我有一个简单的立方体,我在上面渲染皮肤:

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

我看到的是:

enter image description here

立方体已经应用了皮肤,但是身体只能以某种方式获得它的颜色。如果我将 var cubeGeometry = new THREE.BoxGeometry( 1, 1, 1 ); var cubeMaterial = new THREE.MeshPhongMaterial({ map: skinTexture }); cube = new THREE.Mesh( cubeGeometry, cubeMaterial ); scene.add( cube ); 更改为map: skinTexture,则正文会更改颜色,因此参数应该是正确的。

这是头部和背景上立方体的特写:

enter image description here

color: 0xff0000尺寸为256x256。

为什么身体没有与立方体相同的纹理?谢谢

1 个答案:

答案 0 :(得分: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;
}