关闭

WebGL 入门-模型导出

1053人阅读 评论(0) 收藏 举报

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

});


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:426166次
    • 积分:4957
    • 等级:
    • 排名:第6050名
    • 原创:96篇
    • 转载:52篇
    • 译文:0篇
    • 评论:60条
    文章分类
    最新评论