threejs加載3D模型例子

加載3D模型

首先要引入ColladaLoader加載器，Collada是一個3D模型交換方案，即不同的3D模型可以通過Collada進行相互轉換，言外之意，threejs可以使用Collada將3D模型的數據轉換成自己支持的格式，從而在瀏覽器上渲染出來。引入ColladaLoader如下：

<script src="http://threejs.outsidelook.cn/r89/source/examples/js/loaders/ColladaLoader.js"></script>

然後使用ColladaLoader的Load方法加載模型，然後使用onLoad回調函數在模型加載完成之後將模型添加到場景中。onLoad函數會接受到一個包含了所加載的資源的對象，這個對象的結構如下：

對於這個對象中具體包含了哪些東西，暫時不用全部弄明白。但是我們看到了上面有一個scene，在threejs中，scene是場景，是包含所有可視部件的容器，我們要做的就是（1）從這個scene中找出我們需要操控的模型對象，保存起來（2）將模型的場景添加到程序的場景中去。

下面是整個加載模型的函數：

function load3DModel(){
   /
     1、collada是一種基於XML的3D模型交互方案，簡單來說，就是一種3D模型可以通過collada轉換成另一種3D模型，
     從而，各種3D模型都可以通過collada轉換成web支持的3D模型。
     2、。dae是一個鐘3D模型的格式
     3、加載時注意瀏覽器同源策略的限制
    /
   var loader = new THREE.ColladaLoader();
   loader.load( "./model/avatar.dae", function ( collada ) {
      //找到模型中需要的對象。將相機看向這個對象是爲了讓這個對象顯示在屏幕中心
      collada.scene.traverse( function ( child ) {
         if ( child instanceof THREE.SkinnedMesh ) {
            modelObj = child;
            camera.lookAt( child.position );
         }
      } );
      //將模型的場景加入到整體的場景
       modelObj.material.opacity = 0.8;
      scene.add( collada.scene );

      //顯示出模型的骨骼的代碼,不需要可刪去
      var helper = new THREE.SkeletonHelper( modelObj );
      helper.material.linewidth = 3;
      scene.add( helper );
   } );
}

需要注意的是，加載是異步的，所以，要使用render循環來渲染，可參考下面的例子。

整個例子請看：【加載3D模型例子】，整個例子的效果：

---

持續更新