Fresopiya
場所にもお金にも時間にも、何にも縛られない自由な状態になったら一体人間は何をしてどこに向かうのか。

まずはとにかく自由を目指すエンジニアのブログです。
「哲学」と「プログラミング」と「政治経済」、「ブログ」がメインになるかと。
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を使う方法