【问题标题】:Can't rotate an object on arbitrary axis in Threejs无法在 Threejs 中的任意轴上旋转对象
【发布时间】:2019-11-17 19:42:55
【问题描述】:

我有一个带有这些坐标的平面几何:

var planVertices = new Float32Array(18);
//Vertice 1
planVertices[0] = -47.63179171506315;
planVertices[1] = 33.77709642112255;
planVertices[2] = -39.992833485603335;
//Vertice4
planVertices[3] = -47.63719374716282;
planVertices[4] =33.67262125968933;
planVertices[5] = -39.885335769653324;
//Vertice2
planVertices[6] = -46.49726260129362;
planVertices[7] = 33.71843400657177;
planVertices[8] = -39.992833485603335;
//Vertice4
planVertices[9] = -47.63719374716282;
planVertices[10] = 33.67262125968933;
planVertices[11] = -39.885335769653324;
//Vertice3
planVertices[12] = -46.50266463339329;
planVertices[13] = 33.61395884513855;
planVertices[14] = -39.885335769653324;
//Vertice2
planVertices[15] = -46.49726260129362;
planVertices[16] = 33.71843400657177;
planVertices[17] = -39.992833485603335;                        
var geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.BufferAttribute(planVertices,3));
var material = new THREE.MeshBasicMaterial({
   color: 0x000000,
   side: THREE.DoubleSide,
});
var segments = new THREE.Mesh(geometry, material);
scene.add(segments);
var p1 = new THREE.Vector3(planVertices[0],planVertices[1],planVertices[2]);
var p2 = new THREE.Vector3(planVertices[6],planVertices[7],planVertices[8]);
var axisLocal = new THREE.Vector3().subVectors(p2,p1).normalize;
segments.rotateOnAxis(axisLocal,0.707);

如何从我的axisLocal矢量旋转它?这只是我几何的一部分,我至少有 80 个独立平面,我想从它的axisLocal 旋转每个平面。

[已解决] 我已将我的对象居中到原点,然后执行我的旋转并重新应用反向平移。

//Center object to the origin
var matTrans = new THREE.Matrix4();
var matTransInv = new THREE.Matrix4();
segments.geometry.computeBoundingBox();
var center = new THREE.Vector3();
segments.geometry.boundingBox.getCenter(center);
center.negate();
matTrans.makeTranslation(center.x, center.y, center.z);
matTransInv.getInverse(matTrans);
segments.applyMatrix(matTrans);
//Rotate object at the origin from its axis
var matRot = new THREE.Matrix4();
matRot.makeRotationAxis(axis, -0.707);
segments.applyMatrix(matRot);
//Inverse translation
segments.applyMatrix(matTransInv);

【问题讨论】:

标签: three.js rotation


【解决方案1】:

网格继承自具有 .rotateOnAxis(axis,angle) 方法的 Object3D。

【讨论】:

  • 我使用该方法,但它不会通过给定轴旋转。我在这里找到了一个线程stackoverflow.com/questions/28848863/…,它说如果顶点从原点偏移,则旋转不是从对象中心开始的。所以现在我正在寻找如何居中、旋转然后平移我的对象。
  • 解决该问题的一种简单方法是制作一个裸露的 THREE.Object3D(),并将您的网格添加到其中而不是直接添加到场景中。然后将网格移动到所需的枢轴点,但操纵父母做你想要的旋转。
  • 理想情况下,您希望避免转换几何体本身,而是通过场景图/转换层次结构来实现。转换几何图形发生在 GPU 上并且是永久性的,而仅操作节点是动态的并且可以在每帧的基础上进行修改。
  • 您的意思是,实例化一个空的 Object3D,然后将我的对象添加到其中吗?如果是这样,我试过了,但我有同样的结果
  • 您似乎找到了解决方案。很高兴你有一些工作。 :)
猜你喜欢
  • 1970-01-01
  • 2017-10-13
  • 1970-01-01
  • 2013-05-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-10-20
  • 1970-01-01
相关资源
最近更新 更多