javascript - 如何使二十面体上的三 Angular 形侧面积增加和减少，而不保留形状 "intact"？

Question

我将如何使二十面体旋转以及三 Angular 形边的面积增加，如视频中所示:Click here.

这是使用 THREE.js 的 JavaScript 代码

THREE.IcosahedronGeometry = function ( radius, detail ) {

var t = ( 1 + Math.sqrt( 5 ) ) / 2;

var vertices = [ - 1, t, 0, 1, t, 0, - 1, - t, 0, 1, - t, 0, 0, - 1, t, 0, 1, t, 0, - 1, - t, 0, 1, - t, t, 0, - 1, t, 0, 1, - t, 0, - 1, - t, 0, 1 ];

var indices = [ 0, 11, 5, 0, 5, 1, 0, 1, 7, 0, 7, 10, 0, 10, 11, 1, 5, 9, 5, 11, 4, 11, 10, 2, 10, 7, 6, 7, 1, 8, 3, 9, 4, 3, 4, 2, 3, 2, 6, 3, 6, 8, 3, 8, 9, 4, 9, 5, 2, 4, 11, 6, 2, 10, 8, 6, 7, 9, 8, 1 ];

THREE.PolyhedronGeometry.call( this, vertices, indices, radius, detail );

this.type = 'IcosahedronGeometry';

this.parameters = { radius: radius, detail: detail }; };

THREE.IcosahedronGeometry.prototype = Object.create( THREE.Geometry.prototype );

作者:timothypratley/https://github.com/timothypratley

Answer 1

为了按比例放大和缩小位置，每个三 Angular 形都需要用以零为中心的点来构造。为了使三 Angular 形以零为中心，我们找到 3 个顶点的中点，然后从每个点中减去该中点。现在可以在不离开原点的情况下缩放三 Angular 形。

然后将三 Angular 形添加到父对象，并定位在我们之前计算的中点。因此，当缩放三 Angular 形时，它们是相对于它们在二十面体形状中的位置进行缩放的。

这是构造不相交三 Angular 形的代码:

(defn icos []
  (let [icosahedron (js/THREE.Object3D.)]
    (doseq [triangle indices
            :let [vs (map vertices triangle)
                  [x y z :as face-center] (map average (transpose vs))
                  normalized-vertices (for [v vs]
                                        (map - v face-center))
                  face-mesh (geo normalized-vertices)]]
      (.set (.-position face-mesh) x y z)
      (.add icosahedron face-mesh))
    icosahedron))

对于每个三 Angular 形，查找其顶点。找到面部中心。从每个顶点减去面中心。创建几何图形。将几何体定位在相对于二十面体的面中心。你可以看到full rendering code on github .

最终结果:Icopop允许您在旋转时缩放三 Angular 形或二十面体。