Rotate a face along one of its edges

Question

Given two faces f and f' with a common edge e, i'm looking for a way to rotate f around 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 ?

Welcome to Stackoverflow! Please, read about [ask] and [mcve]. — prisoner849, Mar 19 '18 at 14:01
Thanks ! I've added two screenshots, am I missing something else ? — T4g1, Mar 19 '18 at 14:25

score 1 · Answer 1 · answered Mar 19 '18 at 15:45

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>

Thanks, this helped but unfortunately, i was not able to reproduce the same result for a mesh that is not at the origin and with an arbitrary axis. — T4g1, Mar 20 '18 at 09:17

score 0 · Accepted Answer · answered Mar 20 '18 at 09:20

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

Rotate a face along one of its edges

2 Answers2