threejs 使用Box3获取网格模型的尺寸以及中心点

threejs yekong

threejs 在渲染模型的时候需要调整相机的位置以更好的显示模型,这时候可能会需要模型的中心点,以及模型的尺寸, 使用Box3可以获取到网格模型的尺寸以及中心点

// 地图mapGroup的包围盒计算
var box3 = new THREE.Box3();//创建一个包围盒
// .expandByObject()方法:计算层级模型group包围盒
box3.expandByObject(lineGroup);
// console.log('查看包围盒box3', box3);

//scaleV3表示包围盒长宽高尺寸
var scaleV3 = new THREE.Vector3();
// .getSize()计算包围盒长宽高尺寸
box3.getSize(scaleV3)
// 查看控制台包围盒大小,辅助设置相机参数
console.log('查看包围盒尺寸', scaleV3);

//scaleV3表示包围盒的几何体中心
var center = new THREE.Vector3();
// .getCenter()计算一个层级模型对应包围盒的几何体中心
box3.getCenter(center);
// 查看控制台包围盒集合中心,作为lookAt()参数
console.log('查看几何中心', center);

代码位置

Box3要放置在load方法内,放在外面无法获取到大小和中心点。

loader.load('data/china.json', function (data) {
      // 访问所有国家边界坐标数据:data.features
      data.features.forEach(function (area) {
        // "Polygon":国家area有一个封闭轮廓
        //"MultiPolygon":国家area有多个封闭轮廓
        if (area.geometry.type === 'Polygon') {
          // 把"Polygon"和"MultiPolygon"的geometry.coordinates数据结构处理为一致
          area.geometry.coordinates = [area.geometry.coordinates]
        }
        // 解析所有封闭轮廓边界坐标area.geometry.coordinates
        lineGroup.add(borderArr(area.geometry.coordinates))//国家边界轮廓插入组对象mapGroup
        meshGroup.add(shapeMesh(area.geometry.coordinates))//国家轮廓Mesh插入组对象mapGroup
      })
      // 地图mapGroup的包围盒计算
      var box3 = new THREE.Box3()//创建一个包围盒
// .expandByObject()方法:计算层级模型group包围盒
      box3.expandByObject(mapGroup)
// console.log('查看包围盒box3', box3);

//scaleV3表示包围盒长宽高尺寸
      var scaleV3 = new THREE.Vector3()
// .getSize()计算包围盒长宽高尺寸
      box3.getSize(scaleV3)
// 查看控制台包围盒大小,辅助设置相机参数
      console.log('查看包围盒尺寸', scaleV3)

//scaleV3表示包围盒的几何体中心
      var center = new THREE.Vector3()
// .getCenter()计算一个层级模型对应包围盒的几何体中心
      box3.getCenter(center)
// 查看控制台包围盒集合中心,作为lookAt()参数
      console.log('查看几何中心', center)
    })
喜欢