时间戳

首页 > 解决方案 > 轴改变旋转轴三个js

javascript - 轴改变旋转轴三个js

问题描述

您好，我实际上使用的是three.js，我想通过x 轴旋转我的3d 模型，但是当我尝试代码时：object.rotation.x += 0.01; 它不像我想要的那样工作。下图说明了它现在在左图中的工作方式以及我想要在右图中的内容。PS：像公爵一样的造型是我的3d模型 在此处输入图像描述

标签： javascriptthree.js3daugmented-reality

解决方案

这里发生的情况是您的网格的原点不在其中心，正如您的鸭子图片（做得好！）清楚地说明了。

一种解决方案是在 Y 方向上平移网格的顶点，使原点移到中间（另请参阅此答案）：

geometry.translate( distX, distY, distZ );

还有一种自动重置网格原点的方法，方法是使用边界框定义其中心（即，您不必计算沿 Y 轴平移顶点的距离）：

// Create a bounding box:
var box = new THREE.Box3().setFromObject( mesh );
// Reset mesh position:
box.center(mesh.position);
mesh.position.multiplyScalar(-1);

然后将网格添加到枢轴对象：

var pivot = new THREE.Group();
scene.add(pivot);
pivot.add(mesh);

（另请参阅此答案）。您现在应该能够根据需要围绕 x 轴旋转鸭子。

推荐阅读