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

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

この記事について

Babylon.jsでは、BABYLON.MeshBuilderで立方体や球体を表示します。
今回はここで生成したメッシュの頂点を、調整する方法について記述します。

作成した立方体の頂点を取得する

Playgroundを開いて、下記のように立方体を１つ作成するコードを記述します。

立方体を表示

    var box = BABYLON.MeshBuilder.CreateBox("box1", {width: 2, height: 2, depth: 2}, scene);

https://playground.babylonjs.com/#UY72D0

立方体を表示したら、下記のようにgetVerticesDataでメッシュの頂点データを配列で取得できます。

立方体の頂点を取得

    var boxpos = box.getVerticesData(BABYLON.VertexBuffer.PositionKind);
    alert(boxpos);

お手軽にalertで取得した内容を表示してみます。

取得した各頂点毎のXYZ座標が連続で表示されました。1点につきXYZ座標があるので、3つの値で1つの頂点に相当します。
今回作成した立方体は、中心座標が０、XYZのサイズが2なので、XYZ座標がすべて1と-1になっていますね。

頂点を編集する

頂点を編集するには、CreateBoxで立方体を作成する際にオプションで「updatable:true」を記述して編集を許可しておく必要があります。（これを忘れると変更した内容が反映されずに悩みます）

編集可能な立方体を表示

   var box = BABYLON.MeshBuilder.CreateBox("box1", {width: 2, height: 2, depth: 2, updatable:true}, scene);

編集可能にした立方体の頂点をgetVerticesDataで取得したら、その配列を編集します。必要な編集が終わったら、updateVerticesDataで立方体に変更した頂点位置を反映します。

1つの頂点位置（XYZ）を2.5倍する

    //頂点の値を変更
    boxpos[0] = boxpos[0] * 2.5;
    boxpos[1] = boxpos[1] * 2.5;
    boxpos[2] = boxpos[2] * 2.5;
    //変更した頂点を反映する
    box.updateVerticesData(BABYLON.VertexBuffer.PositionKind, boxpos);

https://playground.babylonjs.com/#UY72D0#1

立方体のうち、1点の頂点を移動することができました。

最期に

今回は作成した立方体の頂点を編集する方法について記述しました。
色々と応用ができるので、いくつか色々試してみようと思います。