3d - Exporte un modelo texturizado de tres js a un archivo.OBJ con.MTL

three.js textures

Question

Me gustaría poder exportar un archivo obj como en este ejemplo http://threejs.org/examples/#webgl_exporter_obj

Sin embargo, me gustaría exportar el archivo .obj con las texturas correspondientes en el archivo de textura .mtl (he visto archivos obj con "usemtl someTextureNameFromMTL")

He visto esta pregunta, pero el exportador parece estar exportando solo malla. También encontré esta pregunta, pero eso solo se refiere al importador.

Lo que quería implementar es hacer un editor imprimible en 3D que también exporte texturas / colores, ya que ya hay un exportador de malla .stl para impresión en 3D. sin embargo, no he encontrado ningún exportador de mesh + color / texture para tres js :(

Answer 1

He extendido un poco el OBJExporter. Devolverá un objeto que contiene la parte .obj y la parte .mtl. Lo escribí sin pruebas, por lo que probablemente haya errores, pero espero que sea algo para empezar.

No he buscado todos los valores de mtl, solo utilicé algunos valores de estándares aparte de la información de color y textura. Quizás lo mejore más adelante. También debe tener en cuenta el nombre de archivo mtl. Actualmente, estoy escribiendo un nombre estático para la parte obj. Cuando guarde los archivos, el archivo mtl debe ser del mismo nombre que en el archivo obj declarado. De lo contrario 3ds max etc. no lo leerá.

/**
 * @author mrdoob / http://mrdoob.com/
 */

THREE.OBJExporter = function () {};

THREE.OBJExporter.prototype = {

 constructor: THREE.OBJExporter,

 parse: function ( object ) {

 var output = '''';
  var materials = {};

  var indexVertex = 0;
  var indexVertexUvs = 0;
  var indexNormals = 0;
       
 var mtlFileName = ''objmaterial''; // maybe this value can be passed as parameter
 output += ''mtllib '' + mtlFileName +  ''.mtl/n'';

  var parseMesh = function ( mesh ) {

   var nbVertex = 0;
   var nbVertexUvs = 0;
   var nbNormals = 0;

   var geometry = mesh.geometry;
   var material = mesh.material;

   if ( geometry instanceof THREE.Geometry ) {

    output += ''o '' + mesh.name + ''/n'';

    var vertices = geometry.vertices;

    for ( var i = 0, l = vertices.length; i < l; i ++ ) {

     var vertex = vertices[ i ].clone();
     vertex.applyMatrix4( mesh.matrixWorld );

     output += ''v '' + vertex.x + '' '' + vertex.y + '' '' + vertex.z + ''/n'';

     nbVertex ++;

    }

    // uvs

    var faces = geometry.faces;
    var faceVertexUvs = geometry.faceVertexUvs[ 0 ];
    var hasVertexUvs = faces.length === faceVertexUvs.length;

    if ( hasVertexUvs ) {

     for ( var i = 0, l = faceVertexUvs.length; i < l; i ++ ) {

      var vertexUvs = faceVertexUvs[ i ];

      for ( var j = 0, jl = vertexUvs.length; j < jl; j ++ ) {

       var uv = vertexUvs[ j ];

       output += ''vt '' + uv.x + '' '' + uv.y + ''/n'';

       nbVertexUvs ++;

      }

     }

    }

    // normals

    var normalMatrixWorld = new THREE.Matrix3();
    normalMatrixWorld.getNormalMatrix( mesh.matrixWorld );

    for ( var i = 0, l = faces.length; i < l; i ++ ) {

     var face = faces[ i ];
     var vertexNormals = face.vertexNormals;

     if ( vertexNormals.length === 3 ) {

      for ( var j = 0, jl = vertexNormals.length; j < jl; j ++ ) {

       var normal = vertexNormals[ j ].clone();
       normal.applyMatrix3( normalMatrixWorld );

       output += ''vn '' + normal.x + '' '' + normal.y + '' '' + normal.z + ''/n'';

       nbNormals ++;

      }

     } else {

      var normal = face.normal.clone();
      normal.applyMatrix3( normalMatrixWorld );

      for ( var j = 0; j < 3; j ++ ) {

       output += ''vn '' + normal.x + '' '' + normal.y + '' '' + normal.z + ''/n'';

       nbNormals ++;

      }

     }

    }
              
   // material
              
   if (material.name !== '''')
    output += ''usemtl '' + material.name + ''/n'';
   else
    output += ''usemtl material'' + material.id + ''/n'';
              
   materials[material.id] = material;

    // faces


    for ( var i = 0, j = 1, l = faces.length; i < l; i ++, j += 3 ) {

     var face = faces[ i ];

     output += ''f '';
     output += ( indexVertex + face.a + 1 ) + ''/'' + ( hasVertexUvs ? ( indexVertexUvs + j     ) : '''' ) + ''/'' + ( indexNormals + j     ) + '' '';
     output += ( indexVertex + face.b + 1 ) + ''/'' + ( hasVertexUvs ? ( indexVertexUvs + j + 1 ) : '''' ) + ''/'' + ( indexNormals + j + 1 ) + '' '';
     output += ( indexVertex + face.c + 1 ) + ''/'' + ( hasVertexUvs ? ( indexVertexUvs + j + 2 ) : '''' ) + ''/'' + ( indexNormals + j + 2 ) + ''/n'';

    }

   } else {

    console.warn( ''THREE.OBJExporter.parseMesh(): geometry type unsupported'', mesh );
    // TODO: Support only BufferGeometry and use use setFromObject()

   }

   // update index
   indexVertex += nbVertex;
   indexVertexUvs += nbVertexUvs;
   indexNormals += nbNormals;

  };

  object.traverse( function ( child ) {

   if ( child instanceof THREE.Mesh ) parseMesh( child );

  } );
        
 // mtl output
      
 var mtlOutput = '''';
      
 for (var key in materials) {
        
  var mat = materials[key];
          
  if (mat.name !== '''')
   mtlOutput += ''newmtl '' + mat.name + ''/n'';
  else
   mtlOutput += ''newmtl material'' + mat.id + ''/n'';
          
  mtlOutput += ''Ns 10.0000/n'';
  mtlOutput += ''Ni 1.5000/n'';
  mtlOutput += ''d 1.0000/n'';
  mtlOutput += ''Tr 0.0000/n'';
  mtlOutput += ''Tf 1.0000 1.0000 1.0000/n'';
  mtlOutput += ''illum 2/n'';
  mtlOutput += ''Ka '' + mat.color.r + '' '' + mat.color.g + '' '' + mat.color.b + '' '' + ''/n'';
  mtlOutput += ''Kd '' + mat.color.r + '' '' + mat.color.g + '' '' + mat.color.b + '' '' + ''/n'';
  mtlOutput += ''Ks 0.0000 0.0000 0.0000/n'';
  mtlOutput += ''Ke 0.0000 0.0000 0.0000/n'';
          
  if (mat.map && mat.map instanceof THREE.Texture) {
          
   var file = mat.map.image.currentSrc.slice( mat.map.image.currentSrc.slice.lastIndexOf("/"), mat.map.image.currentSrc.length - 1 );
            
   mtlOutput += ''map_Ka '' + file + ''/n'';
   mtlOutput += ''map_Kd '' + file + ''/n'';
            
  }
          
 }

 return {
  obj: output,
  mtl: mtlOutput
 }

 }

};