PlayCanvas

さくらVPSのサーバーでダウンロードしたPlayCanvasのプロジェクトを公開する方法

この記事は、
さくらのゴールデンカレンダー2022 | GWアドベントカレンダー 5日目
事務所デジタルツインプロジェクト-PlayCanvas/Babylonjs | GWアドベントカレンダー 6日目
PlayCanvas | GWアドベントカレンダー 10日目

の記事です。

現在、会社の事務所をVR上で作成し、照明や設備を連動させるデジタルツインをやろうとしており、VRのアプリケーションとしてPlyaCanvasというJavaScriptのフレームワークを使っています。

PLAYCANVAS | 日本公式サイト

で、このPlayCanvas、サービス側でEditorや実行環境があるのですが、動作ファイルをダウンロードして自分のサーバーなどに設置し実行することができます。

そももそ、PlayCanvasは、html、css、JavaScriptがあればよいので、レンタルサーバーでも動くのですが、今回、さくらのVPS上でPlayCanvasを動かすということを試して無事に動かすことができたので方法を紹介したいとおもいます。

* 来年はConoHaさんもぜひGWアドベントカレンダーやってください。

PlayCanvasについて

PLAYCANVAS | 日本公式サイト 2022 05 02 22 19 11

こちらがPlayCanvasのサイトです。

PLAYCANVAS | 日本公式サイト

SIGN UPしてLOGINすると、自分のProjectが作れるのですが、操作方法については日本語のチュートリアルがあるので、そちらをご覧ください。

チュートリアル – PlayCanvasの基本操作 2020 – 1/7 – PlayCanvas

PlayCanvasのプロジェクトをダウンロード

Office Digital Twin ver2 | Editor 2022 05 02 22 22 38

ここでは、自分でプロジェクトをつくったとして、上の”Publish/Download”をクリックします。

Office Digital Twin ver2 | Editor 2022 05 02 22 27 20

DOWNLOAD ZIPをクリック。

Office Digital Twin ver2 | Editor 2022 05 02 22 28 52

DOWNLOADします。

Playcanvas data 2022 05 02 22 30 33

プロジェクトのzipファイルがダウンロードできました。

さくらVPS

サーバー選択  さくらのVPS  コントロールパネル 2022 05 02 22 34 28

サーバー追加します。テストであれば1GBでよいでしょう。

サーバー設定  さくらのVPS  コントロールパネル 2022 05 02 22 36 35

CentOSのStream9を選択。

サーバー設定  さくらのVPS  コントロールパネル 2022 05 02 22 40 07

スタートアップスクリプトはLAMPにしました。(PHPは使わないけど)

サーバー設定  さくらのVPS  コントロールパネル 2022 05 02 22 41 39

SSHキーを登録。

支払い方法  さくらのVPS  コントロールパネル 2022 05 02 22 43 13

さくらVPSは2台まで2週間のお試し利用ができます。これでサーバーを申し込み。

完了  さくらのVPS  コントロールパネル 2022 05 02 22 44 58

SSHで接続

サーバーが立ち上がったらSSHで接続します。

Centos ik1 432 48233 ~ 2022 05 02 22 59 54

まずはログインできるか確認。問題なければログアウト。

Centos ik1 432 48233 ~ 2022 05 02 23 02 41

SCPで先程ダウンロードしたPlayCanvasプロジェクトのZIPファイルをアップロードします。

Centos ik1 432 48233 ~ 2022 05 02 23 10 10

そのままだと、unzipが入っていないのでインストールします。

# sudo yum install zip
Centos ik1 432 48233 ~ 2022 05 02 23 12 36

/var/www/htmlにzipファイルをコピーします。

Html 2022 05 02 23 13 58

Htmlフォルダーに移動したら、unzip。

あ、sudo が必要でした。

Html 2022 05 02 23 15 32

これでPlayCanvasを動作させるのに必要なファイルがhtmlフォルダに展開されました。

ブラウザから確認

Office Digital Twin ver2 2022 05 02 23 17 19

ブラウザでこのサーバーのIPアドレスを入力すると、無事に自分がつくったPlayCanvasのプロジェクトが動いているのが確認できました。

まとめ

PlayCanvasは手軽にWeb上でVRを構築するのにとても便利なフレームワークです。

また、html、CSS、JavaScriptのファイルがあれば動作するので、自分で環境をつくってサクッと動作させることもできます。

まだまだ自分も勉強中ですが、公開するのに必要は環境や手間のハードルが低いので、趣味や仕事にと、今後もいろいろ使えそうです。

ABOUT ME
中畑 隆拓
スマートライト㈱ 代表取締役。IoTソリューションの開発、スマートホーム&オフィスのコンサルティング、DALI,KNX,EnOceanなどのインテグレーションを行っています。

COMMENT

メールアドレスが公開されることはありません。