PlayCanvas

PlayCanvasでつくったプロジェクトをブログに埋め込んで動作させる方法

この記事はPlayCanvas | GWアドベントカレンダー 5日目の記事です。

Anim State Graph Blending | Learn PlayCanvas 2022 04 29 20 00 05

Anim State Graph Blending | Learn PlayCanvas

PlayCanvasのTutorialsを見ると、記事の一番上にPlayCanvasのアプリケーションが表示されており、キー入力をすることで実際に動きます。

自分のブログにも、作成したPlayCanvasのプロジェクトを動くような形で埋め込むにはどうするのだろう?と疑問がわきました。

Tutorialsのサイトを調べてみる

Anim State Graph Blending | Learn PlayCanvas 2022 04 29 20 04 29

Tutorialsのサイトを調べたところ、読み込み時に”__start__.js”と”__loading__.js”というjsファイルを読み込んでいるので、なんとかできるかなと思ったのですが、いろいろ調べていくうちに、

<iframe src=“https://playcanv.as/p/YXUqIb2J/”></iframe>

なんと、自分のPublishしたプロジェクトのURLをiframeで囲むだけで埋込ができることがわかりました。

iframeのサイズの変更は?

そのままだと、埋め込んだiframeはwidht 300pxぐらいで小さかったので、PlayCanvasJPのSlackで質問したところ、

Slack | プロジェクト相談 | PlayCanvasJP 2022 04 29 20 10 19

はがさんから、こちらの回答を頂きました。

なるほど、たしかに!

はがさん、ありがとうございます!

PlayCanvasでつくったプロジェクトをブログに埋め込んで動作させる方法

結論としては、

<iframe width="720px" height="300px" style="border: none" src="https://playcanv.as/p/YXUqIb2J/"></iframe>

と記載することで、

↑ このように埋め込むことができます。

なるほどー

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

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です