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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐base.js
Dec 23 Javascript
JQuery 简便实现页面元素数据验证功能
Mar 24 Javascript
jQuery 位置插件
Dec 25 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
javascript中scrollTop详解
Apr 13 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
Aug 17 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
Vue.js标签页组件使用方法详解
Oct 19 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
基于mysql的论坛(6)
2006/10/09 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
Python定时执行之Timer用法示例
2015/05/27 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
python基础教程之while循环
2019/08/14 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
大四学生毕业自荐信
2013/11/07 职场文书
绩效专员岗位职责
2013/12/02 职场文书
会议邀请书范文
2014/02/02 职场文书
学习十八大报告感言
2014/02/28 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
2019银行竞聘书
2019/06/21 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang