Three.js加载.obj和.mtl文件(无法加载材质、路径错误问题)
加载.obj模型文件
本文是Three.js电子书的14.3节
使用三维软件导出.obj
模型文件的时候,会同时导出一个材质文件.mtl
, .obj
和.stl
文件包含的信息一样都是几何体顶点相关数据,材质文件.mtl
包含的是模型的材质信息,比如颜色、贴图路径等。
加载.obj
三维模型的时候,可以只加载.obj
文件,然后借助three.js引擎自定义材质Material,也可以同时加载.obj
和.mtl
文件。
只加载obj文件
只加载obj文件,引入路径three.js-master/examples/js/loaders/OBJLoader.js
下的OBJLoader.js
文件即可
<!-- 引入obj模型加载库OBJLoader.js -->
<script src="../../three.js-master/examples/js/loaders/OBJLoader.js"></script>
文件加载
/*** OBJ文件加载 只加载obj文件中的几何信息,不加载材质文件.mtl*/
var loader = new THREE.OBJLoader();
// 没有材质文件,系统自动设置Phong网格材质
loader.load('./立方体/box.obj',function (obj) {// 控制台查看返回结构:包含一个网格模型Mesh的组Groupconsole.log(obj);// 查看加载器生成的材质对象:MeshPhongMaterialconsole.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);//设置材质颜色
同时加载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>
/*** OBJ和材质文件mtl加载*/
var OBJLoader = new THREE.OBJLoader();//obj加载器
var MTLLoader = new THREE.MTLLoader();//材质文件加载器
MTLLoader.load('./立方体/box.mtl', function(materials) {// 返回一个包含材质的对象MaterialCreatorconsole.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);//返回的组对象插入场景中})
})
obj包含多个网格模型
obj文件可以包含多个网格模型对象,不一定就是一个,这些网格模型对象全部是并列关系,无法通过父子关系构建一个树结构层级模型。
// 没有材质文件,系统自动设置Phong网格材质
OBJLoader.load('./多个模型/model.obj',function (obj) {// 控制台查看返回结构:包含一个网格模型Mesh的组Groupconsole.log(obj);scene.add(obj);// 加载后的一些编辑操作obj.scale.set(20,20,20);//网格模型缩放// 设置其中一个网格模型的颜色obj.children[0].material.color.set(0xff0000);
})
模型纹理贴图
obj模型的mtl文件可能包含纹理贴图,也可能不包含,这主要看3D美术是否设置。
一个包含纹理贴图路径的.mtl
文件,如果路径有问题,可能会无法加载,可以仿照该案例修改。
// 一个包含纹理贴图路径的.mtl文件
newmtl material_1Ns 32d 1Tr 0Tf 1 1 1illum 2Ka 0.5880 0.5880 0.5880Kd 0.9880 0.9880 0.9880Ks 0.1200 0.1200 0.1200map_Kd ./贴图/Earth.pngmap_ks ./贴图/EarthSpec.pngnorm ./贴图/EarthNormal.png
mtl和threejs贴图对应关系
mtl贴图 | Threejs贴图 |
---|---|
map_kd | map |
map_ks | specularMap |
map_bump/bump | bumpMap |
/*** OBJ和材质文件mtl加载*/
var OBJLoader = new THREE.OBJLoader(); //obj加载器
var MTLLoader = new THREE.MTLLoader(); //材质文件加载器
MTLLoader.load('./贴图/material.mtl', function(materials) {// 返回一个包含材质的对象MaterialCreatorconsole.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);})
})
导出.obj
和.mtl
的名称、路径问题
3dmax导出的obj和mtl模型文件有时候需要修改一下个别位置字符,比如.obj
中.mtl
文件的名称可能是乱码mtllib �����.mtl
,.mtl
文件中贴图的路径要设置正确,比如导出的是绝对路径还是相对路径,可以打开看下。
.obj
文件不包含信息
.obj
文件不包含场景的相机Camera、光源Light等信息,不能导出骨骼动画、变形动画,如果希望导出光照信息、相机信息、骨骼动画信息、变形动画信息,可以选择.fbx
、.gltf
等格式。
Three.js加载.obj和.mtl文件(无法加载材质、路径错误问题)相关推荐
- threejs加载服务器文件,如何使用Three.js加载obj和mtl文件
OBJ和MTL是3D模型的几何模型文件和材料文件. 在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃. 现在要加载OBJ和MTL文件,需要结合OBJLoader和MTL ...
- HTML版的使用three.js加载obj和mtl文件并上贴图
目录 效果图 全部代码 另: [Vue版的](https://blog.csdn.net/weixin_44601948/article/details/108502580) 效果图 全部代码 < ...
- vue使用three.js加载obj和mtl
①构建三维坐标,代码如下 <!-- --> <template><div id="container"></div> </te ...
- VR 效果 前端使用 three.js 加载 Obj,drc文件(三维模型文件)
VR 效果 前端使用 three.js 加载 Obj(三维模型文件) 前言:我对 three.js 并不熟!只是朋友有这个需求,写了几个 demo 运行,能看~.如果想深入学习,还需要多看看官方文档, ...
- html5.js百度网盘,HTML5 Canvas+js仿百度网盘扫描文件过程加载动画
HTML5 Canvas+js仿百度网盘扫描文件过程加载动画 这是一款简单的HTML5 Canvas+js仿百度网盘扫描文件过程加载动画效果,网盘文件扫描百分比加载动画特效. var w=docume ...
- uni-app IOS的threeJS本地obj、mtl文件的读取
uni-app IOS的threeJS本地obj.mtl文件的读取 最近有个项目获取的是基于3D模型的obj文件与材质mtl文件的获取进行渲染控制,使用的混合开发框架是uniapp,其中遇到的问题是I ...
- 【VSCode】当前工作目录非当前文件夹/pathlib打印cwd路径错误
问题 [VSCODE]当前工作目录非当前文件夹/pathlib打印cwd路径错误 方法 修改.vscode/launch.json文件,文件末尾增加cwd一行,如下: {// 使用 IntelliSe ...
- ifc文件转换成obj和mtl文件
ifcopenshell官网:http://www.ifcopenshell.org/ 点击ifcConvert 下载对应版本(我下载的是windows 64位) 将ifc文件拖动到IfcConver ...
- three.js加载obj模型和材质
1.Vue中安装three.js和加载用的包 安装three.js使用npm install three --save 安装加载obj和mtl文件的包npm install three-obj-mtl ...
最新文章
- SQL SERVER 分区表的总结--一些疑问的总结
- 数据结构:最大子序列和
- hive数据仓库建设
- java中怎么表示数组中的某个值_简易Java(12):如何高效检查一个数组中是否包含某个值?...
- 其他技术(Path)
- python综合管理系统_Python-20 (信息系统-框架/循环/增删/综合应用)
- 深度学习之权重初始化
- SharePoint 2010 获取列表全部定义方法
- SSD容量也不宜小,最好1T往上
- 【feign源码】流程分析
- 全景图拍摄设备有哪些?全景图拍摄方法
- matlab太阳系行星,Matlab动画模拟太阳系行星运动.doc
- win10计算机系统慢,解决Win10电脑变慢的一些方法
- 重启linux系统后 启动mysql ERROR! The server quit without updating PID file /var/run/mysqld/mysqld.pid
- 9款别出心裁的jQuery插件
- 项目3抽象类与纯虚函数
- 传统营销与网络营销的整合
- GraphQL标准的Java实现graphql-java概述
- FaceBook中国程序员之死,38岁跳楼轻生,压力让他生不如死!
- 【深度学习】语义分割:论文阅读:(2021-12)Mask2Former