时间戳

首页 > 解决方案 > 如何在threejs中显示带有PNG纹理的3d对象（obj格式）？

three.js - 如何在threejs中显示带有PNG纹理的3d对象（obj格式）？

问题描述

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

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

对象文件 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);

标签： three.js3dblendertexture-mapping

解决方案

使用这个材质文件，它应该可以在 3dviewer.net 中正常加载。当您希望 Ka 通常接近 0.2 时，您已将 Ka 指定为 1.0。但最重要的是，您指定了 opacity 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

推荐阅读