Babylon.js入門初心者向けの基本的な使い方をわかりやすく解説

Webの世界は、テキストや画像、動画といった2Dの表現が中心でしたが、近年では3Dコンテンツの需要が急速に高まっています。オンラインゲーム、製品の3Dビュー、バーチャル展示会、メタバース空間など、その活用範囲は広がり続けています。このようなリッチな3D体験をWebブラウザ上で実現するための強力なツールが「Babylon.js」です。

この記事では、これから3Dプログラミングを始めたいと考えている初心者の方を対象に、Babylon.jsとは何か、その魅力や特徴、そして基本的な使い方までを、サンプルコードを交えながら網羅的かつ丁寧に解説していきます。この記事を読み終える頃には、あなたもBabylon.jsを使って簡単な3Dシーンを作成できるようになっているでしょう。

1 Babylon.jsとは
2 Babylon.jsの主な特徴
3 Babylon.jsを始めるための環境構築
4 Babylon.jsを構成する5つの基本要素
5 Babylon.jsの基本的な使い方3ステップ
6 作成できる基本的な3Dオブジェクトの種類
7 さらにステップアップするための機能
8 まとめ

Babylon.jsとは

Babylon.jsの世界に足を踏み入れる前に、まずはその正体と背景を理解しておきましょう。Babylon.jsがどのようなもので、誰によって作られ、どのような思想に基づいているのかを知ることは、今後の学習を進める上で大きな助けとなります。

Webブラウザで3Dコンテンツを表現できるJavaScriptライブラリ

Babylon.jsは、Webブラウザ上でインタラクティブな3Dグラフィックスを簡単に作成・表示するためのJavaScriptライブラリです。通常、ブラウザで3Dグラフィックスを描画するには、WebGL（Web Graphics Library）という低レベルなAPIを直接操作する必要がありますが、これは非常に複雑で専門的な知識が求められます。

Babylon.jsは、この複雑なWebGLの操作を抽象化し、開発者がより直感的かつ効率的に3Dコンテンツを開発できるように設計されています。プログラマーは、オブジェクトの生成、カメラの配置、ライトの設定といった作業を、分かりやすい命令（API）を使ってJavaScriptで記述するだけで、高度な3Dシーンを構築できます。

具体的にBabylon.jsで何ができるのか

Babylon.jsの用途は非常に幅広く、アイデア次第で様々なアプリケーションを開発できます。

ブラウザゲーム: アクション、パズル、シミュレーションなど、多様なジャンルの3Dゲームを開発できます。物理エンジンも統合されているため、リアルな動きの表現も得意です。
データ可視化: 複雑な統計データや科学的なシミュレーション結果を、3Dグラフやモデルで直感的に表現できます。
Eコマース（製品コンフィギュレーター）: ユーザーがWebサイト上で家具の色を変えたり、自動車のパーツをカスタマイズしたりするような、インタラクティブな製品プレビュー機能を提供できます。
建築・不動産のビジュアライゼーション: 建築モデルの中を歩き回るバーチャルツアーや、不動産物件の3D内覧などを実現します。
教育・トレーニング: 人体の構造を3Dで学んだり、機械の操作をシミュレーションしたりするなど、没入感の高い教育コンテンツを作成できます。
アート・クリエイティブ表現: アーティストやデザイナーが、自身の作品をインタラクティブな3D空間としてWeb上で公開できます。

他のライブラリとの比較

Web 3Dライブラリとして有名なものに「Three.js」があります。Babylon.jsとThree.jsはどちらも非常に強力で人気のあるライブラリですが、いくつかの思想的な違いがあります。Three.jsは、より軽量でレンダリング機能に特化しており、柔軟性が高い一方で、物理エンジンやGUIなどは別途ライブラリを組み合わせるのが一般的です。

対して、Babylon.jsは「バッテリー同梱（batteries included）」の思想を持ち、レンダリングエンジンだけでなく、物理エンジン、GUI、オーディオ、WebXRサポートなど、3Dアプリケーション開発に必要な機能の多くを最初からフレームワーク内に統合しています。これにより、開発者は環境構築の手間を減らし、すぐにアプリケーションの本質的な開発に集中できるというメリットがあります。どちらが良いというわけではなく、プロジェクトの要件や開発者の好みに応じて選択することが重要です。

Microsoftが開発したオープンソースのフレームワーク

Babylon.jsのもう一つの大きな特徴は、開発元がMicrosoftであるという点です。テクノロジー業界の巨人であるMicrosoftがバックアップしているという事実は、このフレームワークの継続的な開発と将来性に対する大きな信頼性につながっています。企業が技術選定を行う際にも、この点は安心材料となるでしょう。

もともとはMicrosoftの従業員によるサイドプロジェクトとして始まりましたが、そのポテンシャルの高さから公式プロジェクトへと発展しました。現在では、Microsoftだけでなく、世界中のコントリビューター（貢献者）からなる活発なコミュニティによって開発が進められています。

オープンソースであることのメリット

Babylon.jsは、Apache 2.0ライセンスのもとで公開されている完全なオープンソースプロジェクトです。これは開発者にとって多くの恩恵をもたらします。

無料での利用: 商用・非商用を問わず、誰でも無料でBabylon.jsを利用してアプリケーションを開発・公開できます。
透明性と信頼性: ソースコードがすべて公開されているため（主にGitHub上で管理されています）、内部でどのような処理が行われているかを確認できます。これにより、セキュリティ上の懸念を自分たちで検証したり、バグの原因を深く追究したりすることが可能です。
活発なコミュニティ: 世界中の開発者が参加するフォーラムやディスカッションがあり、疑問点を質問したり、他の開発者と知識を共有したりできます。バグの報告や新機能の提案も活発に行われており、フレームワーク自体がユーザーの声を取り入れながら日々進化しています。
豊富な学習リソース: 公式サイトには非常に詳細なドキュメントが整備されており、APIリファレンスから実践的なチュートリアルまで、学習に必要な情報が網羅されています。後述する「Playground」をはじめ、学習を強力にサポートするツールも充実しています。
カスタマイズの自由度: 必要であれば、フレームワークのソースコードを直接変更して、特定のプロジェクト要件に合わせた独自の機能を追加することも可能です。

このように、Babylon.jsは単なるライブラリではなく、Microsoftという強力な支援者と、活発なオープンソースコミュニティに支えられた、信頼性と将来性の高い開発プラットフォームであると言えます。

Babylon.jsの主な特徴

高性能なレンダリングエンジン、物理エンジンの標準搭載、直感的なアニメーション作成、GUIライブラリの提供、WebXR（VR/AR）のサポート、開発を助ける便利なツール

