Chapter 03

1-02 : あなたの web サイトをかっこよくしよう

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

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

👀 このページの要点 3 行

  1. 自分の web ページで 3D モデルを表示させたいとき
  2. HTML ページの <script> 要素にビューアのコードを追加する
  3. そして <babylon> 要素にモデルのパスを記載

🌏 First Model on a Web Page (はじめての web ページに載せるモデル)

Babylon.js が認識するファイルタイプであれば、Babylon.js ビューアを使って、<babylon> 要素を使い、シーンやモデルを Web ページに表示することができます。

適切なファイルタイプの例としては、.babylon.gltf.glb があり、.glb を推奨します。

シーンが Babylon.js で作成されたものであろうと、お気に入りのデザイン・ソフトウェアで作成されたものであろうと、違いはありません。

<babylon> 要素は、そのコンテナに合わせてサイズが調整されます。

ビューアを使用するには、HTML ページの <script> 要素にビューアライブラリを読み込む処理を追加する必要があります。

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

これが追加されたら、適切なコンテナに <babylon> 要素を配置し、その model 属性にファイルのパスを指定します。

<babylon model="ファイルのパス"></babylon>

👀 サンプルページ

以下の動作サンプル web ページは こちら で確認できます。


https://doc.babylonjs.com/webpages/page1

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Babylon.js Viewer 1 Example</title>
    <!-- ビューアライブラリの読み込み -->
    <script src="https://cdn.babylonjs.com/viewer/babylon.viewer.js"></script>
    <!-- stylesheet などの記載略 -->
</head>
<body>
    <div id = "header">
        Viewer News
    </div>
    <div class= "cell babylon">
        <!-- モデルファイル .glb 読み込み & ビューアの機能で表示 -->
        <babylon model="https://assets.babylonjs.com/meshes/box.glb"></babylon>
    </div>
    <div class = "cell">
        Lorem ipsum dolor sit amet,(サンプルテキスト)
    </div>
    <div class= "cell">
        Lorem ipsum dolor sit amet,(サンプルテキスト)
    </div>
    <div class= "cell">
        Lorem ipsum dolor sit amet,(サンプルテキスト)
    </div>
    <div class= "cell">
        Lorem ipsum dolor sit amet,(サンプルテキスト)
    </div>
    <div class= "cell">
        Lorem ipsum dolor sit amet,(サンプルテキスト)
    </div>
</body>

☞ 次

作成したモデルをゲームやアプリケーションとして web ページで使用したい場合、まずモデルの読み込み方法を知る必要があります。(次のページで解説します)