Three.js 模型居中 - 文章教程

Three.js 模型居中

发布于 2021-08-28 字数 1747 浏览 1011 评论 0

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

几何体居中 .center()

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

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

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

.center() 方法是基于Threejs包围盒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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

虐人心

有一天你能到我的心里去,你会看到那里全是你给的伤悲。

38 文章
6 评论
24141 人气
更多

推荐作者

魏剑帆

文章 0 评论 0

yanggwq

文章 0 评论 0

qq_c2gI5

文章 0 评论 0

qq_iQVWB

文章 0 评论 0