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

Posted 2023-03-23

【中文标题】将模型从 Blender 导出到 Three.js 时没有纹理

【英文标题】：No texture when exporting a model from Blender to Three.js

【发布时间】：2013-12-08 18:26:10

【问题描述】：

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

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

（红色）在 Blender 内部，在导出之前，模型的外观 喜欢。应用于模型的纹理是大理石。 （蓝色）将模型导出为 Three.js 格式（文件名 fullBoard.js）并在 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 );

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

【问题讨论】：

你看过this question吗？

是的，但我认为它并不完全适用，因为我正在尝试使用预设的 Blender 纹理，所以当我导出为 Three.js 格式时，没有“texture.jpg”可以尝试加载。

大理石纹理当然也存在于某处，可能在 Blender 程序目录中。除非它是程序性的，在这种情况下，您需要将其转换为图像。这似乎描述了导出程序纹理的过程：blenderartists.org/forum/…

【参考方案1】：

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

我还建议使用不同的导出器，例如二进制 GLTF (.glb)

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

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