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

 更新时间:2017年11月10日 10:39:05   投稿:mrr   我要评论
three.js是一款webGL框架,由于其易用性被广泛应用。接下来通过本文给大家分享three.js加载obj模型的实例代码,需要的朋友参考下吧

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 实现放大镜效果实例详解

    Javascript 实现放大镜效果实例详解

    这篇文章主要介绍了Javascript 实现放大镜效果实例详解的相关资料,这里附有实现实例代码,具有参考价值,需要的朋友可以参考下
    2016-12-12
  • 解决layui批量传值到后台操作时出现传值为空的问题

    解决layui批量传值到后台操作时出现传值为空的问题

    今天小编就为大家分享一篇解决layui批量传值到后台操作时出现传值为空的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • Js数组排序函数sort()介绍

    Js数组排序函数sort()介绍

    本文给大家简单探讨下Js数组排序函数sort()的用法和示例,有需要的小伙伴可以参考下。
    2015-06-06
  • js的with语句使用方法

    js的with语句使用方法

    js的with语句使用方法...
    2007-09-09
  • javascript 闭包详解

    javascript 闭包详解

    闭包:是指有权访问另外一个函数作用域中的变量的函数。创建闭包的常见方式就是在一个函数内部创建另外一个函数。在javascript中没有块级作用域,一般为了给某个函数申明一些只有该函数才能使用的局部变量时,我们就会用到闭包,我们来详细探讨下
    2015-07-07
  • 实用Javascript调试技巧分享(小结)

    实用Javascript调试技巧分享(小结)

    这篇文章主要介绍了实用Javascript调试技巧分享(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • 微信小程序自定义弹窗滚动与页面滚动冲突的解决方法

    微信小程序自定义弹窗滚动与页面滚动冲突的解决方法

    这篇文章主要为大家详细介绍了微信小程序自定义弹窗滚动与页面滚动冲突的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • js事件触发操作实例分析

    js事件触发操作实例分析

    这篇文章主要介绍了js事件触发操作,结合实例形式分析了javascript事件触发机制原理、使用方法及相关操作注意事项,需要的朋友可以参考下
    2019-06-06
  • webpack独立打包和缓存处理详解

    webpack独立打包和缓存处理详解

    这篇文章主要介绍了webpack独立打包和缓存处理的相关资料,文中介绍的非常详细,对大家学习webpack具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-04-04
  • 利用JS屏蔽页面中的Enter按键提交表单的方法

    利用JS屏蔽页面中的Enter按键提交表单的方法

    下面小编就为大家带来一篇利用JS屏蔽页面中的Enter按键提交表单的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11

最新评论