• 在three.js中引入obj模型
  • 雪峰 发表于 2016年7月9日 标签:
  • three.js是一个基于webgl接口的3d图形插件,可以说功能十分强大,一般的3d模型,甚至3d模型都不在话下,我还亲眼看到一个大神做出canvas 3d视频来(虽说用得不是three.js,但也是基于webgl,都是互通的)。所以,只要你想,只要你想的到,没有什么做不出的炫酷的3d效果。

    而且,three.js还可以引入一些常见的3d模型文件的格式,比如*.obj格式的,所以可以直接从3dsmax做出的模型图像直接进行加载渲染,只需要引入一些相关的loader库就可以了,十分方便。但由于three.js版本更新快,文档匮乏,所以需要时刻关注变化,因为有些函数的用法可能发生本质的改变。就obj文件的引入来说,我在webgl中文网里的教程看到的版本号为73,而另外一本three.js教程书上使用的为59,目前最新版本为79,所以按照上面的例子写的代码多少会有些不适用。

    加载obj文件需要另外引入three.js提供的OBJLoader.js,可以到three.js的官方github上找到(https://github.com/mrdoob/three.js/raw/master/examples/js/loaders/OBJLoader.js),如果需要加载相应材质文件*.mtl的话,就得再加载一个文件MTLLoader.js即可(https://github.com/mrdoob/three.js/raw/master/examples/js/loaders/MTLLoader.js)。正确的使用方法是看到了这篇博客才知道的——three.js学习笔记 obj模型加载问题 。

    
    var MTloader = new THREE.MTLLoader();
    MTloader.setTexturePath("/test/three.js/");//设置正确url路径。绝对路径
    MTloader.load("first.mtl" , function(m){//引入mtl材质
    m.preload();
    loader = new THREE.OBJLoader();
    loader.setPath("/test/three.js/");
    loader.load("first.obj" , function(obj){//加载obj模型文件
    mesh = obj;
    scene.add(mesh);
    renderer.render(scene , camera);//加载成功后继续渲染,否则为一片黑色
    //anime();
    });
    });
    
    

    由于JavaScript为异步加载的,因此并不会等待obj模型加载完才进行渲染,因此渲染时scene里并没有mesh,所以呈现一片黑色,应该要在load方法的回调函数中进行渲染。

     

    发表评论