Three.js数据结构、导入导出
本文是Three.js电子书的14.1节
通过Three.js模型数据导入导出过程的学习,可以让你对Threejs解析加载外部模型的过程更为了解。
Threejs导出模型信息
你可以通过下面代码导出模型的各类信息,然后在浏览器控制台打印出来模型数据,然后复制浏览器控制台模型数据粘贴到json文件中,最后可以尝试加载解析这些Threejs导出的json文件。之所以这么做,是为了让你理解其它三维软件,比如3dmax、blender软件导出的三维模型文件本质上是什么。
查看Threejs文档Geometry、Material、Light、Object3D等类,你可以发现这些类都提供了一个方法.toJSON()
通过这个方法可以导出Threejs三维模型的各类数据,该方法的功能就是把Threejs的几何体、材质、光源等对象转化为JSON格式导出。
导出几何体信息。
var geometry = new THREE.BoxGeometry(100, 100, 100);
// 控制台查看立方体数据
console.log(geometry);
// 控制台查看geometry.toJSON()结果
console.log(geometry.toJSON());
// JSON对象转化为字符串
console.log(JSON.stringify(geometry.toJSON()));
// JSON.stringify()方法内部会自动调用参数的toJSON()方法
console.log(JSON.stringify(geometry));
导出材质信息。
var material = new THREE.MeshLambertMaterial({color: 0x0000ff,
}); //材质对象Material
console.log(material);
console.log(material.toJSON());
console.log(JSON.stringify(material));
导出场景scene信息。
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中
console.log(scene);
console.log(scene.toJSON());
自定义模型加载器文件
实际开发中,加载一种特定格式的模型文件,Threejs在three.js-master\examples\js\loaders
目录下会提供一系列的加载器,这些加载器本质上都是解析模型文件的字符串,通过正则表达式提取相关的顶点、材质等信息转化为Threejs自身的类表示的对象。为了让大家更理解这些常见的加载器,课件中提供了一个源码案例,编写了一个非常非常简易的自定义加载器,然后使用自定义的加载器去加载一个文件,让大家明白这些加载器怎么来的。
// 如果编写通用的材质加载器需要枚举所有的材质,这里没有列举完
var typeAPI = {MeshLambertMaterial: THREE.MeshLambertMaterial,MeshBasicMaterial: THREE.MeshBasicMaterial,MeshPhongMaterial: THREE.MeshPhongMaterial,PointsMaterial: THREE.PointsMaterial,
}
// 创建一个文件加载器,该加载器是对异步加载的封装
var loader = new THREE.FileLoader();
loader.load('material.json', function(elem) {console.log(elem);// 查看加载返回的内容var obj = JSON.parse(elem);// 字符串转JSON对象console.log(obj);// 查看转化结果var geometry = new THREE.BoxGeometry(100, 100, 100);/*** 解析材质数据*/// 根据type的值判断调用threejs的哪一个APIvar material = new typeAPI[obj.type]();// 从obj.color中提取颜色// 16711935对应颜色0xFF00FF 255对应颜色0x0000FFmaterial.color.r = (obj.color >> 16 & 255) / 255; //获取颜色值R部分material.color.g = (obj.color >> 8 & 255) / 255; //获取颜色值G部分material.color.b = (obj.color & 255) / 255; //获取颜色值B部分var mesh = new THREE.Mesh(geometry, material); //网格模型对象Meshscene.add(mesh); //网格模型添加到场景中
})
加载Three.js导出的模型数据
缓冲几何体数据加载器。
/****/
var loader = new THREE.BufferGeometryLoader();
loader.load('bufferGeometry.json',function (geometry) {// 控制台查看加载放回的threejs对象结构console.log(geometry);var material = new THREE.MeshLambertMaterial({color: 0x0000ff,}); //材质对象Materialvar mesh = new THREE.Mesh(geometry, material); //网格模型对象Meshscene.add(mesh); //网格模型添加到场景中
})
网格模型Mesh加载,包含几何体Geometry和材质Material
var loader = new THREE.ObjectLoader();
loader.load('model.json',function (obj) {console.log(obj);
console.log(obj.type);obj.scale.set(100,100,100)scene.add(obj)
})
加载组Group对象,模型对象构成的树结构
loader.load('group.json', function(obj) {console.log(obj);console.log(obj.type);scene.add(obj)
})
加载场景对象,场景对象不仅包含模型,还包括光源对象
loader.load('scene.json',function (obj) {console.log(obj);console.log(obj.type);obj.scale.set(100,100,100)scene.add(obj)
})