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 );} );
}