Chapter 02

1-01 : ハローワールド!最初のシーンとモデル

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

このページの原文: https://doc.babylonjs.com/start/chap1/first_scene

👀 このページの要点 3 行

  1. コード書いて箱 (豆腐) を表示させるハローワールドします
  2. web 上で Babylon.js が簡単に実行できるお手軽ライブエディタ Babylon.js Playground が便利
  3. コードで書いたモデルのエクスポートも Playground でできるよ

🐤 First Scene and Model (最初のシーンとモデル)

ワールドを全体を作る場合でも、web ページにひとつモデルを設置するだけでも、シーン が必要になります。
シーン には、ワールドやモデル、それらを見るための カメラ、 照らす ライト 、そしてもちろん、モデルとして少なくとも1つの見ることのできる オブジェクト (物体) が必要です。
単なる箱であれ、複雑なキャラクターであれ、すべてのモデルは三角形や facets (面) のメッシュで作られています。


メッシュの三角形を示すワイヤーフレーム

コードを使って直接書く or インポートする

多くのメッシュは、Babylon.js の中でコードを使って直接作成することもできますし、これから説明するように、他のソフトウェアで作成したメッシュからモデルとしてインポートすることもできます。
まずは、簡単に箱 (box) から始めてみましょう。

ハローワールド

箱を表示させます。
Babylon.js エンジンを使用するすべてのプロジェクトでは、カメラとライトが追加されたシーンが必要です。
その後、ボックスを作成します。

// シーンを作成
const scene = new BABYLON.Scene(engine);
// カメラを作成
const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);
// ユーザからの入力でカメラをコントロールするため、カメラをキャンバスにアタッチ
camera.attachControl(canvas, true);
// ライトを作成
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
// 箱 (豆腐) を作成
const box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);

↓ 実際に動いてるプレビュー。マウスでカメラが動くのでグリグリ動かしてみてね

動かす様子

box を作るときに 3 つのパラメータを渡している

MeshBuilder.CreateBox で作成される他のメッシュと同様に、ボックスはその中心が原点に位置するように作成され、3つのパラメータ (引数) が必要です。

3つのパラメータとは

  1. 名前 (文字列)
  2. オプション (JavaScript オブジェクト)
  3. シーン

です。

オプションに空のオブジェクト {} を指定してプロパティを指定しない場合、
ボックスの幅、高さ、奥行きはデフォルトでユニットサイズになります。

パラメータの省略

また、この時点ではシーンは 1 つしかないので、カメラ、ライト、ボックスはデフォルトでは現在のシーンに配置されるため、
最後のパラメータ (scene) は省略することもできます。

(MeshBuilder.CreateBox("box", {}); としても動きます)

✒ web 上での Babylon.js 実行環境 Playground を使った動作

Babylon.js Playground』とは、Babylon.js の WebGL 3D シーンの動くライブエディターです。便利。
(ちなみに英単語「playground」は「遊び場」という意味です)

Babylon.js Playground

Babylon.js Playground トップページ https://playground.babylonjs.com/

Playground で動いている箱ハローワールド

さきほどランスルーした箱を表示させるハローワールドは、
Playground では こちら で確認できます。

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

Babylon.js Playground
https://playground.babylonjs.com/#KBS9I5

エクスポートのやり方

メニューバーにある「Inspector」(インスペクタ) (分析ツール) をクリックします。

その中の「Tools」(ツール) をクリックし、エクスポート (出力) することができます。出力形式としては .babylon format と GLB format を選べます。

というわけでファイルができたので、次回、それを使って web ページで表示する方法を紹介します。