基于THREE JS的 JSON 模型格式 理解

THREE.js 是一个开源的基于WebGL的渲染引擎,提供了很多方便有用的类与方法,为我们使用WebGL提供了大大的便利,简化了我们的学习成本,让你只要专注于项目本身,而不会花太多时间留在WebGL的技术实现细节。当你在处理3D网络应用或项目时,你就会遇到一个问题,选择一个适合的模型格式就会摆在你的案头。obj, 3ds, dae还是其他什么呢?对于那些以二进制进行数据保存的格式而已,网络加载是一个问题,js处理二进制也是一个问题, 所以,如果有一个可以完美支持JS特性的格式,那真是令人高兴的事情,JSON Model Format 就是这样一种模式格式。

JSON Model Format 的基本格式如下:

{
	"metadata": { "formatVersion" : 3 },	

	"materials": [ {
		"DbgColor" : 15658734, // => 0xeeeeee
		"DbgIndex" : 0,
		"DbgName" : "dummy",
		"colorDiffuse" : [ 1, 0, 0 ],
	} ],

	"vertices": [ 0,0,0, 0,0,1, 1,0,1, 1,0,0, ... ],
	"normals":  [ 0,1,0, ... ],
	"colors":   [ 1,0,0, 0,1,0, 0,0,1, 1,1,0, ... ],
	"uvs":      [ [ 0,0, 0,1, 1,0, 1,1 ], ... ],

	"faces": 	[43, 0, 4, 5, 1, 0, 0, 1, 2, 3, 0, 1, 2, 3]
}

其中Metadata 中包含formatVersion 用于指示当前文件所用的格式版本号,这将决定于解析器如何解析下面的文件内容。

接下来另一个重要的域是Materials, 指定该模型所用到的素材,一个模型可能用到多个素材,所以,Materials是一个数组,每一项都是material对象。每个Material对象都包括DbgIndex 指示该Material的索引,DbgName显示Matrial的名字。

接下来的一个域是vertices, 也就是顶点了,顶点以三个数为一组,每三个数组成一个顶点坐标,x, y, z. Normals用于保存法线坐标,跟顶点一样,每三个数组成一个法线向量。 Colors是顶点颜色, THREE.js 允许给每个顶点指定颜色。 uvs是贴图坐标,faces是模型的面了,我们都知道模型是由三角面、四角面或多边形面组成的, faces就是用来保存这个面的信息。

一个面可以包括多个信息,比如说,他是三角面还是四边形面或是其他?每个顶点是不是有颜色?是不是只有一个面法线还是有面顶点法线?要区分并保存这些信息,faces是如何做的吗?其他他的格式是这样的,基本上可以看做是流式。以一个标志为开头,后面跟一系列的数据说明。例如:

[ 43, 0, 4, 5, 1, 0, 0, 1, 2, 3, 0, 1, 2, 3 ]

第一个数, 43 就是这个标志. 把这个标志表示成二进制,它的每个二进制位都代表着不同的意思。43 表示成二进制如下:

00 10 10 11

43 表示成一个字节,8个二进制位,每个位都有特定含意,如果这个位为1(置位),表示这个位在后续的数据流中有表示,如果为0,则说明后续的数据流中没有该位所代表的特定含意的数据表示。那么这8个位都表示什么意思呢?

二进制位

含意

0

面的类型。如果为0,表示三角面,为1表示四边形面

1

指示该面是否有素材,0表示没有,1表示有

2

指示该面是否有贴图坐标,0表示没有,1表示有

3

指示该面是否有顶点贴图坐标,0表示没有,1表示有

4

指示该面是否有面法线,0表示没有,1表示有

5

指示该面是否有顶点法线,0表示没有,1表示有

6

指示是否为面指定了颜色,0表示没有,1表示有

7

指示是否有顶点颜色,0表示没有,1表示有

 

后面的数据是按照从小大到的顺序排列的。 例如如果标志为43的话,表示 四边形面,有素材,有顶点贴图坐标,有顶点法线。所以,43后面跟着的四位数:0, 4, 5, 1 就是对应顶点的索引。 那么接下来的 0 就表示当前面的素材索引为 0, 然后接下来的 0, 1, 2, 3, 表示顶点贴图坐标的索引,最后的0, 1, 2, 3 则是顶点法线的索引。.

以上说的是大部分模型都会有的数据。有些特殊的模型还会有别的域,比如说

 "morphTargets" : [{ "name": "animation_000000", "vertices": [ ... ] }, ... { "name": "animation_000000", "vertices": [ ... ]}],
 "bones" : [],
 "skinIndices" : [],
 "skinWeights" : [],
 "animation" : {}

morphTargets存在表示模型存在变形动画,后面跟着的都是每帧的顶点数据。 bones用于保存骨骼信息,animation用于保存动画信息。

以上是基本的对JSON Model Format 的说明与解析,希望能对你有所帮助。

本文为原创,如果你想转载,请注明“梦溪笔记”出品!

3D-Book