Threejs mesh中的点绕指定轴旋转

原创已于 2023-12-21 15:37:38 修改 · 937 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#算法 #前端 #javascript

于 2023-12-21 14:31:04 首次发布

本文介绍了一个在Three.js中如何围绕给定起点和终点的向量旋转THREE.Mesh对象的方法，通过计算中心点并应用轴向旋转矩阵实现90度旋转。

//获取start--->end的向量

function rotateSpecifiedAxis（mesh:THREE.Mesh）{

let vertices = [];

for (let i = 0; i < mesh.geometry.attributes.position.array.length; i += 3) {

vertices.push(new THREE.Vector3(mesh.geometry.attributes.position.array[i], mesh.geometry.attributes.position.array[i + 1], mesh.geometry.attributes.position.array[i + 2]));

}

let box = new THREE.Box3().setFromObject(mesh)

let center = new THREE.Vector3()

box.getCenter(center);

// 此处定义指定轴（起点----->终点）

let axis = new THREE.Vector3(this.m_vEnd.x, this.m_vEnd.y, this.m_vEnd.z).sub(new THREE.Vector3(this.m_vStart.x, this.m_vStart.y, this.m_vStart.z)).normalize();

//将所有点绕start--->end的向量旋转90度

vertices.forEach((item, index) => {

item.applyMatrix4(new THREE.Matrix4().makeTranslation(-center.x, 0, -center.z));

item = item.applyAxisAngle(axis, Math.PI / 2);

})

}