Three.js

【Three.js】WordPressの記事内で、Three.jsの3Dオブジェクトを表示する方法

どうも、とがみんです。

最近は「Three.js」を利用して、3Dオブジェクトを作ったりしています。

この記事では、そのようなJavaScriptを利用して書いたコードをWordPresの記事内に表示する方法について紹介していきます。

今回は例として、「Three.js」を利用し、3Dオブジェクトの立方体を表示していきます。

Three.jsの3DオブジェクトをWordPressに表示

以下のボタンを押すと、立方体が記事中に表示されます。これを実装する方法について紹介していきます。

ちなみに、ボタンを押してから動作するようにしているのは、記事の読み込み速度を速めるためです。

ボタンを押してから、読み込むことによって、記事自体の読み込み速度に影響を与えないようにしています。


3Dオブジェクトの表示方法

CSS & JavaScript Toolboxプラグインのインストール

まずは「CSS & JavaScript Toolbox」プラグインをインストールし有効化します。

このプラグインを利用することによって、WordPressのテンプレートを直接編集することなく、指定したページのヘッダーorフッターにPHPやHTML/CSS、JavaScriptのコードを挿入することができるようになります。

有効化が完了したら、「CSS & JavaScript Toolbox」プラグインの管理画面にいき、InstallStartNew Code Blockにてコードを作成します。
ここで、挿入したいコードや、挿入する対象の記事を選択していきます。


Three.jsの読み込み

「Three.js」の読み込みを行います。

プログの「Three.js」というカテゴリ内の記事と、この記事にのみ適応させたいので、そのページや、カテゴリを指定し、以下のコードを書き込みます。

Detector.jsの読み込み

同様にして、以下のコードも導入します。以下のコードは「Three.js」を利用して3Dオブジェクトを表示するにあたって、

表示ブラウザがWebGLに対応しているかどうかを判断するためのコードです。

3Dオブジェクトを記事内に表示

これで、3Dオブジェクトを表示するための環境が揃ったので、最後に立方体を表示するコードを読み込んで行きます。

以下のコードを導入します。導入する記事はこのページだけなので、読み込むページは、このページのみを指定します。

記事編集画面にて、3Dオブジェクトを表示させたい場所に以下のコードを書き込みます。

これで、上記のように、ボタンを押すと立方体が現れるようになります。

まとめ

WordPressの記事の中に、「Three.js」を利用して作成した立方体を表示する方法について紹介しました。

参考文献

WordPress:特定の記事の中でThree.jsを使う方法