沿其中一条边旋转面

Question

给定两个具有共同边 e 的面 f 和 f'，我正在寻找一种将 f 围绕 e 旋转的方法。

见：illustration of f/f' and e

我的目标是展开 f 和 f'，以便它们可以映射到同一个计划上。更具体地说，我想要在展开 (r') 之后不属于 e 的 f 的顶点 r 的坐标。

见：after unfolding with r/r'

目前我已尝试应用此处描述的方法：https://sites.google.com/site/glennmurray/Home/rotation-matrices-and-formulas/rotation-about-an-arbitrary-axis-in-3-dimensions

在截图的例子中，我已经简化了它，因为旋转轴已经在 Z 轴上。所以我的代码如下所示：

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

但这只会将我的物体送入太空：

Before

After

如果没有旋转，对象就不会移动（如预期的那样）。有关如何修复旋转的任何提示？

Answer 1

如果我没听错的话，这里有一个粗略的概念，你可以围绕轴旋转顶点：

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

我能够使用以下 sn-p 将一个三角形展开到另一个三角形：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