如何在threejs中显示具有PNG纹理的3d对象(obj格式)?

时间:2019-01-28 07:08:34

标签: three.js 3d blender texture-mapping

我指的是this。遵循的Blender渲染方法将材料设为透明。 我将PNG图像用作搅拌机中平面上的纹理。在Blender中以渲染模式正确显示。但是当我将其导出为obj并在在线3d查看器或threejs中加载obj&mtl时,该对象不可见。

搅拌器文件https://drive.google.com/file/d/1nfRLu_BzHYvycXZG5Jqjymj5eV6tYvxP/view?usp=sharing

OBJ文件 https://drive.google.com/file/d/1gbxpyjpQCz-CG4I91S6XhsmRWyAR_HK_/view?usp=sharing

Mtl文件 https://drive.google.com/file/d/1lSrtM6Fxgsfrp_zUX_R3Fg_MzrIRCxpB/view?usp=sharing

PNG https://drive.google.com/file/d/1KBGWwm-iikbz14bfR9w0_iUb5N6Km_RP/view?usp=sharing

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setTexturePath('models/');
mtlLoader.setPath( 'models/' );
var url = "spects_plane1.mtl";
mtlLoader.load( url, function( materials ) {

    materials.preload();

    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials( materials );
    objLoader.setPath( 'models/' );
    objLoader.load( 'spects_plane1.obj', function ( object ) {

        spectsObj.add(object);

    },function ( xhr ) {
        console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
    },
    function ( error ) {
        console.log( 'An error happened' );
    });

});
spectsObj.position.set(0, 0, -1);

scene.add(spectsObj);

var light = new THREE.PointLight( 0xffffff, 1, 0 );

light.position.set(1, 1, 1);

var hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.50);

var dirLight = new THREE.DirectionalLight(0xffffff, 0.50);

scene.add(light);

1 个答案:

答案 0 :(得分:0)

使用此材料文件,它应该可以在3dviewer.net中正常加载。当您希望将Ka一般设置为接近0.2时,已将Ka指定为1.0。但最重要的是,您已指定不透明度0.0,这表示对象不可见。我将其更改为1.0

newmtl Material.001
Ns 96.078431
Ka 0.200000 0.200000 0.200000
Kd 0.640000 0.640000 0.640000
Ks 0.500000 0.500000 0.500000
Ke 0.000000 0.000000 0.000000
Ni 1.000000
d 1.000000
illum 2
map_Kd spects2.png
map_d spects2.png