three.js加载obj模型的实例代码


Posted in Javascript onNovember 10, 2017

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

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="libs/three.js"></script>
    <script type="text/javascript" src="libs/OBJLoader.js"></script>
    <script type="text/javascript">
      var scene = null;
      var camera = null;
      var renderer = null;
      var mesh = null;
      var id = null;
      function init() {
        renderer = new THREE.WebGLRenderer({//渲染器
          canvas: document.getElementById('mainCanvas')//画布
        });
        renderer.setClearColor(0x000000);//画布颜色
        scene = new THREE.Scene();//创建场景
        camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);//正交投影照相机
        camera.position.set(15, 25, 25);//相机位置
        camera.lookAt(new THREE.Vector3(0, 2, 0));//lookAt()设置相机所看的位置
        scene.add(camera);//把相机添加到场景中
        var loader = new THREE.OBJLoader();//在init函数中,创建loader变量,用于导入模型
        loader.load('libs/port.obj', function(obj) {//第一个表示模型路径,第二个表示完成导入后的回调函数,一般我们需要在这个回调函数中将导入的模型添加到场景中
          obj.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
              child.material.side = THREE.DoubleSide;
            }
          });
          mesh = obj;//储存到全局变量中
          scene.add(obj);//将导入的模型添加到场景中
        });
        var light = new THREE.DirectionalLight(0xffffff);//光源颜色
        light.position.set(20, 10, 5);//光源位置
        scene.add(light);//光源添加到场景中
        id = setInterval(draw, 20);//每隔20s重绘一次
      }
      function draw() {//们在重绘函数中让茶壶旋转:
        renderer.render(scene, camera);//调用WebGLRenderer的render函数刷新场景
        mesh.rotation.y += 0.01;//添加动画
        if (mesh.rotation.y > Math.PI * 2) {
          mesh.rotation.y -= Math.PI * 2;
        }
      }
    </script>
  </head>
  <body onload="init()">
    <canvas id="mainCanvas" width="800px" height="600px" ></canvas>
  </body>
</html>

下面看下如何使用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加载obj模型的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
农历与西历对照
Sep 06 Javascript
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
js分页工具实例
Jan 28 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
javascript实现简单的进度条
Jul 02 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
理解JavaScript中的对象
Aug 25 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 Javascript
vue router-link传参以及参数的使用实例
Nov 10 #Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 #Javascript
js+html获取系统当前时间
Nov 10 #Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 #Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 #Javascript
JS+Canvas绘制动态时钟效果
Nov 10 #Javascript
javascript实现电脑和手机版样式切换
Nov 10 #Javascript
You might like
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
PHP session会话的安全性分析
2011/09/08 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
什么是唯一索引
2015/07/05 面试题
广州盈通面试题
2015/12/05 面试题
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
幼儿园庆六一游园活动方案
2014/01/29 职场文书
三万活动总结
2014/04/28 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
质量保证书格式模板
2015/02/27 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
新郎新娘致辞
2015/07/31 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript