以前のやり方
WebGLを試す
WebGLというのはブラウザ上で3DCGを表示させるための仕様です。 JavaScriptを使ってOpenGL ESを使えるようにすると考えて良いようです。 使うにはcanvas要素を取得して、そこからOpenGL ES 2.0のレンダリン...
freelyapps.net
2018.01.15
でWebGLを記事に埋め込んでみました。このときはテキストエディタでソースコードをそのまま書いていました。WordPressは文章を書くためのものなので、ソースをWordPress上で書くのは非常に不向きでした。書いたとおりにならないというのが最も向いていないところでした。
canvas要素を書き、スクリプトを外部から読み込む
canvas要素だけ書いてスクリプトを外部にする方も考えました。しかし、それだとIDを入れないとだめでどこかで重複する可能性が残ります。（ブログの記事のいくつかの本文が同時に表示されるようなテーマを使うとそこでぶつかります。）
IDの重複を防ぐためには、IDを長くしたり、他では絶対使わないものにしたりする必要があります。それは結構大変だと思います。
iframeで別のHTMLファイルを埋め込む
私はこの方法が良いかと思います。
あるHTMLファイルにWebGL用のcanvasを置き、それをスクリプトで処理するようにします。これは完全に独立しているわけです。それを埋め込めばWordPressによって作られるHTMLと依存することがないはずです。デメリットは少し大きめの領域を取ってやっているため、無駄に大きめの枠が表示されてしまうのがいまいちです。
iframeはHTMLページを埋め込んでしまうタグです。
サンプルは以前の記事に載っていたものとほぼ同じです。クリアする色が緑になっているだけです。
埋め込まずリンクを張る
WebGLのコンテンツを表示するなら、専用のHTMLファイルを作りそこへのリンクを張っておくだけの方が簡単でいいだろうと思います。
上の緑になっているだろうサンプルファイルのリンクを張っておきます。
コメント