three.js使用（5）模型文件加载

这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战

模型文件加载

创建好的模型对象的信息可以导出，比如geometry模型对象的顶点信息，material的模型材质信息，scene场景信息，Light光源信息，可以把这些信息整合到一个JSON文件中，然后通过数据加载器导入，之后在页面上展示。

1. 导出模型信息

1.导出几何体信息 （.toJSON()通过这个方法可以导出Threejs三维模型的各类数据，该方法的功能就是把Threejs的几何体、材质、光源等对象转化为JSON格式导出。）

var geometry = new THREE.BoxGeometry(100, 100, 100);
// 控制台查看立方体数据
console.log(geometry);
// 把数据转换成JSON字符转
console.log(JSON.stringify(geometry));

2.导出材质信息

var material = new THREE.MeshLambertMaterial({
  color: 0x0000ff,
}); //材质对象Material
console.log(material);
console.log(material.toJSON());
console.log(JSON.stringify(material));

3.导出场景scene信息

var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中
console.log(scene);
console.log(JSON.stringify(scene));

2. 加载模型数据

通过各种Loader加载JSON数据，这些加载器本质上都是解析模型文件的字符串，通过正则表达式提取相关的顶点、材质等信息转化为Threejs自身的类表示的对象。

BufferGeometryLoader缓冲几何体数据加载器（加载geometry几何体信息，就是坐标）

var loader = new THREE.BufferGeometryLoader();
loader.load('bufferGeometry.json',function (geometry) {
  // 控制台查看加载放回的threejs对象结构
  console.log(geometry);
  var material = new THREE.MeshLambertMaterial({
    color: 0x0000ff,
  }); //材质对象Material
  var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
  scene.add(mesh); //网格模型添加到场景中
})

ObjectLoader加载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)
})