Rotate a face along one of its edges - three.js

Question

Given two faces f and f' with a common edge e, i'm looking for a way to rotate f around e.
See: illustration of f/f' and e
My goal is to unfold f and f' so they can be mapped on the same plan. More specifically, I want the coordinate of the vertex r of f that is not part of e after such unfolding (r').
See: after unfolding with r/r'
Currently i've tried to apply the method described here: https://sites.google.com/site/glennmurray/Home/rotation-matrices-and-formulas/rotation-about-an-arbitrary-axis-in-3-dimensions
In the case from the screenshot, i've simplified it as the rotation axis is already on the Z-axis. So my code looks like this:
// Object contains only two faces
var geometry = object.children[0].geometry;
var f = geometry.faces[0];
var fprime = geometry.faces[1];
// Find two vertices in common
var edge = [f.a, f.b];
if (f.a != fprime.a && f.a != fprime.b && f.a != fprime.c) {
edge = [f.b, f.c];
} else if (f.b != fprime.a && f.b != fprime.b && f.b != fprime.c) {
edge = [f.a, f.c];
}
var v1 = geometry.vertices[edge[0]];
var v2 = geometry.vertices[edge[1]];
polyhedron.translateOnAxis(v1, -1);
polyhedron.rotateOnAxis(v2, THREE.Math.degToRad(90));
polyhedron.translateOnAxis(v1, 1);
But this only send my object into space:
Before
After
Without the rotation, the object does not move (as expected). Any hints on how to fix the rotation ?

Answer 1

If I got you correctly, here's a rough concept of you can rotate a vertex around an axis:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(1, 5, 10);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
scene.add(new THREE.GridHelper(10, 10));
var planeGeom = new THREE.PlaneGeometry(5, 5);
planeGeom.rotateZ(Math.PI * 0.25);
planeGeom.vertices[0].basePosition = new THREE.Vector3().copy(planeGeom.vertices[0]);
planeGeom.vertices[2].set(0, 0, 0); // let's make a triangle from the plane
var plane = new THREE.Mesh(planeGeom, new THREE.MeshBasicMaterial({
color: "aqua",
wireframe: true
}));
scene.add(plane);
var axis = new THREE.Vector3(0, 1, 0); // in three.js, up is positive Y
render();
function render() {
requestAnimationFrame(render);
planeGeom.vertices[0].copy(planeGeom.vertices[0].basePosition).applyAxisAngle(axis, (Math.sin(Date.now() * 0.001) * 0.5 + 0.5) * Math.PI * 0.5); // we'll use .applyAxisAngle() method
planeGeom.verticesNeedUpdate = true;
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>

Answer 2

I was able to unfold a triangle to another triangle using the following snippet: Rotate object on specific axis anywhere in Three.js - including outside of mesh
// Object contains only two faces
var geometry = object.children[0].geometry;
geometry.computeFaceNormals();
geometry.computeVertexNormals();
var f = geometry.faces[0];
var fprime = geometry.faces[1];
// Find two vertices in common
var edge = [f.a, f.b];
if (f.a != fprime.a && f.a != fprime.b && f.a != fprime.c) {
edge = [f.b, f.c];
} else if (f.b != fprime.a && f.b != fprime.b && f.b != fprime.c) {
edge = [f.a, f.c];
}
var point = geometry.vertices[edge[0]].clone();
var axis = geometry.vertices[edge[1]].clone();
axis = axis.sub(point);
axis.normalize();
// Adds a triangle to show rotation
var newGeometry = new THREE.Geometry();
newGeometry.vertices.push(
geometry.vertices[f.a].clone(),
geometry.vertices[f.b].clone(),
geometry.vertices[f.c].clone()
);
newGeometry.faces.push(new THREE.Face3(0, 1, 2));
var material = new THREE.MeshBasicMaterial({color: 0xffff00, side: THREE.DoubleSide});
var mesh = new THREE.Mesh(newGeometry, material);
scene.add(mesh);
var dot_product = f.normal.dot(fprime.normal); // Give cosinus of the angle
var angle = Math.acos(dot_product);
mesh.rotateAroundWorldAxis(point, axis, angle);
THREE.Object3D.prototype.rotateAroundWorldAxis = function() {
// rotate object around axis in world space (the axis passes through point)
// axis is assumed to be normalized
// assumes object does not have a rotated parent
var q = new THREE.Quaternion();
return function rotateAroundWorldAxis(point, axis, angle) {
q.setFromAxisAngle(axis, angle);
this.applyQuaternion(q);
this.position.sub(point);
this.position.applyQuaternion(q);
this.position.add(point);
return this;
}
}();
Result