WebGL 3D模型导出

WebGL 要用到的模型在 3D 建模软件中建立好了，那么这些 3D 的模型，动画要如何导出供 three.js 引擎调用呢？

Three.js 支持多种格式的 3D 文件，比如Collada (.dae)文件，比如 three.js JSON 格式的文件。SketchUp、CINEMA 4D 这些软件原生支持将模型文件导出为 Collada 格式的文件，3ds Max、Maya 可以安装 OpenCOLLADA 的插件(https://github.com/KhronosGroup/OpenCOLLADA/wiki/OpenCOLLADA-Tools) 让自己支持导出 Collada 文件；也可以使用第三方提供的可以将模型文件转换为Three.js JSON 格式的工具 (https://github.com/zfedoran/convert-to-threejs-json) ，它支持Fbx (.fbx)、Collada (.dae)、Wavefront/Alias (.obj)、3D Studio Max (.3ds) 这些格式，但是目前它还有一些缺陷，比如不支持动画(animation)，仅仅只支持 Lambert 和 Phong 这两种材质(material)，以及一些小小的bug，所以不是特别推荐。Three.js 官方还提供了 Blender、3ds Max 和 Maya 导出插件，这些插件中针对 Blender 的插件是最完善的，比如 3ds Max、Maya 是不可以导出动画的，而 Blender 的插件是可以导出的，所以这里先以 Windows 平台下的 Blender 为例来看看如何将 3D 模型导出供 three.js 使用。

我们先下载 three.js 的 Blender 导入导出插件 (https://github.com/mrdoob/three.js/tree/master/utils/exporters/blender)，官方的 Markdown 文件描述应该将插件复制到 %AppData%\Blender Foundation\Blender\2.6X 目录下，但如果在该目录下找不到 script 文件夹，那就将文件复制到 %Program Files%\Blender Foundation\Blender\2.6X 目录下。

接着我们点击 Blender 菜单栏上的“文件 (File) ”选择“用户设置 (User Preferences) ”，

在打开的“Blender 用户设置面板 (Blender User Preferences) ”中选择“插件 (Addons)”那项，再在“类别 (Categories) ”分类中选中“导入 – 导出 (Import-Export)”项，在里面找到“Import-Export: three.js format”这一行并勾上，最后点击“保存用户设置 (Save User Settings)”就完成了 three.js 插件的安装。

在模型全部制作完成之后在菜单栏上点击“文件 (File) ”找到“导出 (Export)”选择“Three.js (.js)”，这个时候界面变为了导出界面，在页面的左下角的“Export Three.js”分类中显示了要导出的元素，这个时候只要按照自己的需要选择对应的选项即可。

我们在页面中我们先创建场景，如同 3D 软件中一样设置好摄像机等信息之后就可以load出模型了。

见以下代码：

var scene = new THREE.Scene(),

    camera = new THREE.PerspectiveCamera(45, winWidth / winHeight, 500, 100000),

    loader = new THREE.JSONLoader(),

    renderer;

loader.load("model.js", function (geometry, materials) {

    var ground = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));

    ground.castShadow = true;

    ground.receiveShadow = true;

    scene.add(ground);

});