この記事は、
さくらのゴールデンカレンダー2022 | GWアドベントカレンダー 5日目
事務所デジタルツインプロジェクト-PlayCanvas/Babylonjs | GWアドベントカレンダー 6日目
PlayCanvas | GWアドベントカレンダー 10日目
の記事です。
現在、会社の事務所をVR上で作成し、照明や設備を連動させるデジタルツインをやろうとしており、VRのアプリケーションとしてPlyaCanvasというJavaScriptのフレームワークを使っています。
で、このPlayCanvas、サービス側でEditorや実行環境があるのですが、動作ファイルをダウンロードして自分のサーバーなどに設置し実行することができます。
そももそ、PlayCanvasは、html、css、JavaScriptがあればよいので、レンタルサーバーでも動くのですが、今回、さくらのVPS上でPlayCanvasを動かすということを試して無事に動かすことができたので方法を紹介したいとおもいます。
* 来年はConoHaさんもぜひGWアドベントカレンダーやってください。
PlayCanvasについて
こちらがPlayCanvasのサイトです。
SIGN UPしてLOGINすると、自分のProjectが作れるのですが、操作方法については日本語のチュートリアルがあるので、そちらをご覧ください。
チュートリアル – PlayCanvasの基本操作 2020 – 1/7 – PlayCanvas
PlayCanvasのプロジェクトをダウンロード
ここでは、自分でプロジェクトをつくったとして、上の”Publish/Download”をクリックします。
DOWNLOAD ZIPをクリック。
DOWNLOADします。
プロジェクトのzipファイルがダウンロードできました。
さくらVPS
サーバー追加します。テストであれば1GBでよいでしょう。
CentOSのStream9を選択。
スタートアップスクリプトはLAMPにしました。(PHPは使わないけど）
SSHキーを登録。
さくらVPSは２台まで２週間のお試し利用ができます。これでサーバーを申し込み。
SSHで接続
サーバーが立ち上がったらSSHで接続します。
まずはログインできるか確認。問題なければログアウト。
SCPで先程ダウンロードしたPlayCanvasプロジェクトのZIPファイルをアップロードします。
そのままだと、unzipが入っていないのでインストールします。
# sudo yum install zip
/var/www/htmlにzipファイルをコピーします。
Htmlフォルダーに移動したら、unzip。
あ、sudo が必要でした。
これでPlayCanvasを動作させるのに必要なファイルがhtmlフォルダに展開されました。
ブラウザから確認
ブラウザでこのサーバーのIPアドレスを入力すると、無事に自分がつくったPlayCanvasのプロジェクトが動いているのが確認できました。
まとめ
PlayCanvasは手軽にWeb上でVRを構築するのにとても便利なフレームワークです。
また、html、CSS、JavaScriptのファイルがあれば動作するので、自分で環境をつくってサクッと動作させることもできます。
まだまだ自分も勉強中ですが、公開するのに必要は環境や手間のハードルが低いので、趣味や仕事にと、今後もいろいろ使えそうです。
