跳至主要內容

变换组件

yisky大约 3 分钟基础知识文档组件变换组件

Transform——变换组件,负责管理实体的位置、旋转、缩放及父子层级关系,因此非常重要。

重要

Transform 组件不需要手动添加,实体始终附加一个变换组件,也不要主动移除变换组件。

变换组件属性

  • object3D - 获取 three.js 原生 Object3Dopen in new window对象,只读属性。

  • isRoot - 判断是否是根变换,即所属实体是否是场景根实体,只读属性。

  • isCamera - 判断是否是相机变换,即所属实体是否是相机实体,只读速写。

  • parent - 变换的父级,读写属性。

  • children - 变换的所有子级,只读属性。

  • position - 相对于父变换的变换位置,即变换的本地位置,读写属性。

  • scale - 相对于父变换的变换缩放,即变换的本地缩放,读写属性。

  • rotation - 相对于父变换旋转的变换旋转,即变换的本地旋转,读写属性。

  • quaternion - 相对于父变换的变换的旋转四元数,即变换的本地旋转四元数,读写属性。

  • matrix - 设置变换的本地矩阵,只写属性。

变换组件方法

  • addChild - 添加一个子变换。

  • removeChild - 删除一个子变换。

  • removeAllChildren - 删除所有子变换。

  • removeFromParent - 从父变换删除。

  • getWorldPosition - 获取变换的世界位置。

  • getWorldScale - 获取变换的世界缩放。

  • getWorldQuaternion - 获取变换的世界旋转四元数。

  • getWorldDirection - 获取变换的世界朝向。

  • setTransformation - 设置变换的本地方位信息。

  • translateOnAxis - 沿本地空间的指定轴按指定距离平移变换组件。

  • translateX - 沿本地空间X轴平移变换组件指定距离。

  • translateY - 沿本地空间Y轴平移变换组件指定距离。

  • translateZ - 沿本地空间Z轴平移变换组件指定距离。

  • rotateOnWorldAxis - 绕世界空间的指定轴旋转变换组件指定角度(单位:弧度)。

  • rotateOnAxis - 绕本地空间的指定轴旋转变换组件指定角度(单位:弧度)。

  • rotateX - 绕本地空间的X轴旋转变换组件指定角度(单位:弧度)。

  • rotateY - 绕本地空间的Y轴旋转变换组件指定角度(单位:弧度)。

  • rotateZ - 绕本地空间的Z轴旋转变换组件指定角度(单位:弧度)。

  • lookAt - 旋转变换组件使其朝向世界空间中的某个点。

  • localToWorld - 将变换组件本地空间中的点转换到世界空间中。

  • worldToLocal - 将世界空间中的点转换到变换组件的本地空间中。

  • updateWorldMatrix - 更新变换组件的世界矩阵。

提示

通常情况下我们不需要手动更新变换组件的世界矩阵,但当我们通过 three.js 原生 Object3D 对象更新方位属性时,更新后需要手动更新变换组件的世界矩阵。

// 获取变换组件 three.js 原生 Object3D 对象
const { object3D } = transform;

// 通过原生 Object3D 对象更新方位信息
object3D.position.x += 10.0; // 沿X轴正向移动
object3D.rotation.y += 0.01; // 绕Y轴旋转

// 手动更新变换组件世界矩阵
transform.updateWorldMatrix();
上次编辑于: