将模型从Blender导出到Three.js时没有纹理

Question

我正在尝试使用Blender导出到Three.js插件，从Blender导出具有纹理的模型以用于Three.js。

http://i.imgur.com/enj1GQW.png

1. （红色）是Inside Blender，在导出之前，模型是什么样的。 应用于模型的纹理是大理石。
2. 将模型导出为Three.js格式（文件名fullBoard.js）并在Blender中重新打开后（蓝色）
3. （绿色）对Three.js使用前面提到的导出

我的Javascript函数，用于初始化模型：

    function init2(){
    container = document.createElement( 'div' );
    document.body.appendChild( container );
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
    camera.position.z = 100;

    scene = new THREE.Scene();

    var ambient = new THREE.AmbientLight( 0x101010 );
    scene.add( ambient );

    var directionalLight = new THREE.DirectionalLight( 0xffeedd );
    directionalLight.position.set( 0.5, 2, 1 ).normalize();
    scene.add( directionalLight );

    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );

    var loader  = new THREE.JSONLoader();

    loader.load( 'objects/fullBoard.js', function ( geometry, materials ) {
        var material1 = materials[ 0 ]; //black
        var material2 = materials[ 1 ]; //white
        mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
        mesh.scale.set(5,5,5);
        scene.add( mesh );
    }  );

    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
    window.addEventListener( 'resize', onWindowResize, false );

}

我一直在努力寻找一种简单的方法来制作带有纹理的Three.js的自定义3D模型。 我还尝试使用THREE.ColladaLoader（）导出.dae文件，并且该方法也没有产生纹理。

Answer 1

混合器过程纹理默认情况下不会导出。 但是，您可以将它们烘焙为常规纹理，然后导出。 网络上有教程。

我还建议您使用其他导出程序，例如二进制GLTF（.glb）

我曾经使用three.js导出器，但发现在three.js的修订版之间它相对过时了，如果使用现有格式（如gltf或collada），则与其他程序的互操作性更好。需要稍后进行更改，但丢失了原件。

GLTF还具有压缩网格的好处，这可以对Web交付的内容产生巨大的影响。