Chapter 20

3-02: 車を組み立てる (Building the Car)

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

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

🚙 3-02: 車を組み立てる (Building the Car)

extrudePolygon メソッド

車はとてもシンプルなものになります。

ボディは extrudePolygon メソッドを使用して構築されます。
これは MeshBuilder を使用して作成できます。

形状の輪郭はまず XZ 平面に描かれ、

点は反時計回りの順序で、Y 方向に押し出され (extrude) ます。

ポリゴンの原点は、底面のゼロ点です。

車のアウトラインは、水平ベースラインを形成する vector3 頂点の配列で構成され、フロントのカーブしたところ (1/4 円) と、それに続く水平ベースラインが続きます。
背面の平面は、最初と最後のポイントを自動的に結合するため、 extrudePolygon メソッドによって形成されます。

// ベース
const outline = [
    new BABYLON.Vector3(-0.3, 0, -0.1),
    new BABYLON.Vector3(0.2, 0, -0.1),
]

// カーブした前面
for (let i = 0; i < 20; i++) {
    outline.push(new BABYLON.Vector3(0.2 * Math.cos(i * Math.PI / 40), 0, 0.2 * Math.sin(i * Math.PI / 40) - 0.1));
}

// 上部
outline.push(new BABYLON.Vector3(0, 0, 0.1));
outline.push(new BABYLON.Vector3(-0.3, 0, 0.1));

これらと Y 方向への押し出し (extrude) で厚みができ、車体の形になっていきます。

// ↓ 深さ depth: 0.2 で押し出している
const car = BABYLON.MeshBuilder.ExtrudePolygon("car", {shape: outline, depth: 0.2});

earcut slicing アルゴリズムの利用について

extrudePolygonPolygonMeshBuilder は、どちらも earcut slicing アルゴリズム を使用しています。

web 上の Babylon.js 実行環境 Babylon.js Playground には、既に earcut が定義されています(ので私たちが定義を自前でする必要は無いです)が、
もしあなたが独自のファイルシステムでこのチュートリアルを実行している場合は、
cdn または npm を介して
earcut アルゴリズム を実装したライブラリをインポートする必要があります。

https://github.com/mapbox/earcut

サンプル

サンプル: Extrude を学ぶ

https://playground.babylonjs.com/#KDPAQ9#10

CodePen

↑ CodePen での実行では、HTML タブのところで earcut ライブラリをインポートしています。

<script src="https://unpkg.com/earcut@latest/dist/earcut.min.js"></script>

車輪を追加

シリンダー (円柱) から右後ろの位置の車輪を形成し、子供として車に追加します。
次に、右前輪、左後輪、左前輪のコピーを作成します。
今回は、クローンを複製できるため、createInstance ではなく clone を使用します。
車輪のクローンを作成すると、自動的にその親がクローンの親になります。

const wheelRB = BABYLON.MeshBuilder.CreateCylinder("wheelRB", {diameter: 0.125, height: 0.05});
wheelRB.parent = car;
wheelRB.position.z = -0.1;
wheelRB.position.x = -0.2;
wheelRB.position.y = 0.035;

const wheelRF = wheelRB.clone("wheelRF");
wheelRF.position.x = 0.1;

const wheelLB = wheelRB.clone("wheelLB");
wheelLB.position.y = -0.2 - 0.035;

const wheelLF = wheelRF.clone("wheelLF");
wheelLF.position.y = -0.2 - 0.035;

https://playground.babylonjs.com/#KDPAQ9#11

☞ 次

次に、いくつかのテクスチャを使用して、車をもう少し車のように見せます。