THREE.js – 梦溪笔记

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 的说明与解析，希望能对你有所帮助。

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

标签： THREE.js

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