沿其边缘之一旋转面

Question

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

参见：f/f' 和 e 的插图

我的目标是展开f和f'，以便它们可以映射到同一个平面图上。更具体地说，我想要 f 的顶点 r 的坐标，在这种展开 (r'( 之后不是 e 的一部分。

参见：用 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);

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

以前

后

如果没有旋转，对象不会移动(按预期(。关于如何修复旋转的任何提示？

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

我能够使用以下代码片段将一个三角形展开为另一个三角形： 在 Three 中的任意位置在特定轴上旋转对象.js - 包括网格外部

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

结果