Babylon.jsが多くの開発者から支持される理由は、その多機能性と使いやすさにあります。ここでは、Babylon.jsを特徴づける主要な機能を掘り下げて見ていきましょう。これらの特徴を理解することで、Babylon.jsがどのようなプロジェクトに適しているかを判断する手助けになります。

高性能なレンダリングエンジン

レンダリングエンジンは3Dグラフィックスの心臓部であり、シーン内のオブジェクト、ライト、カメラの情報をもとに、最終的な2Dの画像を生成する役割を担います。Babylon.jsのレンダリングエンジンは、美しさとパフォーマンスの両立を追求して設計されています。

その中心的な技術が PBR (Physically Based Rendering) すなわち物理ベースレンダリングです。これは、光が現実世界でどのように振る舞うか（表面でどう反射し、どう吸収され、どう透過するか）を物理法則に基づいてシミュレートするレンダリング手法です。PBRを用いることで、金属の光沢、プラスチックの質感、布の柔らかさ、木の温もりといった、様々なマテリアル（素材）の質感を驚くほどリアルに表現できます。

Babylon.jsでは、PBRMaterial という専用のマテリアルクラスが用意されており、アルベド（物体の色）、メタリック（金属質）、ラフネス（表面の粗さ）といったパラメータを調整するだけで、簡単にフォトリアルな質感を設定できます。

さらに、以下のような高度なグラフィックス機能も標準でサポートしています。

ポストプロセスエフェクト: レンダリング後の画像全体に適用する効果です。被写界深度（DOF）、ブルーム（光のにじみ）、色調補正、モーションブラー（動きのブレ）などを簡単に追加でき、映画のような映像表現を演出します。
高度なシャドウ: 様々な種類のシャドウ（影）生成アルゴリズムをサポートしており、シーンに奥行きとリアリティを与えます。
カスタムシェーダー: GLSL（OpenGL Shading Language）を使って独自のシェーダーを記述し、標準機能だけでは実現できない特殊な視覚効果を生み出すことも可能です。

これらの機能により、Babylon.jsはリアルタイムで高品質なビジュアルを生成する能力を持っており、ゲームからビジュアライゼーションまで、幅広い要求に応えることができます。

物理エンジンの標準搭載

3D空間に配置されたオブジェクトが、ただ静止しているだけでは面白みに欠けます。オブジェクト同士が衝突したり、重力に従って落下したり、坂道を転がったりといった、リアルな物理現象をシミュレートするのが物理エンジンの役割です。

多くの3Dライブラリでは、物理演算機能は外部のライブラリを別途導入して連携させる必要がありますが、Babylon.jsは物理エンジンとの連携をフレームワークレベルで標準サポートしています。開発者は、HavokやCannon.jsといった有名な物理エンジンを、簡単な設定で有効化できます。

物理エンジンを有効にすると、各3Dオブジェクト（メッシュ）に対して「インポスター（Impostor）」と呼ばれる物理的な形状や性質を割り当てることができます。

mass (質量): 0に設定するとオブジェクトは固定され、0より大きい値にすると重力などの影響を受けるようになります。
friction (摩擦係数): オブジェクト表面の滑りやすさを定義します。
restitution (反発係数): オブジェクトが衝突した際の跳ね返りの強さを定義します。

これらのパラメータを設定するだけで、例えば「重さ1kgでゴムまりのように跳ね返る球」や「重くてザラザラしたコンクリートブロック」といった物理的な振る舞いを簡単に実装できます。これにより、積み木崩しやビリヤードのような物理シミュレーションゲーム、あるいはリアルな挙動が求められる製品デモなどを効率的に開発できます。

直感的なアニメーション作成

動きは3Dコンテンツに命を吹き込む重要な要素です。Babylon.jsは、非常に強力で直感的なアニメーションシステムを備えています。

基本となるのはキーフレームアニメーションです。これは、特定の時間（フレーム）におけるオブジェクトの状態（プロパティの値）を「キー」として設定し、そのキーとキーの間を自動的に補間することで滑らかな動きを作り出す手法です。

Babylon.jsでは、オブジェクトの以下のような様々なプロパティをアニメーション化できます。

位置 (position): オブジェクトを特定の経路に沿って移動させる。
回転 (rotation / rotationQuaternion): オブジェクトを回転させる。
スケール (scaling): オブジェクトを拡大・縮小させる。
マテリアルのプロパティ: 色 (diffuseColor) や発光 (emissiveColor) などを変化させ、点滅させたり色を変えたりする。
ライトのプロパティ: 強さ (intensity) や色 (diffuse) を変化させ、日の出や日の入りのような表現を作る。

これらのアニメーションは、Animationクラスを使って定義し、複数のアニメーションをAnimationGroupでまとめることで、複雑なシーケンスを管理することも可能です。例えば、キャラクターが「歩く」という動作は、腕の振り、足の運び、体の揺れなど複数のアニメーションの組み合わせですが、これらを一つのグループとして再生・停止・ループさせることができます。この柔軟なアニメーションシステムにより、開発者は生き生きとしたインタラクティブな世界を創造できます。

GUIライブラリの提供

3Dアプリケーションには、スコア表示、設定メニュー、情報パネル、操作ボタンといった2Dのユーザーインターフェース（UI）が不可欠です。しかし、3D空間内に違和感なくUIを配置するのは簡単ではありません。

Babylon.jsは、この課題を解決するためにBabylon.js GUIという専用の2D GUIライブラリを標準で提供しています。このライブラリを使うと、HTMLやCSSを使うことなく、JavaScriptのコードだけでリッチなUI要素を作成し、3Dシーンに直接描画できます。

提供されている主なUIコントロールには以下のようなものがあります。

Button: クリック可能なボタン
TextBlock: テキスト表示
InputText: テキスト入力フィールド
Checkbox, RadioButton: 選択コントロール
Slider: 値を調整するスライダー
Image: 画像表示
Rectangle, Ellipse: 図形コンテナ

これらのコントロールは、3D空間内の特定のメッシュの表面に貼り付けたり（AdvancedDynamicTexture.CreateForMesh）、常に画面の前面に表示したり（AdvancedDynamicTexture.CreateFullscreenUI）することが可能です。3DオブジェクトとUIが同じレンダリングパイプラインで処理されるため、描画の前後関係や透明度の扱いが自然になり、非常に洗練されたインタラクションを実現できます。

WebXR（VR/AR）のサポート

WebXRは、Webブラウザを通じてVR（仮想現実）およびAR（拡張現実）体験を提供するための標準APIです。Babylon.jsは、このWebXRを強力にサポートしており、比較的簡単なコードで没入型のVR/ARコンテンツを開発できます。

