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 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
异步javascript的原理和实现技巧介绍
Nov 08 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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 文件类型判断代码
2009/03/13 PHP
PHP 编程安全性小结
2010/01/08 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
电大自我鉴定
2013/10/27 职场文书
平安工地建设方案
2014/05/06 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
群教个人对照检查材料
2014/08/20 职场文书
开发房地产协议书
2014/09/14 职场文书
立春观后感
2015/06/18 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
css3应用示例:新增的选择器
2022/03/16 HTML / CSS
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js