Chapter 19

3-01: メッシュの親子関係 (Mesh Parents)

ちょまど (千代田まどか)
ちょまど (千代田まどか)
2022.03.28に更新

このページの原文: https://doc.babylonjs.com/start/chap3/parent

👥 3-01: メッシュの親子関係 (Mesh Parents)

村を移動する非常にシンプルな車を追加します。

どんなにシンプルな車でも車輪が必要で、車のボディと車輪を組み合わせる必要があります。

merge meshes (マージメッシュ) を使用してそれらを結合すると、(完全にがっちゃんこするので) 車輪が回転できなくなります。

代わりに、車のボディを各車輪の親として設定します。

子メッシュ.parent = 親メッシュ

親での位置、スケーリング、ローテーション (回転) の使用は、子にも適用されます。

子の位置の設定は親スペースで行われ、子の回転とスケールの設定は子のローカルスペースで行われます。

次の Babylon.js Playground で各値を変更し、親と子への影響を確認することができます。

https://playground.babylonjs.com/#GMEI6U
createScene 関数内
const boxParent = BABYLON.MeshBuilder.CreateBox("Box", {faceColors:faceColors});
const boxChild = BABYLON.MeshBuilder.CreateBox("Box", {size: 0.5, faceColors:faceColors});
// ↓ 親子関係に設定している
boxChild.setParent(boxParent);

// ↓ ここで子boxの座標をいじると子boxだけが動く
boxChild.position.x = 0;
boxChild.position.y = 2;
boxChild.position.z = 0;

boxChild.rotation.x = Math.PI / 4;
boxChild.rotation.y = Math.PI / 4;
boxChild.rotation.z = Math.PI / 4;

// ↓ ここで親boxの座標をいじると子boxごと一緒に動く
boxParent.position.x = 2;
boxParent.position.y = 0;
boxParent.position.z = 0;

boxParent.rotation.x = 0;
boxParent.rotation.y = 0;
boxParent.rotation.z = -Math.PI / 4;

const boxChildAxes = localAxes(1, scene);
boxChildAxes.parent = boxChild; 
localAxes 関数内
const local_origin = new BABYLON.TransformNode("local_origin");

// ↓ ここで親子関係に設定している
local_axisX.parent = local_origin;
local_axisY.parent = local_origin;
local_axisZ.parent = local_origin;

return local_origin;

これで、車を作成し、アニメーションを適用する準備が整いました。

👀 さらなる学び(参考)

Parents and Pivots

https://doc.babylonjs.com/divingDeeper/mesh/transforms/parent_pivot