实例讲解three.js加载obj模型

小云云
发布: 2017-12-22 11:30:04
原创
6103명이 탐색했습니다.

本文主要实例介绍three.js加载obj模型,three.js是一款webGL框架,由于其易用性被广泛应用。如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。好了,下面通过一段代码给大家介绍three.js加载obj模型,具体代码如下所示:



  
    
    
    
  
          
登录后复制

下面看下如何使用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 * 100;
    console.log(Math.round(percentComplete, 2) + '% 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);
});
登录后复制

相关推荐:

实例讲解Three.js加载外部模型

详解three.js本地运行的方法

JS库之Three.js基础入门

위 내용은 实例讲解three.js加载obj模型의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

相关标签:
来源:php.cn
본 웹사이트의 성명
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
더>
最新下载
더>
网站特效
网站源码
网站素材
프론트엔드 템플릿
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!