WebGL 入门-模型导出

转载 2015年07月11日 02:58:25

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

});


Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Cesium中导入三维模型方法(dae到glft/bgltf)

Cesium中目前支持gltf和bgltf两种格式。“gltf是khronos组织(起草OpenGL标准的那家)定义的一种交换格式,用于互联网或移动设备上展现3d内容,充分支持opengl,webgl...

webgl开源三维引擎的选择

webgl发展的很快,可谓日新月异,所以下面的这些引擎过一个月,半年可能就不是现在这样了,对应的连接地址以方便查看比较。 一。小场景的开源三维js引擎 1.babylonjs:http://www....

HTML5 WebGL Three.js 加载 3D模型文件

本文主要介绍一下如何使用Three.js框架加载本地的3D模型文件,有关于Three.js和WebGL的具体知识请参考http://www.khronos.org/webgl/ 在页面中,我们利用...

[WebGL入门]十六,绘制多个模型

这次操作的是模型坐标变换矩阵,介绍了重复利用VBO,视图和投影坐标变换矩阵,进行多个模型的绘制的方法。 绘制很多个简单的模型,图形的时候,像这次的做法一样,可以使处理变的简洁一些,避免写很多多余的代码...

[WebGL入门]十二,模型数据和顶点属性

顶点中的属性是由程序员来自由添加的,需要的VBO的个数就是添加的属性个数。 顶点属性的各个数据,使用纯粹的一维数组,当然,数组的元素个数要根据想要绘制的顶点个数来定义。 生成VBO的时候,首先要把缓存...

webgl 入门的简单小模型

onload = function () { var c = document.getElementById("canvas"); c.width = 500; c.heig...
  • cong_wa
  • cong_wa
  • 2016年09月01日 17:49
  • 174

[WebGL入门]二十,绘制立体模型(圆环体)

这次,并没有对WebGL相关的新技术进行说明,这一点运行一下demo就能知道了,果然,比起绘制简单的板状的多边形来说,像圆环体这样的立体模型绘制起来更有意思吧。 demo中使用的着色器和HTML跟以前...

WebGL入门指南源码

  • 2017年11月24日 10:43
  • 135KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WebGL 入门-模型导出
举报原因:
原因补充:

(最多只允许输入30个字)