WebXRDefaultExperienceというヘルパー機能を使えば、わずか数行のコードで以下のような基本的なWebXR機能を実装できます。

VRヘッドセット用の表示モードへの切り替えボタン
VRコントローラーのトラッキングと入力処理
オブジェクトを選択したり掴んだりするためのポインター（レーザー）
シーン内を移動するためのテレポート機能

ARに関しても、スマートフォンのカメラ映像の上に3Dオブジェクトを重ねて表示する機能をサポートしています。これにより、例えば「自分の部屋に購入予定の家具をARで配置してみる」といったアプリケーションをWeb技術だけで開発できます。

Babylon.jsを使えば、特別なプラグインやネイティブアプリを必要とせず、URLにアクセスするだけで誰もがVR/AR体験を楽しめる、そんな未来のWebコンテンツを創造することが可能です。

開発を助ける便利なツール

Babylon.jsは、ライブラリ本体だけでなく、開発者の生産性を劇的に向上させるための優れたツール群を提供しています。特に重要なのが「Playground」と「Inspector」です。

Playground：ブラウザ上で手軽に試せる実行環境

Playgroundは、Webブラウザ上で直接Babylon.jsのコードを記述し、その結果をリアルタイムで確認できるオンラインのコードエディタ兼実行環境です。

環境構築不要: 自分のPCに何もインストールすることなく、ブラウザを開くだけでBabylon.jsのプログラミングを始められます。
即時フィードバック: コードを変更して「Run」ボタンを押すと、即座に右側のプレビュー画面に結果が反映されます。これにより、試行錯誤を高速に繰り返すことができます。
豊富なサンプル: 公式ドキュメントやコミュニティで共有されている何千ものサンプルコードがPlayground上で利用可能です。気になる機能があれば、そのサンプルを開いて実際に動かし、コードを改造してみることで、効率的に学習を進められます。
簡単な共有: 作成したコードは一意のURLで保存・共有できます。フォーラムで質問する際や、チームメンバーにデモを見せる際に非常に便利です。

Playgroundは、初心者にとって最高の学習ツールであると同時に、熟練した開発者がアイデアを素早くプロトタイピングするための強力な武器でもあります。

Inspector：デバッグに役立つ高機能ツール

Inspectorは、実行中のBabylon.jsシーンを調査し、デバッグするためのツールです。ショートカットキー（Ctrl+Shift+Alt+I）を押すだけで、シーンの横にデバッグパネルが表示されます。

Inspectorを使えば、以下のようなことが可能になります。

シーンエクスプローラー: シーン内に存在する全てのノード（カメラ、ライト、メッシュなど）を階層構造で一覧表示し、選択できます。
プロパティパネル: 選択したノードのプロパティ（位置、回転、マテリアルの色、ライトの強さなど）をリアルタイムで確認・編集できます。スライダーを動かして数値を変更すると、即座にシーンに反映されるため、パラメータの微調整に絶大な効果を発揮します。
デバッグ機能: メッシュのバウンディングボックス（境界箱）や骨格（スケルトン）を表示したり、特定のレンダリング機能をオン/オフしたりして、問題の原因を特定するのに役立ちます。
統計情報: FPS（フレームレート）や描画にかかる時間など、パフォーマンスに関する詳細な情報を表示し、最適化のボトルネックを見つける手助けをします。

Inspectorは、まるでWeb開発におけるブラウザの開発者ツール（F12）のBabylon.js版のような存在であり、複雑なシーンの構築やパフォーマンスチューニングにおいて不可欠なツールです。

Babylon.jsを始めるための環境構築

Babylon.jsを使って開発を始めるための環境設定は、驚くほど簡単です。プロジェクトの規模や目的に応じて、主に2つの方法があります。ここでは、それぞれの方法の具体的な手順と、メリット・デメリットを解説します。

CDNを利用して手軽に始める方法

CDN（Content Delivery Network）を利用する方法は、最も手軽で、初心者が学習を始めるのに最適な方法です。CDNは、世界中のサーバーにライブラリのファイルを配置し、ユーザーに最も近いサーバーから高速にファイルを配信する仕組みです。この方法なら、自分のPCにファイルをダウンロードしたり、複雑なツールをインストールしたりする必要がありません。

手順

テキストエディタでindex.htmlという名前のHTMLファイルを作成します。
以下の基本的なHTMLコードをコピー＆ペーストします。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Babylon.js CDN-Beispiel</title>
    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>

    <!-- Babylon.js Core Library -->
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <!-- Babylon.js Loaders for external models -->
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>

    <script>
        // ここにBabylon.jsのコードを記述します
        const canvas = document.getElementById("renderCanvas");
        const engine = new BABYLON.Engine(canvas, true);

        const createScene = function () {
            const scene = new BABYLON.Scene(engine);
            scene.createDefaultCameraOrLight(true, true, true);
            scene.createDefaultEnvironment();
            const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene);
            return scene;
        };

        const scene = createScene();

        engine.runRenderLoop(function () {
            scene.render();
        });

        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

このHTMLファイルをWebブラウザで開きます。
- 注意点: ローカルのHTMLファイルを直接ブラウザで開くと（file:///...）、セキュリティ上の制約から正常に動作しない場合があります。VS Codeの「Live Server」拡張機能のようなローカルWebサーバーを使って表示するのが確実です。

たったこれだけで、画面に3Dの球体が表示されるはずです。<script>タグでBabylon.jsの本体（babylon.js）と、外部モデルを読み込むためのローダー（babylonjs.loaders.min.js）をCDNから直接読み込んでいます。

メリット	デメリット
環境構築が不要で、すぐに始められる。	インターネット接続が常に必要。
HTMLファイル一つで完結するため、構造がシンプルで理解しやすい。	ライブラリのバージョン管理が手動になる。
プロトタイピングや学習用途に最適。	大規模なプロジェクトでは依存関係の管理が煩雑になる。

npmでパッケージをインストールする方法

npm (Node Package Manager) を利用する方法は、より本格的でスケーラブルなアプリケーション開発に適した方法です。npmは、JavaScriptのライブラリ（パッケージ）を管理するためのツールで、Node.jsと一緒にインストールされます。この方法では、TypeScriptを使った型安全な開発や、WebpackやViteといったモダンなビルドツールとの連携が容易になります。

前提条件

Node.jsがPCにインストールされている必要があります。公式サイトからLTS（推奨版）をダウンロードしてインストールしてください。

手順

