続 Babylon.js で作成したメッシュの頂点を編集する

これはBabylon.js Advent Calendar 2023 の7日目の記事です。

この記事について

前回のメッシュの頂点を編集する記事の続きです。
今回は編集例をいくつか記載します。

球体の頂点を編集をする

今回はPlayGroundのデフォルトでも表示される球体をベースにします。

球体の上半分を拡大する

前回と同様に、getVerticesDataで頂点の座標を取得します。
次に　spherePos.length/2 で、取得した頂点の半数の座標を対象にし、座標のサイズを２倍の値にして updateVerticesData で球体に変更を反映します。

球体の半分を拡大

    var spherePos = sphere.getVerticesData(BABYLON.VertexBuffer.PositionKind);
    var numberOfVertices = spherePos.length/2; //半分の座標までを対象にする

    for(var i = 0; i<numberOfVertices; i++) {
        spherePos[i] = spherePos[i] * 2;       //サイズを2倍にする
    }
    sphere.updateVerticesData(BABYLON.VertexBuffer.PositionKind, spherePos);

このPlaygroundは、下記のリンクにあります。
https://playground.babylonjs.com/#UY72D0#8

実行結果は、下図のようになりました。

球体の上半分を、縦方向にだけ拡大する。

次に、縦方向のみサイズを2倍にしてみます。
getVerticesDataで取得した頂点座標は、x,y,z,x,y,z,・・・と繰り返しなので、y座標のみを狙って２倍します。

球体の半分を縦に拡大

    var spherePos = sphere.getVerticesData(BABYLON.VertexBuffer.PositionKind);
    var numberOfVertices =　spherePos.length/2/3;

    for(var i = 0; i<numberOfVertices; i++) {
        spherePos[i*3+1] = spherePos[i*3+1] * 2;
    }

spherePos[i*3+1]で、3つおきに座標を処理し、+1でyの部分を対象にしています。
このPlaygroundは、下記リンクにあります。
https://playground.babylonjs.com/#UY72D0#6

実行結果は下図のようになりました。

半分だけ縦に伸ばしたので卵っぽいですね。

球体の上半分を、飛ばし飛ばしで拡大する

最期に、10個置きにサイズを拡大してみます。
if((i % 10) == 0){　で、10個おきに頂点を拡大していきます。

球体の半分を縦に拡大

    var spherePos = sphere.getVerticesData(BABYLON.VertexBuffer.PositionKind);
    var numberOfVertices =　spherePos.length/3;

    for(var i = 0; i<numberOfVertices/2; i++) {
        if((i % 10) == 0){
            var idx = i*3 ;
            spherePos[idx]   = spherePos[idx] * 2;
            spherePos[idx+1] = spherePos[idx+1] * 2;
            spherePos[idx+2] = spherePos[idx+2] * 2;
        }
    }

このPlaygroundは、下記リンクにあります。
https://playground.babylonjs.com/#UY72D0#7

実行結果は下図のようになりました。

ヤマアラシのようにガビガビしてますね。

最期に

球体の頂点を編集して、いろいろな形を作成してみました。

次回は、色の操作についても記述していこうと思います。