当前位置:   article > 正文

Three.js加载.obj模型文件_threejs obj

threejs obj

Three.js加载.obj模型文件

使用三维软件导出.obj模型文件的时候,会同时导出一个材质文件.mtl, .obj和.stl文件包含的数据一样都是几何体对象的顶点位置、顶点法向量等顶点相关数据, 材质文件.mtl包含的是RGB颜色值等材质信息。

加载.obj三维模型的时候,可以只加载.obj文件,然后借助three.js引擎自定义材质对象Material,也可以同时加载obj和mtl文件。

obj文件不包含场景的相机、光照信息,不能导出骨骼动画、变形动画,如果希望导出光照信息、相机信息、骨骼动画信息、变形动画信息,可以选择fbx、gltf等格式。

个人WebGL/Three.js技术博客

只加载obj文件

obj文件包含了模型的几何体信息

<!-- 引入obj模型加载库OBJLoader.js -->
<script src="../../three.js-master/examples/js/loaders/OBJLoader.js"></script>
  • 1
  • 2
/**
 * OBJ文件加载  只加载obj文件中的几何信息,不加载材质文件.mtl
 */
var loader = new THREE.OBJLoader();
// 没有材质文件,系统自动设置Phong网格材质
loader.load('./立方体/box.obj',function (obj) {
  // 控制台查看返回结构:包含一个网格模型Mesh的组Group
  console.log(obj);
  // 查看加载器生成的材质对象:MeshPhongMaterial
  console.log(obj.children[0].material);
  scene.add(obj);
  // 加载后的一些编辑操作
  obj.children[0].scale.set(20,20,20);//网格模型缩放
  obj.children[0].geometry.center();//网格模型的几何体居中
  obj.children[0].material.color.set(0xff0000);//设置材质颜色
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

同时加载obj文件和mtl文件

mtl文件包含了模型的材质信息,比如模型颜色、透明度等信息,还有纹理贴图的路径,比如颜色贴图、法线贴图、高光贴图等等。

<!-- 引入obj模型加载库OBJLoader.js -->
<script src="../../three.js-master/examples/js/loaders/OBJLoader.js"></script>
<!-- 引入obj模型材质加载库MTLLoader.js -->
<script src="../../three.js-master/examples/js/loaders/MTLLoader.js"></script>

  • 1
  • 2
  • 3
  • 4
  • 5
/**
 * OBJ和材质文件mtl加载
 */
var OBJLoader = new THREE.OBJLoader();//obj加载器
var MTLLoader = new THREE.MTLLoader();//材质文件加载器
MTLLoader.load('./立方体/box.mtl', function(materials) {
  // 返回一个包含材质的对象MaterialCreator
  console.log(materials);
  //obj的模型会和MaterialCreator包含的材质对应起来
  OBJLoader.setMaterials(materials);
  OBJLoader.load('./立方体/box.obj', function(obj) {
    console.log(obj);
    obj.scale.set(10, 10, 10); //放大obj组对象
    scene.add(obj);//返回的组对象插入场景中
  })
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

obj包含多个网格模型

obj文件可以包含多个网格模型对象,不一定就是一个,这些网格模型对象全部是并列关系,无法通过父子关系构建一个树结构层级模型。


// 没有材质文件,系统自动设置Phong网格材质
OBJLoader.load('./多个模型/model.obj',function (obj) {
  // 控制台查看返回结构:包含一个网格模型Mesh的组Group
  console.log(obj);
  scene.add(obj);
  // 加载后的一些编辑操作
  obj.scale.set(20,20,20);//网格模型缩放
  // 设置其中一个网格模型的颜色
  obj.children[0].material.color.set(0xff0000);
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

模型纹理贴图

obj模型的mtl文件可能包含纹理贴图,也可能不包含,这主要看3D美术是否设置。

一个包含纹理贴图路径的.mtl文件

// 一个包含纹理贴图路径的.mtl文件
newmtl material_1
	Ns 32
	d 1
	Tr 0
	Tf 1 1 1
	illum 2
	Ka 0.5880 0.5880 0.5880
	Kd 0.9880 0.9880 0.9880
	Ks 0.1200 0.1200 0.1200
	map_Kd ./贴图/Earth.png
  map_ks ./贴图/EarthSpec.png
	norm ./贴图/EarthNormal.png
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
/**
 * OBJ和材质文件mtl加载
 */
var OBJLoader = new THREE.OBJLoader(); //obj加载器
var MTLLoader = new THREE.MTLLoader(); //材质文件加载器
MTLLoader.load('./贴图/material.mtl', function(materials) {
  // 返回一个包含材质的对象MaterialCreator
  console.log(materials);
  //obj的模型会和MaterialCreator包含的材质对应起来
  OBJLoader.setMaterials(materials);
  OBJLoader.load('./贴图/model.obj', function(obj) {
    console.log(obj);
    scene.add(obj); //返回的组对象插入场景中
    // 加载后操作
    obj.children[0].scale.set(2, 2, 2); //缩放球体网格模型
    // 通过调节参数,地球表面的凹凸感更强
    obj.children[0].material.normalScale.set(3, 3);
  })
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

导出obj

3dmax导出的obj和mtl模型文件有时候需要修改一下个别位置字符,比如obj中mtl文件名称可能是乱码mtllib �����.mtl,mtl文件中贴图的路径要设置正确,比如导出的是绝对路径还是相对路径,可以打开看下。

关于obj模型文件加载的视频讲解和obj模型文件可以参考个人WebGL/Three.js技术博客发布的Threejs课程第14章第3小节。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/95945
推荐阅读
相关标签
  

闽ICP备14008679号