WebGL 入门-模型导出

WebGL 入门-模型导出



WebGL模型导出.

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


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

});