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

墨蓝 2022-01-14 14:07 1413阅读 0赞

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内容、