プロジェクト用の新しいフォルダを作成し、ターミナル（またはコマンドプロンプト）でそのフォルダに移動します。
bash mkdir my-babylon-project cd my-babylon-project
npmプロジェクトを初期化します。
bash npm init -y
これにより、プロジェクトの情報を管理するpackage.jsonファイルが作成されます。
Babylon.jsのコアパッケージをインストールします。
bash npm install @babylonjs/core
3Dモデルのローダーなど、他の機能が必要な場合は、追加でパッケージをインストールします。
bash npm install @babylonjs/loaders
開発を効率化するために、ビルドツール（ここではViteを使用）とTypeScriptをインストールします。
bash npm install vite typescript --save-dev
index.htmlファイルと、TypeScriptで記述するsrc/main.tsファイルを作成します。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Babylon.js npm-Beispiel</title>
    <style>
      /* CDNの例と同じスタイル */
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script type="module" src="/src/main.ts"></script>
</body>
</html>

src/main.ts

import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
import "@babylonjs/core/Lights/Shadows/shadowGeneratorSceneComponent";

const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
const engine = new Engine(canvas, true);

const createScene = () => {
    const scene = new Scene(engine);

    const camera = new ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 10, Vector3.Zero(), scene);
    camera.attachControl(canvas, true);

    const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
    light.intensity = 0.7;

    const sphere = MeshBuilder.CreateSphere("sphere", { diameter: 2 }, scene);
    sphere.position.y = 1;

    const ground = MeshBuilder.CreateGround("ground", { width: 10, height: 10 }, scene);

    return scene;
};

const scene = createScene();

engine.runRenderLoop(() => {
    scene.render();
});

window.addEventListener("resize", () => {
    engine.resize();
});

package.jsonのscriptsに開発サーバーを起動するコマンドを追加します。
json "scripts": { "dev": "vite", "build": "vite build" },
ターミナルで以下のコマンドを実行して、開発サーバーを起動します。
bash npm run dev
ブラウザで表示されたURLにアクセスすると、3Dシーンが表示されます。

メリット	デメリット
依存関係の管理が容易になり、プロジェクトの整合性を保ちやすい。	初期設定がCDN方式よりも複雑で、Node.jsやビルドツールの知識が必要。
TypeScriptをネイティブにサポートし、型安全で保守性の高いコードが書ける。	小さなプロトタイプや学習には少し大掛かりに感じられる場合がある。
コードの分割（モジュール化）や最適化が容易で、大規模開発に向いている。

どちらを選ぶべきか？
これからBabylon.jsを学び始める方は、まずCDN方式で手軽に始めてみるのがおすすめです。Playgroundと併用しながら基本的な概念やAPIに慣れ、ある程度自信がついたら、より本格的なアプリケーション開発のためにnpm方式に移行するのがスムーズな学習パスと言えるでしょう。

Babylon.jsを構成する5つの基本要素

Engine（エンジン）、Scene（シーン）、Camera（カメラ）、Light（ライト）、Mesh（メッシュ）

Babylon.jsで3Dシーンを構築する際には、いくつかの基本的な「構成要素」が登場します。これらは、言わば3D世界を創造するための道具や材料です。ここでは、最も重要となる5つの要素について、それぞれの役割を家づくりに例えながら解説します。これらの関係性を理解することが、Babylon.jsをマスターするための第一歩です。

① Engine（エンジン）

エンジン（Engine）は、Babylon.jsのすべての動作の根幹をなす、最も重要なオブジェクトです。その主な役割は、作成した3Dシーンの情報を、ブラウザが解釈できる低レベルな描画命令（WebGL）に変換し、実際に画面に描画することです。

家づくりに例えるなら、エンジンは「現場監督兼、建設重機」のような存在です。設計図（シーン）を受け取り、それを元にクレーンやブルドーザー（WebGL API）を操作して、実際に建物を建設（描画）する役割を担います。

具体的には、エンジンはHTMLの<canvas>要素と紐付けられます。この<canvas>が、3Dコンテンツが描画されるキャンバス（建設用地）となります。開発者はエンジンを直接細かく操作することは少ないですが、すべての始まりはエンジンを生成することからスタートします。

// HTMLからcanvas要素を取得
const canvas = document.getElementById("renderCanvas");
// エンジンを初期化
const engine = new BABYLON.Engine(canvas, true);

この一行が、Babylon.jsの世界を動かすための動力源を確保する、最初のステップです。

② Scene（シーン）

シーン（Scene）は、3Dの「世界」そのものを表すコンテナ（容器）オブジェクトです。これから作成するすべての3Dオブジェクト、カメラ、ライトは、このシーンの中に追加されていきます。

家づくりで言えば、シーンは「設計図」あるいは「建築現場の空間」に相当します。どこに柱（オブジェクト）を立て、どこに窓（カメラ）を設置し、どの照明（ライト）を使うか、といったすべての情報がこのシーンに集約されます。

シーンは、重力の設定や背景色の指定、物理エンジンの有効化など、その世界全体のルールを定義する役割も持ちます。一つのアプリケーションで複数のシーンを持つことも可能で、例えばゲームのタイトル画面とプレイ画面を別々のシーンとして管理し、必要に応じて切り替えるといった使い方ができます。

// 新しいシーンを作成
const scene = new BABYLON.Scene(engine);

エンジン（現場監督）に対して、これから作る世界の設計図を渡すイメージです。シーンがなければ、オブジェクトを置く場所も、カメラで映す対象も存在しません。

③ Camera（カメラ）

カメラ（Camera）は、3Dシーンをどの視点から見るかを決定するオブジェクトです。カメラがなければ、どれだけ豪華なシーンを作っても、ユーザーは何も見ることができません。

これは非常に直感的で、家づくりにおける「住人の目」や「建築写真家のカメラ」と同じ役割です。どの部屋から、どの角度で、どれくらいの広さ（画角）で家の中を眺めるかを決めます。

Babylon.jsには、用途に応じて様々な種類のカメラが用意されています。

ArcRotateCamera: オブジェクトの周りをマウス操作でぐりぐりと回転したり、ズームイン・アウトしたりできる、最も一般的に使われるカメラです。製品ビューワーなどに適しています。
FreeCamera: FPSゲームのように、キーボードで前後左右に移動し、マウスで視点方向を操作できるカメラです。ウォークスルーコンテンツなどに適しています。
FollowCamera: 特定のオブジェクトを常に追いかけ続けるカメラです。レースゲームの三人称視点などで使われます。

// ArcRotateCameraを作成
// "camera"は名前, -Math.PI/2はα角(縦回転), Math.PI/2.5はβ角(横回転),
// 3は半径(ターゲットからの距離), (0,0,0)は注視点, sceneは所属するシーン
const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);

// カメラをcanvasの操作にアタッチ（マウス操作で動かせるようにする）
camera.attachControl(canvas, true);

