【问题标题】:THREE.js OBJMTLLoader - Request for simple example filesTHREE.js OBJMTLLoader - 请求简单的示例文件
【发布时间】:2015-12-28 12:01:25
【问题描述】:

正如previous question 中详述的那样,我已经学会了如何通过使用official example 中使用的相同对象和材料来使用 THREE.js OBJMTLLoader。

该示例使用(对我而言)复杂模型和 DDSLoader。

我想加载更简单的 OBJ+MTL 模型,并且一直在尝试使用从网上获得的几个免费模型。我已经成功地加载了 OBJ 文件(通过应用进一步的 THREE.js 代码,例如定义法线),但是从 MTL 文件加载材质纹理时出现问题。

这是我的代码的一个简单示例。

//...DolphinB
var posX = -3445; var posY = 750; var posZ = -100; 
var common_scale = 100;

var loader = new THREE.OBJMTLLoader();
loader.load(
   'TRI_VP_files/models/dolphin/DOLPHIN_B.obj', 
   'TRI_VP_files/models/dolphin/DOLPHIN_B.mtl', 
    function(object) 
    {
    object.position.set( posX, posY, posZ );
    scene222.add( object );
    object.scale.set(common_scale, common_scale, common_scale);
     } );

这是MTL代码

# Wavefront material library
# Tue Aug 03 07:47:56 1999
# Created with Viewpoint Interchange www.viewpoint.com

newmtl dl_body
  Ka 0 0 0
  Kd 0 0.8 0.9
  Ks 0 0 0
  illum 1
  map_Kd DOLPHIN2.JPG

我的问题

请有人指点我一些简单的 OBJ + MTL 文件,这些文件已知可以使用 OBJMTLLoader 加载。

【问题讨论】:

    标签: three.js .obj


    【解决方案1】:

    您可以使用以下由 Mohammad Alizadeh 创建的免费供私人使用的文件集 hand(干得好,谢谢 Mohammad)。

    它使用单个 .JPG 图像文件作为材质纹理的来源。

    它使用单一材料。

    这是 .MTL 文件的内容...

    # Blender MTL File: 'Hand.blend'
    # Material Count: 1    
    newmtl defaultMat
    Ns 96.078431
    Ka 0.000000 0.000000 0.000000
    Kd 0.640000 0.640000 0.640000
    Ks 0.500000 0.500000 0.500000
    Ni 1.000000
    d 1.000000
    illum 2
    map_Kd hand_mapNew.jpg
    

    您需要将 .OBJ 文件的前几行从...更改为...

    # Blender v2.74 (sub 0) OBJ File: 'Hand.blend'
    # www.blender.org
    mtllib Hand.mtl
    o ZBrushPolyMesh3D
    v 0.614360 0.281365 -0.675872
    v 0.684894 0.445729 -0.634615
    

    # Blender v2.74 (sub 0) OBJ File: 'Hand.blend'
    # www.blender.org
    ## mtllib Hand.mtl    <===== commented out
    usemtl defaultMat ##  <===== added usemtl command,note proper name of material
    ## o ZBrushPolyMesh3D <===== commented out
    v 0.614360 0.281365 -0.675872
    v 0.684894 0.445729 -0.634615
    

    请注意,许多免费的 3D 对象文件集使用 .TIF 图像文件。但是 .TIF 不能在浏览器(或 THREE.js)中显示。可以将它们转换为 .JPG 格式,但不会保留 UV 映射。

    另请注意,需要编辑一些免费的 3D 对象文件集,以便 .OBJ 文件中的材质名称与 .MTL 文件中给出的名称匹配。

    还请注意,一些 .OBJ 文件(如上面的手示例)需要编辑,以便由 usemtl 命令指示材料,例如:-

    usemtl defaultMat
    

    儿童处理

    对于 Hand 文件集,在 .OBJ 文件中有 顶点法线 (vn)。但由于某种原因,没有应用平滑。应用以下代码将产生平滑(并调整光泽度并为对象拾取设置 rootObject 引用):-

    object.traverse (  function (child)
    {
        if (child instanceof THREE.Mesh) 
        {           
            child.material.shininess = 10;//range 0.1 to 30 (default) to 1000 or more, applies to Phong materials.    
            //child.userData.rootObject = object; //... see West Langley answer at http://stackoverflow.com/questions/22228203/picking-object3d-loaded-via-objmtlloader
            //... used for object picking so that, for further operations, we can select picked child object or child's rootObject.
            child.rootObject = object; //... avoids infinite loop if cloning 3D objects.    
            child.geometry.computeFaceNormals(); 
            child.geometry.computeVertexNormals();   
            //child.geometry.normalsNeedUpdate = true; //... only required if object has already been rendered.
        }
    }; )
    

    免责声明

    这些技巧让我在这种特殊情况下工作得很好。我并不是说这是最好的做事方式。

    【讨论】:

    • 1. shininess 属性可以任意大——比如 1000。 2. 如果您尚未渲染对象,则不需要 normalsNeedUpdate = true。三.js r.72
    猜你喜欢
    • 1970-01-01
    • 2020-12-25
    • 1970-01-01
    • 2020-06-14
    • 1970-01-01
    • 2020-11-07
    • 2010-12-09
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多