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

2016.02.04

WordPressで記事内にThree.jsを使用したコンテンツを表示する方法をご紹介します

テーマをそのまま使用しているなど、なるべくfunction.phpなどテンプレートのソースコードをいじりたくない場合も多いです。
今回ご紹介するのはフリーのプラグイン導入により、管理画面のみでThree.jsを使用し表示出来るようにする方法です。
もちろん、Three.js意外でも応用により他のJSプラグインなどにも使うことが出来ます。

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

まずはWordPressにフリーのプラグインCSS & Javascript Toolboxをインストールします。
このプラグインによってテンプレートを直接編集することなく、指定ページのヘッダーかフッターにPHP/HTML/JS/CSSのコードを挿入出来るようになります。

インストールが完了したら、有効化します。

プラグインの管理画面に行き、まずはデータベースの用意をするため、そのまま[Install]→[Start]をクリックしましょう。
[New Code Block]にてコードを作り管理していきます。
Nameは適当に、Location Hookは配置箇所(ヘッダーorフッター)、Initial Block Positionは配置箇所(ヘッダーorフッター)の中での順番です。

CSS & Javascript Toolbox自体の使い方は簡単ですので割愛しますが、右側のメニューの言語選択に関わらず<script>タグや<style>タグの記述は必要ですのでお忘れなく。

JavaScriptライブラリを設置

使用するライブラリをそのままコピペしましょう。
今回は以下の3つのThree.jsのコードを登録しました。

ライブラリ名	機能	場所
three.js	Three.jsメインファイル	ヘッダー
OrbitControls.js	コントロール用	ヘッダー
Detector.js	ブラウザがWebGL使用可能か判定	ヘッダー

ただ、three.jsのような長いソースは途中で切れてしまい全て登録できなかった（フリー版だから？）ので、今回はCDNのソースへのリンクにしました。

このブログの場合、three.jsカテゴリーページには全て読み込ませたいため、Categoriesでthree.jsを選択しています。

自作コードを設置して動かしてみる

いよいよ自作コードも登録して動かしてみましょう。
最後に読み込ませたいのでフッターへ指定します。
今回は下記のコードを登録し、Postsでこの記事名を指定しています。

<style>
#canvas-area {
  display: none;
}
</style>
<script>
(function($) {
  var $btn, $container, canW, canH, scene, camera, renderer;
  function init() {
    $btn.hide();
    $container.show();

    //リサイズ対応
    var queue = null, // キューをストック
    var wait = 300; // 0.3秒後に実行の場合
    window.addEventListener('resize', function() {
      clearTimeout(queue);
      queue = setTimeout(function() {
        // リサイズ時に行う処理
        canW = $container.width(); //canvas横:任意値
        canH = canW * 0.5625; //canvas縦:任意値
        camera.aspect = canW / canH;
        camera.updateProjectionMatrix();
        renderer.setSize(canW, canH);
      }, wait);
    }, false);

    canW = $container.width();
    canH = canW * 0.5625;
    var container = $container[0];
    if (!Detector.webgl) Detector.addGetWebGLMessage({
      parent: container
    });

    //レンダラー
    renderer = new THREE.WebGLRenderer({ antialias: true});
    renderer.setSize( canW, canH);
    container.appendChild(renderer.domElement);

    //シーン
    scene = new THREE.Scene();

    // CAMERA:透視投影 
    camera = new THREE.PerspectiveCamera(60, canW / canH, 1, 1000);
    scene.add(camera);
    camera.position.set(20, 20, 60);
    
    //オブジェクト
    var material = new THREE.MeshLambertMaterial({
      color: 0xFFB855
    });
    var mesh = new THREE.Mesh(new THREE.TorusKnotGeometry(20, 2, 128, 4, 4, 3), material);
    scene.add(mesh);

　　//ライト
    var light = new THREE.DirectionalLight(0xffffff);
    light.position.set(40, 40, 40).normalize();
    scene.add(light);
    scene.add(new THREE.AmbientLight(0x333333));
    scene.matrixAutoUpdate = false;

    //コントローラー 
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.maxDistance = 5000;
    controls.maxPolarAngle = Math.PI * 0.48;

    //軸
    var axis = new THREE.AxisHelper(3000);
    scene.add(axis);
    rendering();
  }

  function rendering() {
    requestAnimationFrame(rendering, renderer.domElement);
    renderer.render(scene, camera);
  }

  $(function() {
    $btn = $("#demo-btn");
    $container = $("#canvas-area");
    $btn.on("click", init);
  });
}(jQuery));
</script>