カメラをシーンに追加し、ユーザーが操作できるようにすることで、初めてインタラクティブな3D体験が生まれます。

④ Light（ライト）

ライト（Light）は、シーン内を照らす光源の役割を担うオブジェクトです。現実世界と同じように、3D空間でも光がなければオブジェクトは真っ暗で何も見えません。ライトを配置することで、オブジェクトに陰影が生まれ、立体感や質感が表現されます。

家づくりにおける「太陽光」や「室内照明」がライトの役割です。どこから光が当たり、どのくらいの強さで、どんな色の光なのかを設定することで、部屋の雰囲気がガラリと変わるのと同じです。

Babylon.jsにも、様々な特性を持つライトが用意されています。

HemisphericLight: シーン全体を均一に照らす、最も基本的な環境光です。太陽光と地面からの反射光をシミュレートしたような光で、影は生成しませんが、オブジェクトが完全な暗闇になるのを防ぎます。
PointLight: 一点から全方向に光を放つ、電球のような光源です。
DirectionalLight: 太陽光のように、無限遠から平行な光線が降り注ぐ光源です。影を落とすのによく使われます。
SpotLight: 懐中電灯のように、特定の方向を円錐状に照らす光源です。

// HemisphericLightを作成
// "light"は名前, (0,1,0)は光源の方向(真上から), sceneは所属するシーン
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

少なくとも一つはライトを設置することが、オブジェクトを視認可能にするための基本となります。ライトの種類や配置を工夫することで、シーンのリアリティや雰囲気を劇的に向上させることができます。

⑤ Mesh（メッシュ）

メッシュ（Mesh）は、実際に画面に表示される3Dオブジェクトそのものです。これまでの4つの要素が世界を構成するための「舞台装置」だとすれば、メッシュは舞台に登場する「役者」や「小道具」です。

メッシュは主に2つの要素から構成されます。

ジオメトリ（Geometry）: オブジェクトの「形状」を定義する頂点データの集まりです。球、箱、円柱といった基本的な形から、複雑なキャラクターモデルまで、すべてジオメトリで表現されます。
マテリアル（Material）: オブジェクトの「見た目」や「質感」を定義します。色、テクスチャ（表面に貼り付ける画像）、光沢、透明度などを設定します。

家づくりで例えるなら、ジオメトリが「柱や壁の骨格」、マテリアルが「ペンキの色や壁紙の柄」に相当します。この二つが組み合わさって、初めて具体的な「モノ」として認識されます。

// "sphere"という名前の球体メッシュを作成
// {diameter: 2}はオプションで直径を指定, sceneは所属するシーン
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene);

Babylon.jsでは、MeshBuilderという便利な機能を使って、球（Sphere）や箱（Box）といった基本的な形状（プリミティブメッシュ）を簡単に作成できます。

これら「エンジン、シーン、カメラ、ライト、メッシュ」の5つが、Babylon.jsにおける3Dコンテンツ制作の基本セットです。この5つの関係性を念頭に置きながら、次のステップで実際のコードを見ていきましょう。

Babylon.jsの基本的な使い方3ステップ

HTMLファイルで描画エリアを用意する、JavaScriptで3Dシーンを構築する、レンダリングループで描画する

これまでに学んだ5つの基本要素が、実際のコードの中でどのように連携して3Dシーンを構築していくのかを、具体的な3つのステップに分けて解説します。この流れを理解すれば、あなたもオリジナルの3Dコンテンツ制作をスタートできます。

① HTMLファイルで描画エリアを用意する

すべての始まりは、3Dグラフィックスを描画するための「キャンバス」をWebページ上に用意することです。これは、HTMLの<canvas>要素を使って行います。

まず、基本となるHTMLファイル（例: index.html）を作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Babylon.js Basic Setup</title>
    <style>
        /* スタイルシートでcanvasのサイズを指定 */
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none; /* タッチ操作でのページのスクロールなどを防ぐ */
        }
    </style>
    <!-- CDNからBabylon.jsライブラリを読み込む -->
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
    <!-- 3Dシーンを描画するためのcanvas要素 -->
    <canvas id="renderCanvas"></canvas>

    <!-- この下にJavaScriptコードを記述する -->
    <script>
        // STEP 2 & 3 のコードはここに書きます
    </script>
</body>
</html>

このHTMLコードのポイントは以下の通りです。

<canvas id="renderCanvas">: これがBabylon.jsが描画を行うための領域です。JavaScriptからこの要素を特定できるように、id属性（ここではrenderCanvas）を付けておきます。
CSSでのサイズ指定: styleタグ内で、canvas要素がブラウザのウィンドウ全体に広がるように幅と高さを100%に設定しています。これにより、フルスクリーンの3D体験が実現できます。
<script src="...">: CDNを利用してBabylon.jsのライブラリ本体を読み込んでいます。この記述により、JavaScriptコード内でBABYLONというグローバルオブジェクトが使えるようになります。

このHTMLファイルが、3Dシーンを展示するための「ギャラリーの壁」の役割を果たします。

② JavaScriptで3Dシーンを構築する

次に、<script>タグの中にJavaScriptを記述し、3Dシーンの要素を一つずつ組み立てていきます。これは、先ほど用意したギャラリーの壁に、絵を飾っていく作業に似ています。

EngineとSceneを作成する

まず、基本要素であるエンジンとシーンを初期化します。

// STEP 1で用意したcanvas要素を取得
const canvas = document.getElementById("renderCanvas"); 
// エンジンを生成。描画コンテキストをcanvasに紐付ける
const engine = new BABYLON.Engine(canvas, true); 
// シーンオブジェクト（3D世界）を生成
const scene = new BABYLON.Scene(engine);

document.getElementById("renderCanvas")でHTML内のcanvas要素を取得します。
new BABYLON.Engine(canvas, true)で、そのcanvasを描画対象とするエンジンを生成します。
new BABYLON.Scene(engine)で、そのエンジン上で動作する新しいシーンを作成します。

これで、オブジェクトを配置するための空の3D空間が用意できました。

CameraとLightを作成する

次に、この何もない空間を観察するための「視点（カメラ）」と、オブジェクトを照らすための「光（ライト）」を設置します。

// カメラを生成し、シーンに追加
const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 10, BABYLON.Vector3.Zero(), scene);
// ユーザーがマウスでカメラを操作できるようにする
camera.attachControl(canvas, true);

// ライトを生成し、シーンに追加
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
// ライトの明るさを少し調整
light.intensity = 0.7;

