THREE.js OBJMTLLoader - 请求简单的示例文件
THREE.js OBJMTLLoader - Request for simple example files
详见 I have learned how to use THREE.js OBJMTLLoader by using the same objects & materials used in the official example。
该示例使用(对我而言)复杂模型和 DDSLoader。
我想加载更简单的 OBJ+MTL 模型,并且一直在尝试使用从网络上获得的几个免费模型。我成功地加载了 OBJ 文件(通过进一步应用 THREE.js 代码,例如定义法线)但是从 MTL 文件加载 material 纹理时出现问题。
这是我的代码的一个简单示例。
//...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 正常加载。
您可以使用以下免费供私人使用的文件集 hand,由 Mohammad Alizadeh(干得好,谢谢 Mohammad)创建。
它使用单个 .JPG 图像文件作为 material 纹理的来源。
它使用单个 material。
这是 .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 文件中的 material 名称与 .MTL 文件中给定的名称匹配。
另请注意,需要编辑一些 .OBJ 文件(如上面的手示例),以便 material 由 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
//... 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.
}
}; )
免责声明
这些技巧在这个特定场景中对我有用。我并不是说这是最好的做事方式。
详见
该示例使用(对我而言)复杂模型和 DDSLoader。
我想加载更简单的 OBJ+MTL 模型,并且一直在尝试使用从网络上获得的几个免费模型。我成功地加载了 OBJ 文件(通过进一步应用 THREE.js 代码,例如定义法线)但是从 MTL 文件加载 material 纹理时出现问题。
这是我的代码的一个简单示例。
//...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 正常加载。
您可以使用以下免费供私人使用的文件集 hand,由 Mohammad Alizadeh(干得好,谢谢 Mohammad)创建。
它使用单个 .JPG 图像文件作为 material 纹理的来源。
它使用单个 material。
这是 .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 文件中的 material 名称与 .MTL 文件中给定的名称匹配。
另请注意,需要编辑一些 .OBJ 文件(如上面的手示例),以便 material 由 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
//... 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.
}
}; )
免责声明
这些技巧在这个特定场景中对我有用。我并不是说这是最好的做事方式。