WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 一对一班

Three.js模型居中

threejs通过外部数据生成的模型或者加载外部模型的时候,得到的三维模型是不居中的,希望通过threejs的一些方法实现居中操作。

几何体居中.center()

如果加载的或生成的模型对象只有一个网格模型,不是多个模型对象组成的层级模型,可以通过控制网格模型模型几何体的方式居中。

// 网格模型模型的几何体居中
Mesh.geometry.center()

关于几何体.center()方法可以查看threejs文档中BufferGeometryGeometry对几何体的介绍。

.center()方法是基于Threejs包围盒Box3实现几何体居中。关于包围盒的算法可以阅读本站发布的文章《Three.js包围盒Box3》

一个模型渲染在场景中的渲染位置,一方面是

如果一个网格模型的几何体执行了.center()方法还没有居中,要查看下相机的方法.looAt()是否指向坐标原点,模型的.position属性值是否是Vector3(0,0,0,)

多个模型对象居中

如果一个threejs三维模型有多个网格模型对象构成,这种情况不能通过执行几何体.center()方法实现整个模型居中,因为每个网格模型都有一个几何体。

通过threejs加载一个模型文件,模型可能居中也可能不居中,通过下面代码去设置threejs加载的任何模型居中。

/**
 * 包围盒全自动计算:模型整体居中
 */
var box3 = new THREE.Box3()
// 计算层级模型group的包围盒
// 模型group是加载一个三维模型返回的对象,包含多个网格模型
box3.expandByObject(group)
// 计算一个层级模型对应包围盒的几何体中心在世界坐标中的位置
var center = new THREE.Vector3()
box3.getCenter(center)
// console.log('查看几何体中心坐标', center);

// 重新设置模型的位置,使之居中。
group.position.x = group.position.x - center.x
group.position.y = group.position.y - center.y
group.position.z = group.position.z - center.z
本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com