BABYLON.ArcRotateCameraは、ターゲットの周りを回るカメラです。ここでは原点（BABYLON.Vector3.Zero()）を注視点とし、そこから10ユニット離れた位置に設定しています。
camera.attachControl(canvas, true)は非常に重要で、これによりマウスのドラッグでカメラを回転させたり、ホイールでズームしたりできるようになります。
BABYLON.HemisphericLightは、シーン全体を均一に照らす環境光です。ここでは真上（new BABYLON.Vector3(0, 1, 0)）から光が当たるように設定しています。

3Dオブジェクト（Mesh）を作成する

いよいよ、シーンに主役となる3Dオブジェクト（メッシュ）を配置します。ここではMeshBuilderを使って、基本的な形状である「球」と「地面」を作成してみましょう。

// 球（Sphere）メッシュを生成
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene);
// 球の位置を少し上に移動
sphere.position.y = 1;

// 地面（Ground）メッシュを生成
const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 10, height: 10}, scene);

BABYLON.MeshBuilder.CreateSphereは球体を生成する関数です。第一引数はメッシュの識別名（ユニークである必要はない）、第二引数はオプション（ここでは直径を指定）、第三引数は所属するシーンです。
sphere.position.y = 1のように、作成したメッシュのpositionプロパティを操作することで、シーン内での位置を自由に変更できます。ここではY軸方向に1ユニット上に移動させ、地面に埋まらないようにしています。
BABYLON.MeshBuilder.CreateGroundは平面の地面を生成する関数です。

これで、シーンの中にカメラ、ライト、球、地面がすべて配置された状態になりました。

外部の3Dモデルを読み込む

MeshBuilderで作成できるのは基本的な形状だけですが、Babylon.jsはBlenderなどの3Dモデリングソフトで作成された、より複雑な3Dモデルを読み込む機能も強力にサポートしています。特に、gltf/glb形式が標準的に利用されます。

// .glb形式のモデルを非同期で読み込む
// ローダーのCDNスクリプトをHTMLに追加しておく必要がある
BABYLON.SceneLoader.ImportMeshAsync("", "assets/models/", "myCoolModel.glb", scene).then((result) => {
    // 読み込みが成功したら、モデルの位置やスケールを調整
    const importedMesh = result.meshes[0];
    importedMesh.position = new BABYLON.Vector3(2, 0, 0);
});

SceneLoader.ImportMeshAsyncを使うことで、外部ファイルを非同期で読み込み、シーンに追加できます。これにより、キャラクターや建物、乗り物など、表現の幅が大きく広がります。

③ レンダリングループで描画する

ここまでの手順でシーンの準備は整いましたが、まだ画面には何も表示されません。なぜなら、シーンの状態を「1回描画して」と命令していないからです。アニメーションやインタラクションを実現するためには、シーンを連続的に、何度も再描画し続ける必要があります。この連続的な描画の仕組みを「レンダリングループ」と呼びます。

// レンダリングループを開始
engine.runRenderLoop(function() {
    // 毎フレーム、シーンを描画する
    scene.render();
});

engine.runRenderLoop()は、ブラウザが描画可能なタイミングで（通常は1秒間に60回）、引数として渡された関数を繰り返し実行します。この関数の中でscene.render()を呼び出すことで、常に最新のシーンの状態（カメラの位置、オブジェクトの動きなど）が画面に反映され、滑らかな映像となります。

最後に、ブラウザのウィンドウサイズが変更されたときに、描画も追従するようにイベントリスナーを追加しておくと、より洗練されたアプリケーションになります。

// ブラウザウィンドウのリサイズに対応
window.addEventListener("resize", function() {
    engine.resize();
});

これで、Babylon.jsで3Dシーンを表示するための基本的なコードが完成しました。「①描画エリアの用意 → ②シーンの構築 → ③レンダリングループの実行」という3ステップの流れは、Babylon.jsアプリケーションの基本骨格となるため、しっかりと覚えておきましょう。

作成できる基本的な3Dオブジェクトの種類

Babylon.jsのMeshBuilderは、プログラムで簡単に生成できる基本的な3D形状（プリミティブメッシュ）を多数提供しています。これらを組み合わせるだけでも、驚くほど多様なシーンを構築することが可能です。ここでは、特によく使われる基本的なオブジェクトの種類と、その作成方法、主なオプションについて解説します。

オブジェクト名	作成関数	主なオプション	用途例
球（Sphere）	`CreateSphere`	`diameter` (直径), `segments` (分割数)	ボール、惑星、キャラクターの頭部、パーティクル
箱（Box）	`CreateBox`	`size` (全辺), `width`, `height`, `depth`	建物、箱、壁、サイコロ、UIパネル
平面（Plane）	`CreatePlane`	`size` (全辺), `width`, `height`	壁、看板、鏡、UIの背景、画像の表示
地面（Ground）	`CreateGround`	`width`, `height`, `subdivisions` (分割数)	地面、床、地形のベース
線（Lines）	`CreateLines`	`points` (頂点配列), `colors` (色配列)	軌跡、グリッド、ワイヤーフレーム、デバッグ表示
ポリゴン（Polygon）	`CreatePolygon`	`shape` (2D頂点配列), `depth` (押し出し量)	カスタム形状の押し出し、ロゴ、歯車

球（Sphere）

球体は、ボールや惑星、キャラクターの目や頭など、様々な場面で活用される基本的な形状です。

CreateSphereで作成します。segmentsオプションは球の滑らかさを決定します。値が大きいほど頂点数が増え、滑らかになりますが、その分パフォーマンスに影響します。

// 直径2の標準的な球体
const sphere1 = BABYLON.MeshBuilder.CreateSphere("sphere1", {diameter: 2}, scene);
sphere1.position.x = -3;

// segmentsを減らしてカクカクにした球体（ミラーボールのような表現に）
const sphere2 = BABYLON.MeshBuilder.CreateSphere("sphere2", {diameter: 2, segments: 8}, scene);
sphere2.position.x = 0;

// 縦横の直径を変えてラグビーボールのような形に
const sphere3 = BABYLON.MeshBuilder.CreateSphere("sphere3", {diameterX: 3, diameterY: 1.5, diameterZ: 1.5}, scene);
sphere3.position.x = 3;

diameterX, diameterY, diameterZを個別に指定することで、楕円体を作成することも可能です。

箱（Box）

箱（直方体）は、建物や壁、家具、積み木など、人工物を表現する際に非常に役立ちます。

CreateBoxで作成します。sizeオプションは立方体の辺の長さを、width, height, depthは直方体の各辺の長さを個別に指定します。

// 一辺が2の立方体
const box1 = BABYLON.MeshBuilder.CreateBox("box1", {size: 2}, scene);
box1.position = new BABYLON.Vector3(-3, 1, 0);

