加載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模型例子】，整個例子的效果：

---

持續更新

總結

以上是生活随笔為你收集整理的threejs加载3D模型例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。