チュートリアル: Babylon.js を使用して WebXR でピアノをビルドする

実際の世界でピアノを構築するには、多くの時間、スキル、材料が必要です。 VR/AR の世界のために構築する場合はどうでしょうか。

このチュートリアルシリーズでは、Babylon.js を使用して、仮想世界で機能する 88 キーのスタンドアップピアノを含むMixed Reality Web アプリを作成する方法について説明します。完成したアプリでは、ピアノにテレポートし、Mixed Reality コントローラーを使用してキーを再生できます。

このチュートリアルシリーズでは、次の方法を学習します。

メッシュを作成、配置、マージしてピアノキーボードを構築する
スタンドアップピアノフレームの Babylon.js モデルをインポートする
各ピアノキーにポインター操作を追加する
WebXR でテレポートとマルチポイントのサポートを有効にする

前提条件

インターネットに接続されているコンピューター
JavaScript の基本的な知識
WebXR Javascript Hello World チュートリアル
WebXR でサポートされるブラウザー (Microsoft Edge など)
Babylon.js 4.2 以上
VR ヘッドセットまたは Windows Mixed Reality シミュレーター
省略可能: Windows Mixed Reality シミュレーターを使用する場合は、Creator Update をWindows 10します

はじめに

まず、Babylon.js シーンを含む HTML Web ページを設定します。

babylonjs-piano-tutorial という名前のフォルダーを作成し、Visual Studio Code でフォルダーを開きます。

注:

任意のコードエディターを使用してフォローできますが、便宜上、このチュートリアル全体で Visual Studio Code を使用します。

フォルダー内に、index.htmlという名前のファイルを作成し、以下のテンプレートをファイルに挿入します。

<html>
    <head>
        <title>Piano in BabylonJS</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
    <body>
        <canvas id="renderCanvas"></canvas>
        <script type="text/javascript">
            const canvas = document.getElementById("renderCanvas"); 
            const engine = new BABYLON.Engine(canvas, true); 

            createScene(engine).then(sceneToRender => {
                engine.runRenderLoop(() => sceneToRender.render());
            });

            // Watch for browser/canvas resize events
            window.addEventListener("resize", function () {
                engine.resize();
            });
        </script>
    </body>
</html>

このテンプレートの内容に関する詳細な説明が必要な場合は、このチュートリアルの前提条件である「Hello World チュートリアル」を参照してください。

ブラウザーでこのファイルを開こうとすると、 createScene() 関数が見つからないことを示すエラーがコンソールに表示されます。このエラーを解決するには、次のセクションで createScene() 関数を実装します。

シーンを設定する

index.htmlと同じフォルダーに、という名前の別のファイルscene.js作成します。シーンの設定とピアノの作成に関連するすべての javascript コードをこのファイルに格納します。
createScene() 関数を scene.jsに追加してみましょう。
```
const createScene = async function(engine) {
    const scene = new BABYLON.Scene(engine);
    return scene;
}
```
createScene()非同期関数を作成することに注意してください。その理由を知るためにお楽しみに。
次に、シーンを見えるようにするために、ライトとカメラが必要です。 createScene()関数を更新します。
```
const createScene = async function(engine) {
    const scene = new BABYLON.Scene(engine);

    const alpha =  3*Math.PI/2;
    const beta = Math.PI/50;
    const radius = 220;
    const target = new BABYLON.Vector3(0, 0, 0);

    const camera = new BABYLON.ArcRotateCamera("Camera", alpha, beta, radius, target, scene);
    camera.attachControl(canvas, true);

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

    return scene;
}
```
ここでは ArcRotateCamera を作成しました。この ArcRotateCamera は、ほぼ完全に下向きを指し、空間の原点をターゲットとしています。作成したライトは、空を指す半球光であり、アンビエント空間をシミュレートするのに役立ちます。また、強度を下げることで、ライトを少し暗くしました。

カメラとライトを作成する方法の更新プログラムが必要な場合は、次の手順に進む前に、Hello World チュートリアルシリーズの [シーンの準備] セクションを見直してください。
最後に、WebXR プラットフォーム用に開発しているため、return scene;する前に次の行を挿入して、シーン内の XR エクスペリエンスを有効にする必要があります。
```
const xrHelper = await scene.createDefaultXRExperienceAsync();
```
javascript では、関数内のasync関数でawait キーワード (keyword)を使用するには、親関数もasyncする必要があります。そのため、createScene関数を非同期として定義しました。このチュートリアルシリーズの後半では、この xrHelper を使用して、Babylon.js でサポートされているさまざまな WebXR 機能を有効にして構成します。

完了した scene.js は次のようになります。

const createScene = async function(engine) {
    const scene = new BABYLON.Scene(engine);

    const alpha =  3*Math.PI/2;
    const beta = Math.PI/50;
    const radius = 220;
    const target = new BABYLON.Vector3(0, 0, 0);

    const camera = new BABYLON.ArcRotateCamera("Camera", alpha, beta, radius, target, scene);
    camera.attachControl(canvas, true);

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

    const xrHelper = await scene.createDefaultXRExperienceAsync();

    return scene;
}

これで作業createScene()関数が作成されたので、scene.jsファイルをスクリプトとして読み込んで、createScene()関数がindex.htmlで認識されるように index.htmlしましょう。 html ファイルの <header> セクションに次のコード行を追加します。

<html>
    <head>
        <title>Piano in BabylonJS</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="scene.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
    <body>
        <canvas id="renderCanvas"></canvas>
        <script type="text/javascript">
            const canvas = document.getElementById("renderCanvas");
            const engine = new BABYLON.Engine(canvas, true); 

            createScene(engine).then(sceneToRender => {
                engine.runRenderLoop(() => sceneToRender.render());
            });

            // Watch for browser/canvas resize events
            window.addEventListener("resize", function () {
                engine.resize();
            });
        </script>
    </body>
</html>

ブラウザー でindex.html を開くと、前に表示されたエラーメッセージが表示されなくなり、ページに空の Babylon.js シーンが表示されます。

次の手順

次のチュートリアル: 3D ピアノモデルを構築する

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-12-03