// 幅・高さ・奥行きを指定した直方体（壁のような形状）
const box2 = BABYLON.MeshBuilder.CreateBox("box2", {width: 2, height: 3, depth: 0.2}, scene);
box2.position = new BABYLON.Vector3(0, 1.5, 0);

// 面ごとに異なるテクスチャを貼るためのオプション
const box3 = BABYLON.MeshBuilder.CreateBox("box3", {size: 2, faceUV: [/* UV座標の配列 */]}, scene);
box3.position = new BABYLON.Vector3(3, 1, 0);

faceUVやfaceColorsといったオプションを使えば、サイコロのように各面に異なるデザインを適用することも可能で、表現の幅が広がります。

平面（Plane）

平面は、厚みのない一枚の板です。壁や看板、鏡、または画像を表示するためのキャンバスとして利用されます。

CreatePlaneで作成します。注意点として、平面はデフォルトでXY平面（Z軸方向を向いた状態）で作成されます。地面のように使いたい場合は、後から回転させるか、CreateGroundを使用します。

// 2x2のサイズの平面
const plane = BABYLON.MeshBuilder.CreatePlane("plane", {size: 2}, scene);

// 平面はZ軸を向いているので、壁として使うために回転させる
plane.rotation.y = Math.PI / 2; // Y軸周りに90度回転
plane.position.x = -2;

sourcePlaneオプションを使えば、メッシュのどの部分を切り取って平面として使うかを指定でき、テクスチャアトラス（一枚の画像に複数のテクスチャをまとめたもの）と組み合わせて効率的な描画を行う際に便利です。

地面（Ground）

地面は、シーンの土台となる水平な平面です。CreatePlaneを回転させて作ることもできますが、CreateGroundを使えば、最初からXZ平面（Y軸方向を向いた状態）に作成されるため便利です。

CreateGroundで作成します。subdivisionsオプションは、地面をどれだけ細かく分割するかを指定します。地形を変形させたり、頂点単位で色を塗ったりする場合に、この分割数が重要になります。

// 10x10のサイズの地面
const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 10, height: 10}, scene);

// 地形を生成するために、より細かく分割した地面
const groundForHeightMap = BABYLON.MeshBuilder.CreateGroundFromHeightMap(
    "groundHM",
    "textures/heightMap.png", // ハイトマップ画像
    { width: 10, height: 10, subdivisions: 250, minHeight: 0, maxHeight: 2 },
    scene
);

さらに、CreateGroundFromHeightMapという関数を使えば、画像の色の濃淡（明暗）を標高データとして読み込み、起伏のあるリアルな地形を自動生成することもできます。

線（Lines）

線は、メッシュの軌跡を示したり、デバッグ用にワイヤーフレームを表示したり、あるいはグラフの軸を描画したりと、補助的な役割で非常に役立ちます。

CreateLinesで作成します。pointsオプションに、線をつなぐ頂点の座標をVector3の配列として渡します。

// 単純なV字型の線
const myPoints = [
    new BABYLON.Vector3(-2, 0, 0),
    new BABYLON.Vector3(0, 2, 0),
    new BABYLON.Vector3(2, 0, 0)
];

const lines = BABYLON.MeshBuilder.CreateLines("lines", {points: myPoints}, scene);

CreateLineSystemを使えば、複数の独立した線分を一つのメッシュとして効率的に描画することも可能です。例えば、座標軸のグリッドを描画するのに適しています。

ポリゴン（Polygon）

ポリゴンは、2Dの頂点配列（shape）からカスタム形状を作成し、それに厚み（depth）を与えて3Dオブジェクトに「押し出す」ことができる強力な機能です。

CreatePolygonまたはExtrudePolygonで作成します。ロゴマークや歯車、家の間取り図など、標準のプリミティブでは表現できない複雑な形状を作成する際に非常に有効です。

// 星形の2Dの頂点データ
const starShape = [
    new BABYLON.Vector3(0, 2, 0),
    new BABYLON.Vector3(0.5, 0.5, 0),
    new BABYLON.Vector3(2, 0.5, 0),
    new BABYLON.Vector3(0.8, -0.2, 0),
    new BABYLON.Vector3(1.2, -1.8, 0),
    new BABYLON.Vector3(0, -0.8, 0),
    new BABYLON.Vector3(-1.2, -1.8, 0),
    new BABYLON.Vector3(-0.8, -0.2, 0),
    new BABYLON.Vector3(-2, 0.5, 0),
    new BABYLON.Vector3(-0.5, 0.5, 0)
];

// 星形を押し出して3Dオブジェクトにする
const star = BABYLON.MeshBuilder.ExtrudePolygon("star", {shape: starShape, depth: 0.5}, scene);

これらの基本的なオブジェクトを自在に組み合わせ、位置、回転、スケール、マテリアルを調整することで、創造性の可能性は無限に広がります。まずはこれらのプリミティブに慣れることが、Babylon.jsでのモデリングの基礎となります。

さらにステップアップするための機能

基本的なオブジェクトをシーンに配置できるようになったら、次はシーンにインタラクティブ性（対話性）とダイナミズム（動き）を加えてみましょう。ここでは、ユーザーが自由に視点を変えられるようにカメラを操作する方法と、オブジェクトにリアルな物理法則を適用する方法について解説します。

カメラを自由に操作する

これまでの例でcamera.attachControl(canvas, true)という一行を何気なく使ってきましたが、これはBabylon.jsが提供する強力なカメラコントロール機能の入り口です。この一行だけで、ユーザーはマウスやタッチ操作で直感的にカメラを動かせるようになります。

ArcRotateCameraの操作:
- 回転: マウスの左ボタンをドラッグ（またはタッチでスワイプ）すると、注視点を中心にカメラが回転します。
- ズーム: マウスホイールを回転（またはピンチイン・アウト）すると、注視点に近づいたり遠ざかったりします。
- パン（平行移動）: マウスの右ボタンや中央ボタンをドラッグ（または2本指でスワイプ）すると、カメラが上下左右に平行移動します。

これらのデフォルトの操作は非常に便利ですが、アプリケーションの要件に合わせて挙動をカスタマイズすることも重要です。

// ArcRotateCameraのカスタマイズ例
const camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);

// ユーザーがカメラを操作できるようにする
camera.attachControl(canvas, true);

// ズームできる距離の範囲を制限する (3から20まで)
camera.lowerRadiusLimit = 3;
camera.upperRadiusLimit = 20;

// 見下ろせる角度と見上げられる角度を制限する（真上や真下に行き過ぎないように）
camera.lowerBetaLimit = 0.1;
camera.upperBetaLimit = Math.PI / 2;

// カメラの回転やズームの速度を調整
camera.angularSensibilityX = 2000; // 横回転の感度
camera.angularSensibilityY = 2000; // 縦回転の感度
camera.wheelPrecision = 50; // ホイールでのズームの感度

