WebGL 入门 – 模型导出
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) ”，http://static.cdn.pcbeta.com/data/attachment/album/201401/02/144646xa4aaxg9g6m9dx1q.png
在打开的“Blender 用户设置面板 (Blender User Preferences) ”中选择“插件 (Addons)”那项，再在“类别 (Categories) ”分类中选中“导入– 导出 (Import-Export)”项，在里面找到“Import-Export: three.js format”这一行并勾上，最后点击“保存用户设置 (Save User Settings)”就完成了 three.js 插件的安装。file:///C:\Users\慧\AppData\Local\Temp\msohtmlclip1\01\clip_image003.jpg http://static.cdn.pcbeta.com/data/attachment/album/201401/02/144646d1ozl1ognoodon1q.png在模型全部制作完成之后在菜单栏上点击“文件 (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, newTHREE.MeshFaceMaterial(materials)); ground.castShadow = true; ground.receiveShadow = true; scene.add(ground);});
页:
[1]