このページの原文: 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 アルゴリズムの利用について
extrudePolygon
と PolygonMeshBuilder
は、どちらも earcut slicing アルゴリズム
を使用しています。
web 上の Babylon.js 実行環境 Babylon.js Playground
には、既に earcut
が定義されています(ので私たちが定義を自前でする必要は無いです)が、
もしあなたが独自のファイルシステムでこのチュートリアルを実行している場合は、
cdn または npm を介して
earcut アルゴリズム
を実装したライブラリをインポートする必要があります。
サンプル
サンプル: Extrude を学ぶ
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;
☞ 次
次に、いくつかのテクスチャを使用して、車をもう少し車のように見せます。