<style>

#canvas-area {

display: none;

}

</style>

(function($) {

var $btn, $container, canW, canH, scene, camera, renderer;

function init() {

$btn.hide();

$container.show();

//リサイズ対応

var queue = null, // キューをストック

var wait = 300; // 0.3秒後に実行の場合

window.addEventListener('resize', function() {

clearTimeout(queue);

queue = setTimeout(function() {

// リサイズ時に行う処理

canW = $container.width(); //canvas横:任意値

canH = canW * 0.5625; //canvas縦:任意値

camera.aspect = canW / canH;

camera.updateProjectionMatrix();

renderer.setSize(canW, canH);

}, wait);

}, false);

canW = $container.width();

canH = canW * 0.5625;

var container = $container[0];

if (!Detector.webgl) Detector.addGetWebGLMessage({

parent: container

});

//レンダラー

renderer = new THREE.WebGLRenderer({ antialias: true});

renderer.setSize( canW, canH);

container.appendChild(renderer.domElement);

//シーン

scene = new THREE.Scene();

// CAMERA:透視投影

camera = new THREE.PerspectiveCamera(60, canW / canH, 1, 1000);

scene.add(camera);

camera.position.set(20, 20, 60);

//オブジェクト

var material = new THREE.MeshLambertMaterial({

color: 0xFFB855

});

var mesh = new THREE.Mesh(new THREE.TorusKnotGeometry(20, 2, 128, 4, 4, 3), material);

scene.add(mesh);

　　//ライト

var light = new THREE.DirectionalLight(0xffffff);

light.position.set(40, 40, 40).normalize();

scene.add(light);

scene.add(new THREE.AmbientLight(0x333333));

scene.matrixAutoUpdate = false;

//コントローラー

controls = new THREE.OrbitControls(camera, renderer.domElement);

controls.maxDistance = 5000;

controls.maxPolarAngle = Math.PI * 0.48;

//軸

var axis = new THREE.AxisHelper(3000);

scene.add(axis);

rendering();

}

function rendering() {

requestAnimationFrame(rendering, renderer.domElement);

renderer.render(scene, camera);

}

$(function() {

$btn = $("#demo-btn");

$container = $("#canvas-area");

$btn.on("click", init);

});

}(jQuery));

</script>

ソースコードで気を付ける点としては、以下の2点があります。

WebGLに対応していない環境用に、レンダリング前にDetector.jsを使い
if(!Detector.webgl) Detector.addGetWebGLMessage({parent:container});
を入れること
WebGLの処理は重い為、最初は表示させずに任意でボタンを押してもらってから表示させる事

記事編集へ移りテキストエディタで、表示したい箇所に以下のタグを配置します。

<div id="canvas-area"></div>

1	<div id="canvas-area"></div>

表示させるボタンを配置します。

<button id="demo-btn">PLAY DEMO</button>

1	<button id="demo-btn">PLAY DEMO</button>

DEMOを見る

以上の作業で下のボタンを押せばthree.jsのコンテンツが表示されると思います。

ブログの記事の中でこのようなインタラクティブ性のあるコンテンツがあると、見る人をかなり引き付けることが出来ます。
ちなみにこのやり方であれば、Three.jsだけでなくAngular.jsや他のJSライブラリも同様に、特定のページのみで使えます。

今すぐ問い合わせる

滝沢デザインに
無料相談

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

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

JavaScriptライブラリを設置

自作コードを設置して動かしてみる

DEMOを見る

関連記事