如何使用Three.js加载obj和mtl文件
OBJ和MTL是3D模型的几何模型文件和材料文件。
在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃。
现在要加载OBJ和MTL文件,需要结合OBJLoader和MTLLoader两个类来实现,这也提供了操作的灵活性。
下述代码中首先使用MTLLoader加载egg.mtl材料文件,然后把该材料设置给一个OBJLoader对象,以便在加载obj模型的时候进行应用。
onProgress是加载过程回调函数,onError是错误处理函数。
// model
var onProgress = function(xhr) {
if (xhr.lengthComputable) {
var percentComplete = xhr.loaded / xhr.total * ;
console.log(Math.round(percentComplete, ) + '% downloaded');
}
}; var onError = function(xhr) {}; THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader()); var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('/uploads/160601/obj/');
mtlLoader.load('egg.mtl', function(materials) { materials.preload(); var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('/uploads/160601/obj/');
objLoader.load('egg.obj', function(object) { object.position.y = -0.5;
scene.add(object); }, onProgress, onError); });
完整代码:https://wow.techbrood.com/fiddle/27158
如何使用Three.js加载obj和mtl文件的更多相关文章
- js便签笔记(8)——js加载XML字符串或文件
1. 加载XML文件 方法1:ajax方式.代码如下: var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObje ...
- three.js加载obj模型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- THREE.JS + Blender(obj、mtl加载代码)
2016-11-04 09:23:17 THREE.REVISION "81dev" Blender "2.78" 1.加载OBJ.MTL文件 // T ...
- 使用three.js加载3dmax资源,以及实现场景中的阴影效果
使用three.js可以方便的让我们在网页中做出各种不同的3D效果.如果希望2D绘图内容,建议使用canvas来进行.但很多小伙伴不清楚到底如何为我们绘制和导入的图形添加阴影效果,更是不清楚到底如何导 ...
- hreeJS加载Obj资源后如何实现内存释放?
问题: 我利用ThreeJS做了一个在同一个场景下动态加载Obj的页面,具体功能是:点击按钮A:加载A模型,点击按钮B:加载B模型...现在的问题是,前面已经加载过的模型,无法实现释放,内存一直在累加 ...
- 优化JS加载时间过长的一种思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...
- JS 加载html 在IE7 IE8下 可调试
实际背景 就是都是HTML 公共头部底部 然后中间部分加载不同的HTML文件 有点跟模板引擎一样 jQuery 有个load函数 加载html文件的路径 获取html内容 到中间部分 正常下是不能用 ...
- 解决JS加载速度慢
在网页中的js文件引用会很多,js引用通常为 <script src="xxxx.js"></script> 通过如下方法可以增加js加载速度 <sc ...
- FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据
前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...
随机推荐
- angular自启动过程
angularJS的源代码整体上来说是一个自执行函数,在angularJS加载完成后,就会自动执行了. 即,在window上暴露一个唯一的全局对象angular, 如果window.angular已经 ...
- Python+Selenium+Unittest编写超链接点击测试用例
测试功能:博客园首页网站分类的一级菜单链接和二级菜单链接的点击. 遇到的问题: 1.循环点击二级菜单时,点击了一个一级菜单下的第一个二级菜单后,页面会刷新,再定位同一个一级菜单次下的第二个二级菜单时, ...
- hdu1213 并查集板子
题目链接:http://icpc.njust.edu.cn/Problem/Hdu/1213/ 并查集是一种支持合并与查找的数据结构,在森林中进行操作,加上路径压缩,合并和查找的时间复杂度几乎都是常数 ...
- BookStore示例项目---菜单栏UI分析
部署 参照 ABP示例项目BookStore搭建部署 项目解构 1).动态脚本代理 启动项目时,默认会调用两个接口 /Abp/ApplicationConfigurationScript /Abp/S ...
- Selenium系列(七) - 切换iframe
如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...
- python-神奇的下划线
2019-12-16 22:45:29 python中下划线有各种各样的作用,本章就来分别介绍一下各种下划线的功能. 一.开头单下划线 _VAR 开头单下划线还是挺常用的,在类中表示为保护变量/保护函 ...
- GBDT梯度提升树算法及官方案例
梯度提升树是一种决策树的集成算法.它通过反复迭代训练决策树来最小化损失函数.决策树类似,梯度提升树具有可处理类别特征.易扩展到多分类问题.不需特征缩放等性质.Spark.ml通过使用现有decisio ...
- tf.contrib.legacy_seq2seq.basic_rnn_seq2seq 函数 example 最简单实现
tf.contrib.legacy_seq2seq.basic_rnn_seq2seq 函数 example 最简单实现 函数文档:https://www.tensorflow.org/api_doc ...
- 加密解密 Python
常见加密方式和Python实现 1. 前言 我们所说的加密方式,都是对二进制编码的格式进行加密的,对应到Python中,则是我们的Bytes. 所以当我们在Python中进行加密操作的时候,要确保我们 ...
- [vijos1162]波浪数
题目链接:https://www.vijos.org/p/1162 这题的解法我觉得可能是模拟吧,但是题的分类又是构造QAQ..... 不是很懂,所以我们把这个方法叫做奇技淫巧吧 这题的暴力思路就是针 ...