-1

I have a plan geometry with these coordinates:

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);

How can I rotate it from my axisLocal vector? This is just a part of my geometry, I have at least 80 independants plane that I want to rotate each one from its axisLocal.

[SOLVED] I have centered my object into the origin, then perfom my rotation and re apply inverse translation.

//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);
Valimo Ral
  • 381
  • 2
  • 15
  • Possible duplicate: https://stackoverflow.com/questions/31953608/rotate-object-on-specific-axis-anywhere-in-three-js-including-outside-of-mesh – WestLangley Jul 08 '19 at 13:36
  • Thanks, I used your answer from this thread https://stackoverflow.com/questions/28848863/threejs-how-to-rotate-around-objects-own-center-instead-of-world-center by centering the mesh. – Valimo Ral Jul 08 '19 at 14:42

1 Answers1

-1

meshes inherit from Object3D which has a .rotateOnAxis(axis,angle) method.

manthrax
  • 4,918
  • 1
  • 17
  • 16
  • I use that method but it does not rotate throught the given axis. I found a thread here https://stackoverflow.com/questions/28848863/threejs-how-to-rotate-around-objects-own-center-instead-of-world-center which says that if vertices are offsetted from the origin, the rotation is not from the object center. So now I am looking how to center, rotate then translate my object. – Valimo Ral Jul 08 '19 at 12:08
  • An easy way around that problem is to make a bare THREE.Object3D(), and add your mesh to that instead of directly to the scene.. then the move the mesh to it's desired pivot point, but manipulate the parent to do the rotation you want. – manthrax Jul 08 '19 at 13:07
  • Ideally you want to avoid transforming the geometry itself but instead do it through the scene graph / transformation hierarchy. Transforming the geometry happens on the GPU and is permanent, whereas just manipulating nodes is dynamic and modifiable on a per frame basis. – manthrax Jul 08 '19 at 13:09
  • Do you mean, instantiate an empty Object3D and then add my object to it? if so, I tried it but I have the same result – Valimo Ral Jul 08 '19 at 14:35
  • It looks like you found a solution. Glad you got something working. :) – manthrax Jul 08 '19 at 20:58