threejs： buffergeometry/gltf的模型导入及格式解析（json后缀）

Three.js JSON格式，它与obj功能类似，用于加载网格，全部数据记录在json形式的文档中，其中vertices处，是大量的数组。顶点数据，法向量。构成的面片信息。

同时threejs还定义了一种更为紧凑的二进制格式，它优化了网格的加载，是json格式的替代。这个二进制格式包含了两个文件，一个是小巧的JSON外壳，用于定义网格的高层属性（例如材质列表），一个是二进制文件（.bin）后缀，包含了顶点和面片的数据，那么此时的文件大小将是之前的一半不到，而且还优化了加载性能。

1.buffergeometry（threejs）

• 1 加载buffergeometry的json文件

loader = new THREE.BufferGeometryLoader();//此处应当是纯粹网格数据；
phong_material = new THREE.MeshPhongMaterial({color:0xff0000,specular:0x333333,shininess:0.9,side: THREE.DoubleSide,});
loader.load('test.json', function(geometry) {
				mesh = new THREE.Mesh(geometry, phong_material);
				mesh.castShadow = true;
				mesh.receiveShadow = true;
				Edges = new THREE.EdgesGeometry(geometry);
				line = new THREE.LineSegments( Edges, new THREE.LineBasicMaterial( { color: 0x000000 } ) );
				scene.add( line );
				scene.add(mesh);
			});
           

• 2 buffergeometry格式解析

  buffergeometry的标准如下：

https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4

这个是进行轮廓线非常重要的一环。（别人的正方体为什么没有连成一体，别人借用了segements，我觉得这个也是非常重要的一块。）

https://github.com/mrdoob/three.js/blob/master/examples/webgl_lines_dashed.html

2.gltf

由于gltf的文件并不需要转换的时间，直接面向gpu，因此模型大小及其渲染性能都会得到提升，可以尝试一下。

gltf的加载器继承自加载器的基类 THREE.Loader(),它的loader（）方法用来解析glTFJSON文件；载入外部资源，如二进制缓冲，文明里和着色器；以及通过回调函数来返回结果。回调函数能够访问加载器创建的three。js对象层级结构，因此可以轻松将它加载到场景中并开始渲染。

使用gltf的先期优势是十分可观的，文件体积是collada文本格式的一半，加载某些模型的速度提升了80%，这有一部分归功于我们使用了three。js中的buffergeometry类型，它允许我们用加载好的类型数组（typed array）数据（比如Int32Array 和IFloat32Array）来直接创建几何体，而不是使用普通的JavaScript Number类型的数组。

由于使用二进制数据存储，使得访问类型化数组的速度更快，耗费的内存也更小，是解决性能瓶颈的理想存储方案，

加载一个glTF文件的流程，可以简单地描述如下：

（1）读取一个简单的JSON包装文件

（2）通过Ajax加载外部二进制文件（.bin）

（3）创建一些数据类型

（4）调用WebGL绘制内容方法来渲染。

（材质和着色器：

材质可以表示为高层的通用结构（blinn，phong，lambert），或者在GLSL顶点着色器和片段着色器中实现，作为外部文件被glTF文件引用。）

我们可以流式下载，增量下载，或者一次性加载gltf内容、