チュートリアル: Babylon.js を使用して最初の WebXR アプリケーションを作成する

[アーティクル]
03/21/2023

このチュートリアルでは、Babylon.js および Visual Studio Code を使用して、基本的な Mixed Reality アプリを作成する方法について説明します。ビルドするアプリでは、キューブがレンダリングされ、他の面が表示されるようにキューブを回転させ、操作を追加することができます。このチュートリアルでは、以下の内容を学習します。

開発環境をセットアップする
基本的な3D 要素を作成するための Babylon.js API
新しい Web ページを作成する
3D 要素を操作する
Windows Mixed Reality シミュレーターでアプリケーションを実行する

前提条件

WebXR でサポートされているブラウザー (例: Microsoft Edge)
babylon.js 4.2 以上
NodeJS
省略可能: Windows 10 Creator Update (Windows Mixed Reality シミュレーターを使用する場合)
省略可能: Windows Mixed Reality シミュレーター

作業の開始

このプロジェクトを最初から作成するには、最初に Visual Studio Code (VSCode) プロジェクトから始めます。

Note

VSCode の使用は必須ではありませんが、チュートリアルでは便宜上使用します。経験豊富な JavaScript 開発者は、最も単純なメモ帳を含め、選択した他の任意のエディターを使用できます。

Babylon.js 単一ファイルをダウンロードするか、公式の Babylon.js Web サイトに置かれているオンラインバージョンを使用します。また、Babylon.js プロジェクト全体を GitHub から複製することもできます
空のファイルを作成し、それを HTML ページ (たとえば index.html) として保存します

基本的な HTML マークアップを作成し、Babylon.js JavaScript ファイルを参照します。最終的なコードを次に示します。

<html>
    <head>
        <title>Babylon.js sample code</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
    </head>
<body>
</body>
</html>

"キャンバス" HTML 要素を本文内に追加して、Babylon.js のコンテンツをレンダリングします。キャンバスには id 属性が含まれているので、後で JavaScript からこの HTML 要素にアクセスできます。

<html>
    <head>
        <title>Babylon.js sample code</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
<body>
    <canvas id="renderCanvas"></canvas>
</body>
</html>

キャンバスは Web ページ全体を占めます。これにより Web ページが完成します。この時点で Web ページの準備ができています。イマーシブエクスペリエンスはまだありませんが、任意のブラウザーでこれを開き、エラーが表示されていないかを確認できます。

次のステップ

次のチュートリアル: 2. シーンを準備する

チュートリアル: Babylon.js を使用して最初の WebXR アプリケーションを作成する

前提条件

作業の開始

次のステップ

その他のリソース