前回記事で WebGLテンプレート の使い方を覚えました。
今回はWebGLプレイヤーの埋め込みと、WebGLプレイヤーをクリックしてから読み込む設定を紹介します。
こちらの記事のとおり。
WebGLプレイヤーをGitHub Pagesで公開する方法はこちら。
ポイントは以下の2点です。
このサンプルでは、あらかじめ TemplateData フォルダに格納した jQuery を使っています。jQuery は保存せずに、公開されている URL を指定して外部から読み込ませてもよいようです。軽量(数十KB)だからね。
また、ボタンのファイル名など書き換えている箇所があるので、使う場合は適宜編集してください。
今回は以上です。
今回は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プレイヤーをブログに埋め込めると、いろんな使い方ができそうです。簡単な技術紹介で、画像や動画で説明する代わりに、実際に動作するものを触ってもらったり、とか。今回は以上です。
コメント