チュートリアル - 3DなBackgroundコンテンツを作ってみる 5/5 – PlayCanvas

3DコンテンツをWebページの背景に使うには

作った3Dコンテンツを自身が作成しているWebページなどでも使いたい！
という場合があると思います。

Publishで発行されたURLを使ってiframeで表示することもできますが、
せっかくならCanvasで使用したいなどあると思います。

その場合は、Publishではなく、ZIP Downloadを行います。

Downloadをクリックしてzipファイルをダウンロードします。

zipファイルの中は以下の画像のようになってます。
※2020/12/01現在のzipファイルの中身のため、updateによって変わる可能性がありますのでご注意ください。

index.htmlがあるのが確認できます。
これをブラウザで開くと、PlayCanvasのコンテンツをPublishした状態のものが確認できます。

webサーバーを所持していれば試しに任意の場所にzipを解答したファイル群をアップロードしてみましょう。

アップロードして、そのアップロードした場所にブラウザからアクセスしてみましょう。

index.htmlにアクセスすることでコンテンツが動いていることが確認できたと思います。

ファイルを見てみよう

index.htmlの中身を見てみましょう

<!doctype html>
<html>
<head>
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' />
    <meta charset='utf-8'>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="manifest" href="manifest.json">
    <style></style>
    <title>3D Background</title>
    <script src="playcanvas-stable.min.js"></script>
    <script src="__settings__.js"></script>
</head>
<body>
    <script src="__modules__.js"></script>
    <script src="__start__.js"></script>
    <script src="__loading__.js"></script>
</body>
</html>

見てわかると思いますが、以下のファイルが使用されています。

styles.css

全体表示のためのhtml,bodyへのstyleとcanvasのstyleを指定。
canvasのclass名については __start__.js で処理している。

playcanvas-stable.min.js

Downloadした時点でのPlayCanvasエンジンのjsファイル。
これがないとPlayCanvasは動かない。

settings.js

使用するjsonファイルや他設定についてをここで管理している。
ammo.jsやconfig.jsonなどをここで指定する。

modules.js

使用しているmodule周りを処理してくれる。

start.js

PlayCanvasコンテンツを描画させるためにCanvasをcreateElementsしたり、__settings__.jsで設定した内容からコンテンツを描画処理する。

loading.js

__start__.jsでコンテンツを読み込んでいる間のロード画面を表示してくれる。
見慣れたPlayCanvasのロゴとプログレスバーが表示される画面はここで処理している。

PlayCanvasコンテンツだけを使いたい場合はここから以下のファイルを使う必要があります。

実際にWebページに組み込んでみる

今回のディレクトリ構成は以下のようにします。

この場合、以下にアクセスすることで、背景がPlayCanvasコンテンツになっているWebページを開くことになります。
↓
https://xxxxxxxxx.xxx/playcanvas/

ここでは静的なファイルでファイルの追加場所を指定します。

    ~~~
		// headタグ内終わりに以下を追加
		<script src="./3dbg/playcanvas-stable.min.js"></script>
		<script src="./3dbg/__settings__.js"></script>
	<head>
  <body>
		~~~ // PlayCanvasコンテンツを表示させたい場所に用意
		<canvas id="pc-scene" class="pcCanvas"></canvas>~~~ // htmlタグの終わりに以下を追加
	</body>
	<script src="./3dbg/__modules__.js"></script>
	<script src="./3dbg/__start__.js"></script>
	<script src="./3dbg/__loading__.js"></script>
</html>

ここのcanvasタグのstyleは以下のようにすると背景をcanvas前面にすることができます。

.pcCanvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

使うためにいくつかのファイルを書き換える必要があります。

__start__.js の冒頭部分を以下に書き換え

(function () {
    var CANVAS_ID = 'pc-scene'; // id名はhtml

    var canvas, devices, app;

    var createCanvas = function () {
        canvas = document.getElementById(CANVAS_ID);
        // canvas = document.createElement('canvas');
        // canvas.setAttribute('id', CANVAS_ID);
        canvas.setAttribute('tabindex', 0);
        // canvas.style.visibility = 'hidden';

        // Disable I-bar cursor on click+drag
        canvas.onselectstart = function () { return false; };

        // document.body.appendChild(canvas);

        return canvas;
    };

__settings__.js を以下のように書き換え

ASSET_PREFIX = "./3dbg/"; // jsonやassetsディレクトリの場所
SCRIPT_PREFIX = "./3dbg/"; // jsの場所
SCENE_PATH = "1043626.json"; // ASSET_PREFIXの中のsceneのjson
CONTEXT_OPTIONS = {
    'antialias': true,
    'alpha': false,
    'preserveDrawingBuffer': false,
    'preferWebGl2': true,
    'powerPreference': "default"
};
SCRIPTS = [ 39077956, 39078579, 39082407, 39082516 ]; // assets内のファイル
CONFIG_FILENAME = "./3dbg/config.json"; // config.jsonはパスを指定
INPUT_SETTINGS = {
    useKeyboard: true,
    useMouse: true,
    useGamepads: false,
    useTouch: true
};
pc.script.legacy = false;
PRELOAD_MODULES = [
    {'moduleName' : 'Ammo', 'glueUrl' : 'files/assets/39082285/1/ammo.wasm.js', 'wasmUrl' : 'files/assets/39082286/1/ammo.wasm.wasm', 'fallbackUrl' : 'files/assets/39082284/1/ammo.js', 'preload' : true},
];

これで該当のページである https://xxxxxxxxx.xxx/playcanvas/ を開いてみましょう。

背景がPlayCanvasコンテンツになっているのが確認できたらOKです。

もし確認できなければ、この処理以外のstyleの指定の問題かもしれません。
styleについては調整すれば問題なくなると思いますが、script周りのエラーの場合はパスの指定などが間違えていないか確認ください。

今回は静的なページでの導入を行ってみましたが、
next.jsやnuxt.jsなどフレームワークを組み合わす場合でも方法はだいたい同じになります。

また、REST APIを用いて必要ファイルを引っ張って用いることも可能です。
https://developer.playcanvas.com/ja/user-manual/api/

うまく使いこなして、Webページをよりリッチにしましょう！