扫码阅读
手机扫码阅读

【09】three进阶——矩阵变换(Matrix transformations)

131 2024-09-08

我们非常重视原创文章,为尊重知识产权并避免潜在的版权问题,我们在此提供文章的摘要供您初步了解。如果您想要查阅更为详尽的内容,访问作者的公众号页面获取完整文章。

查看原文:【09】three进阶——矩阵变换(Matrix transformations)
文章来源:
小南瓜开发平台
扫码关注公众号
Three.js Transformation Update Summary

Three.js使用matrix编码3D变换

在Three.js中,每个Object3D实例都有一个matrix属性用于存储对象的平移(位置)、旋转和缩放信息。本文概述了如何更新对象的变换。

便利的属性和matrixAutoUpdate

对象的转换可以通过以下两种方法更新:

  1. 修改对象的属性:通过改变positionquaternionscale属性,可以让Three.js重新计算对象矩阵。默认情况下,matrixAutoUpdate属性为true,会自动重新计算矩阵。如果要提高性能,可以将此属性设置为false,并在更改任何属性后手动调用object.updateMatrix()来更新矩阵。

  2. 直接修改对象的矩阵:可以使用Matrix4类提供的方法直接修改矩阵,这要求将matrixAutoUpdate设置为false,并确保不调用updateMatrix(),以避免破坏手动所做的更改。

对象和世界矩阵

对象的matrix属性描述了对象相对于其父节点(Object3D.parent)的变换。要获取对象在世界坐标系中的转换,必须访问对象的Object3D.matrixWorld属性。当父对象或子对象的变换发生更改时,应调用updateMatrixWorld()来更新子对象的matrixWorld

旋转和四元数

Three.js提供了两种表示3D旋转的方式:欧拉角和四元数,以及它们之间的转换方法。由于欧拉角可能遇到“万向节锁定”的问题,对象的旋转始终存储在对象的quaternion中。

想要了解更多内容?

查看原文:【09】three进阶——矩阵变换(Matrix transformations)
文章来源:
小南瓜开发平台
扫码关注公众号

南瓜树基础能力低代码平台,助力中小企业进行数字化转型

122 篇文章
浏览 18.6K
加入社区微信群
与行业大咖零距离交流学习
软件研发质量管理体系建设 白皮书上线