Three.jsの三角形によるオブジェクトの描画方法

Three.js(WebGL)の三角形の描画と形状の作成についてです。
三角形をもちいてオリジナルな形状を作ろうと思うのですが、上手くいきません。
三角形で球を作る場合を考えてみました。

    geometry = new THREE.Geometry();
    //球の頂点座標を取得
    sphere = new THREE.SphereGeometry(200, 10, 10);

    //球の頂点座標をgeometryに割り当てていく
    for (var n = 0; n < sphere.vertices.length; n++) {
        var x = sphere.vertices[n].x;
        var y = sphere.vertices[n].y;
        var z = sphere.vertices[n].z;
        geometry.vertices.push(new THREE.Vector3(x, y, z));
    }

    //三角形を形成
    for (var i = 0; i < sphere.vertices.length; i++) {
        geometry.faces.push(new THREE.Face3( i, i+1, i+2));
    }

    material = new THREE.MeshPhongMaterial({color: 0xff0000});
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

new THREE.SphereGeometry(200, 10, 10);で縦横10分割して0から順番に座標をgeometryに割り当てていったのですが、やはり分割の仕方が悪く隣り合う点同士を結んでしまい、正三角形が密集したようなきれいな球になりません。

球に限らず、ある形状の頂点を取り、表面を三角形で覆うように配置するにはどのように考えるべきなのでしょうか。

目標としては下記サイトのような動きを視野に入れております。
https://garden-eight.com/
ばらばらの三角形が集合し、様々なオブジェクトを形成しています。このためには予め用意されているオブジェクトの頂点ではなく個別に三角形を複数用意し、各三角形の頂点の相対位置が変わらないようグループを作り動かす必要がありそうです。そして、3つの頂点の内2つずつを結んで形状を作成していくように思います（見当違いかもしれません）

実際のコードではなく、考え方でも構いませんのでご意見をお聞かせください。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

頂点を球から抜き出し、 geometry.faces に追加する、という、Three.jsでの面生成までの流れは、それで完璧ですね。

頂点情報を球（SphereGeometry）から流用して作成したように、faceもSphereGeometryから有用して作成する必要があります。

//三角形を形成
for (var i = 0; i < sphere.faces.length; i++) {
   geometry.faces.push(new THREE.Face3(sphere.faces[i].a, sphere.faces[i].b, sphere.faces[i].c));
}

ただ、例として提示していただいたサイトのような動きを作りたいのであれば、さらにもう一工夫必要です。というのも、お察しの通り、移動するのが「頂点基準」ではなく「面基準」で考える必要があるためです。

頂点基準：頂点を動かすだけ
面基準：面の中央となるような場所を動かす→その面に関連づけられている頂点を動かす

そのため、面数*3の頂点を作成し、それに対して新たに面情報を定義する、という流れが必要になります
自分がやってみたのは、こんな感じです。

    scene = new THREE.Scene();
    geometry = new THREE.Geometry();
    //球の頂点座標を取得
    sphere = new THREE.SphereGeometry(100, 10, 10);

    //球の面情報を基準に、頂点を複製していく。
    // ループ回数は、面数となる
    for (var i = 0; i < sphere.faces.length; i++) {
        // 面に割り当てられている頂点を複製。全く同じ位置の頂点も複製されるけど、必要になるので気にしない
        geometry.vertices.push(new THREE.Vector3().copy(sphere.vertices[sphere.faces[i].a]));
        geometry.vertices.push(new THREE.Vector3().copy(sphere.vertices[sphere.faces[i].b]));
        geometry.vertices.push(new THREE.Vector3().copy(sphere.vertices[sphere.faces[i].c]));
        //面を作成
        geometry.faces.push(new THREE.Face3(i * 3, i * 3 + 1, i * 3 + 2));
    }

    material = new THREE.MeshPhongMaterial({
        color: 0xff0000
    });
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // 「面」を移動したいのであれば、以下のような動かし方になる
    var moveFaceTarget = 100;

    geometry.vertices[geometry.faces[moveFaceTarget].a].x = geometry.vertices[geometry.faces[moveFaceTarget].a].x + 100;
    geometry.vertices[geometry.faces[moveFaceTarget].b].x = geometry.vertices[geometry.faces[moveFaceTarget].b].x + 100;
    geometry.vertices[geometry.faces[moveFaceTarget].c].x = geometry.vertices[geometry.faces[moveFaceTarget].c].x + 100;

動いてる状態はこんな感じです。
http://adrs2002.com/sandbox/movefacevertex.html

思考・考慮の足しになったら幸いです。

投稿2017/09/24 07:26