このように、カメラのプロパティを調整することで、ユーザー体験を細かく制御できます。例えば、製品ビューワーでオブジェクトが画面外に消えてしまわないようにズーム範囲を制限したり、ウォークスルーで壁を突き抜けないようにカメラの移動範囲を制限したりすることが可能です。

一方、FreeCamera を使えば、FPSゲームのような一人称視点の操作を実現できます。

// FreeCameraのセットアップ
const camera = new BABYLON.FreeCamera("freeCamera", new BABYLON.Vector3(0, 1, -10), scene);
camera.attachControl(canvas, true);

// キーボードでの移動速度を設定
camera.speed = 0.2;

// カメラの向きをキーボードでも操作できるようにする（デフォルトは無効）
camera.keysUp.push(87);    // W
camera.keysDown.push(83);  // S
camera.keysLeft.push(65);  // A
camera.keysRight.push(68); // D

FreeCameraは、デフォルトでマウスの移動で視点方向が、矢印キーで前後左右の移動ができます。上記のようにkeysUpなどの配列にキーコードを追加することで、WASDキーでの操作にも対応させられます。

物理演算でリアルな動きをつける

静的なシーンに命を吹き込む最も効果的な方法の一つが、物理演算の導入です。Babylon.jsでは、外部の物理エンジン（HavokやCannon.jsなど）とシームレスに連携できます。ここでは、比較的導入が簡単なCannon.jsプラグインを例に説明します。

ステップ1: 物理エンジンのプラグインを読み込む
CDNを利用する場合は、HTMLにCannon.jsのスクリプトタグを追加します。

<script src="https://cdn.babylonjs.com/cannon.js"></script>

ステップ2: シーンで物理演算を有効化する
JavaScriptコードで、シーンに対して物理演算を有効化し、重力などを設定します。

// Cannon.jsプラグインのインスタンスを作成
const cannonPlugin = new BABYLON.CannonJSPlugin();
// シーンで物理演算を有効化し、プラグインと重力を設定
scene.enablePhysics(new BABYLON.Vector3(0, -9.81, 0), cannonPlugin);

new BABYLON.Vector3(0, -9.81, 0)は、地球の重力（Y軸のマイナス方向）をシミュレートしています。

ステップ3: メッシュに物理的な性質（Impostor）を与える
物理演算の影響を受けさせたい各メッシュに対して、PhysicsImpostorを設定します。これは、メッシュに「物理的な体」を与えるようなものです。

// 球体に物理的な性質を与える
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene);
sphere.position.y = 5; // 初期位置を空中に
sphere.physicsImpostor = new BABYLON.PhysicsImpostor(
    sphere, 
    BABYLON.PhysicsImpostor.SphereImpostor, // 物理形状は球
    { mass: 1, restitution: 0.8 }, // 質量1, 反発係数0.8
    scene
);

// 地面に物理的な性質を与える
const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 10, height: 10}, scene);
ground.physicsImpostor = new BABYLON.PhysicsImpostor(
    ground,
    BABYLON.PhysicsImpostor.BoxImpostor, // 物理形状は箱（平面でも可）
    { mass: 0, restitution: 0.9 }, // 質量0で固定, 反発係数0.9
    scene
);

重要なパラメータ:

第一引数: PhysicsImpostorを適用するメッシュオブジェクト。
第二引数: 物理的な形状のタイプ。メッシュの見た目と合わせるのが基本です（SphereImpostor, BoxImpostorなど）。
第三引数（オプション）:
- mass: 質量。0に設定すると、そのオブジェクトは重力などの影響を受けず、他のオブジェクトから押されても動かない静的なオブジェクトになります（地面や壁など）。0より大きい値を設定すると、動的なオブジェクトになります。
- restitution: 反発係数。0は全く跳ね返らず、1はエネルギーを失わずに完全に跳ね返ります。ゴムまりのようなオブジェクトは高い値を設定します。
- friction: 摩擦係数。値が大きいほど、オブジェクトが滑りにくくなります。

この設定だけで、レンダリングループが実行されると、球は自動的に重力に従って落下し、地面に衝突してバウンドします。複数の箱を積み上げて、そこに球をぶつけて崩す、といったドミノ倒しのようなシミュレーションも簡単に作成できます。

物理演算を使いこなすことで、単なる視覚的な表現を超えた、ユーザーのアクションにリアルに反応するインタラクティブな世界を構築することが可能になります。

まとめ

本記事では、Webブラウザで3Dコンテンツを制作するための強力なJavaScriptフレームワーク「Babylon.js」について、その概要から主な特徴、そして具体的な使い方までをステップバイステップで解説してきました。

Babylon.jsの要点を改めて振り返ってみましょう。

Babylon.jsは、複雑なWebGLを意識することなく、直感的なJavaScriptコードで高品質な3Dシーンを構築できるフレームワークです。
Microsoftが主導するオープンソースプロジェクトであり、信頼性と将来性が高く、活発なコミュニティと豊富なドキュメントに支えられています。
物理ベースレンダリング（PBR）による高性能な描画エンジン、標準で統合された物理エンジンやGUIライブラリ、WebXR（VR/AR）サポートなど、オールインワンで多機能な点が大きな魅力です。
PlaygroundやInspectorといった強力な開発支援ツールが、学習とデバッグの効率を飛躍的に高めてくれます。
制作の基本は「エンジン、シーン、カメラ、ライト、メッシュ」という5つの要素で構成され、「①HTMLで描画エリアを用意 → ②JSでシーンを構築 → ③レンダリングループで描画」という3ステップで進められます。

Babylon.jsは、その多機能さから一見すると学習範囲が広く感じられるかもしれません。しかし、本記事で紹介した基本的な概念と使い方をしっかりと押さえれば、驚くほど簡単に3Dの世界に第一歩を踏み出すことができます。

ここから先、あなたが挑戦できることは無限に広がっています。作成したオブジェクトに複雑なアニメーションをつけたり、ユーザーのクリックに反応してオブジェクトが動くようにしたり、物理演算を使ってリアルなシミュレーションを作成したり、さらにはVR/ARコンテンツの開発に挑戦したりと、様々な応用が可能です。

次の一歩として、まずはBabylon.js公式サイトの「Playground」を訪れ、様々なサンプルコードを実際に動かしてみることを強くお勧めします。人のコードを少し書き換えてみて、その変化を観察することが、最も効果的な学習方法の一つです。この記事が、あなたの創造性豊かな3DWebコンテンツ制作のきっかけとなれば幸いです。

Babylon.js入門 初心者向けの基本的な使い方をわかりやすく解説