ThreeJS:一些材质纹理面/三角形无法渲染

时间:2016-12-15 00:26:32

标签: three.js

我有.obj和.mtl从.tga文件加载纹理。这一切似乎都在3D建模软件中工作/看起来很好,但是当加载了三个物体(THREE.WebGLRenderer({ antialias: true }))一些物体的孩子时(特别是在膝盖和小腿之间,但不是,例如,口袋和腿),似乎有一个透明的锯齿状间隙 /空三角形。

尝试打开抗锯齿,更改透支值,关闭透明度等

装载程序功能:

threejsHelper.helpers.loadObject('objects/pants/MaleBaggyPants.obj', 'objects/pants/MaleBaggyPants.mtl', {
    blinn1SG: (new THREE.MeshPhongMaterial({ color: 0xffffff, transparent: false, opacity: 1.0, overdraw: 0.5, map: threejsHelper.helpers.loadTexture(app.manager, 'objects/pants/button.tga') })),
    blinn2SG: (new THREE.MeshPhongMaterial({ color: 0xffffff, transparent: false, opacity: 1.0, overdraw: 0.5, map: threejsHelper.helpers.loadTexture(app.manager, 'objects/pants/back.tga') })),
    blinn4SG: (new THREE.MeshPhongMaterial({ color: 0xffffff, transparent: false, opacity: 1.0, overdraw: 0.5, map: threejsHelper.helpers.loadTexture(app.manager, 'objects/pants/front.tga') })),
    blinn5SG: (new THREE.MeshPhongMaterial({ color: 0xffffff, transparent: false, opacity: 1.0, overdraw: 0.5, map: threejsHelper.helpers.loadTexture(app.manager, 'objects/pants/pocket.tga') })),
    blinn6SG: (new THREE.MeshPhongMaterial({ color: 0xffffff, transparent: false, opacity: 1.0, overdraw: 0.5, map: threejsHelper.helpers.loadTexture(app.manager, 'objects/pants/back.tga') })),
    blinn7SG: (new THREE.MeshPhongMaterial({ color: 0xffffff, transparent: false, opacity: 1.0, overdraw: 0.5, map: threejsHelper.helpers.loadTexture(app.manager, 'objects/pants/front.tga') }))
}, function (object) {
    object.rotation.x = (-90*Math.PI/180);
    object.rotation.z = (-90*Math.PI/180);
    app.scene.add(object);
    app.ready = true;
});

助手功能:

...
loadTexture: function (manager, path) {
    var texture;
    if (path.split('.').pop() == 'tga') {
        var loader = new THREE.TGALoader();
        texture = loader.load(path);
    } else {
        texture = new THREE.Texture();
        var loader = new THREE.ImageLoader(manager);
        loader.load(path, function (image) {
            texture.image = image;
            texture.needsUpdate = true;
        });
    }
    return texture;
},
loadMaterial: function (mtlPath, textures, complete) {
    var loader = new THREE.MTLLoader();
    loader.load(mtlPath, function (materials) {
        materials.preload();
        if (!!materials.materials) {
            for (var key in materials.materials) {
                if (key in textures) {
                    materials.materials[key] = textures[key];
                }
            }
        }
        complete(materials);
    });
},
loadObject: function (objPath, mtlPath, textures, complete) {
    app.helpers.loadMaterial(mtlPath, textures, function (materials) {
        var loader = new THREE.OBJLoader();
        loader.setMaterials(materials);
        loader.load(objPath, function (object) {
            complete(object);
        });
    });
},
...

1 2 3

2 个答案:

答案 0 :(得分:3)

你似乎在两个物体上都有额外的顶点,我认为这些顶点会与三角测量结合起来 删除这些不需要的顶点,我99%肯定它会解决您的问题。

extra vertices

我也注意到模型的规模非常小。

答案 1 :(得分:0)

我遇到了同样的问题。某些三角形在 Threejs 上没有正确渲染,而在我的 OpenGL 应用上正确渲染。

我通过使用 Uint32Array 而不是 Uint16Array 来定义几何的索引解决了这个问题。我只是放了这行代码,一切都像魅力一样。

const indices = new Uint32Array(faceDict.index);