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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
用javascript控制iframe滚动的代码
Apr 10 Javascript
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
简单的vuex 的使用案例笔记
Apr 13 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 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
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
SWFObject Flash js调用类
2008/07/08 Javascript
JS 控制非法字符的输入代码
2009/12/04 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
python通过线程实现定时器timer的方法
2015/03/16 Python
Python运用于数据分析的简单教程
2015/03/27 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
Python面向对象之Web静态服务器
2019/09/03 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
python logging模块的使用
2020/09/07 Python
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
国际贸易专业推荐信
2013/11/15 职场文书
英文演讲稿开场白
2014/08/25 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
python数字类型和占位符详情
2022/03/13 Python
Python之matplotlib绘制饼图
2022/04/13 Python
关于vue-router-link选择样式设置
2022/04/30 Vue.js