Question

我正在尝试从Blender导出一个带有纹理的模型，以便在Three.js中使用，使用Blender导出到Three.js插件。

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

（红色）是Inside Blender，在导出之前，模型看起来是什么喜欢。应用于模型的纹理是大理石。
（蓝色）
（绿色）使用前面提到的导出与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 );

}

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

Answer 1

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

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

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

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

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

1 个答案: