前回記事で WebGLテンプレート の使い方を覚えました。

今回はWebGLプレイヤーの埋め込みと、WebGLプレイヤーをクリックしてから読み込む設定を紹介します。


完成形

まずは完成形。こうなります。



  • ブログにWebGLプレイヤーを埋め込んでいます
  • ブログのページを開くと同時にWebGLプレイヤーの読み込みを開始してしまうと、ページの読み込みが重くてひっかかる感じになってしまうので、WebGLプレイヤーの箇所をクリックしてから読み込むようにしています


ページにWebGLプレイヤーを埋め込む設定

こちらは簡単。ブログなどのページのHTMLに、以下のように追記すればOKのようです。

<iframe width="幅の数値" height="高さの数値" src="WebGLプレイヤーを公開しているURL" frameborder="0" allowfullscreen></iframe>

こちらの記事のとおり。

WebGLプレイヤーをGitHub Pagesで公開する方法はこちら。


クリックしてからWebGLプレイヤーを読み込む設定

こちらの記事のとおりで、できました。

ポイントは以下の2点です。
  • WebGLプレイヤーを読み込む処理を関数にして、クリック時に関数を実行する
  • WebGLプレイヤー読み込み前に最大化ボタンを押すとエラーになるので、WebGLプレイヤー読み込み後に最大化ボタンを表示する。jQueryを使って実装している


サンプルコード

WebGLテンプレート の index.html のサンプルはこちら。


このサンプルでは、あらかじめ TemplateData フォルダに格納した jQuery を使っています。jQuery は保存せずに、公開されている URL を指定して外部から読み込ませてもよいようです。軽量(数十KB)だからね。
また、ボタンのファイル名など書き換えている箇所があるので、使う場合は適宜編集してください。


まとめ

WebGLプレイヤーをブログに埋め込めると、いろんな使い方ができそうです。簡単な技術紹介で、画像や動画で説明する代わりに、実際に動作するものを触ってもらったり、とか。


今回は以上です。