Three.jsでWebGL(1)

WebGLを使うにはThree.jsが良いと聞いたのでいじってみる

ダウンロード

three.jsの'download'からzipファイル一式を解凍

まずは

• build/three.min.js ... three.jsメイン
• examples/js/libs/tween.min.js ... アニメーション用
• examples/js/controls/TrackballControls.js ... マウスコントロール用
  をいじってみる。three.jsの初期化方法はthree.js webglあたりで検索すると出てくるサンプルがたくさん出てくるので省略

サンプル

• マウスで視点変更
• 起動時にランダムの場所から開始点に画像が移動
• 画像とマウスの衝突判定
• 判定後に画像拡大

が200行くらいのスクリプトでできました。すごいねthree.js

以下、ちょっとハマった部分

マウスで視点変更

‘TrackControls.js‘のTHREE.TrackballControlsを起動する

controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 0.5;
controls.minDistance = 500;
controls.maxDistance = 6000;
controls.noRotate = false; //trueで回転操作を不可にする
controls.addEventListener('change', render);

画像の読み込み

ImageUtils.loadTextureで画像を読み込んでTHREE.MeshBasicMaterialでマテリアル化してTHREE.PlaneGeometryで平面を作成してTHREE.Meshで画像を平面に貼り付ける

var texture = new THREE.ImageUtils.loadTexture('sample.png');
var material = new THREE.MeshBasicMaterial({ map: texture });
material.side = THREE.DoubleSide; // 裏も見えるようにする
var geometry = new THREE.PlaneGeometry(300, 300);
object = new THREE.Mesh(geometry, material);

起動時に中心にアニメーション

‘tween.js‘を使う。beforeとafterの位置や視点を用いて以下のように書くだけ。本当に楽チンです

// beforeの座標
object.position.x = Math.random() * 4000 - 2000;
object.position.y = Math.random() * 4000 - 2000;
object.position.z = Math.random() * 4000 - 2000;
// afterの座標
target = new THREE.Object3D();
target.position.x = 0;
target.position.y = 0;
target.position.z = 0;
// 変換
new TWEEN.Tween(object.position)
    .to({ x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration)
    .easing(TWEEN.Easing.Exponential.InOut)
    .start();

画像とマウスの衝突判定

参考：http://www.yomotsu.net/wp/?p=600
衝突判定はテンプレートがある模様

// var objectsにobjectの配列が入る
var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
projector.unprojectVector(vector, camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(objects);
if (intersects.length > 0) {
   // ... intersects[0]に衝突した先頭のobjectが入る
}

判定後に画面拡大

上記衝突判定後にtween.jsの機能を利用した以下のような関数を用意する

// obj:選択されたオブジェクト, e:マウスin時にtrue,mouseout時にfalse
function selectObject(obj, e) {
    if (obj) {
        if (e === true) {
            // サイズを大きくする
            new TWEEN.Tween(interesectedObject.scale)
            .to({ x: 1.4, y: 1.4, z: 1.4 }, 60)
            .start();
        } else {
            // サイズを元に戻す
            new TWEEN.Tween(interesectedObject.scale)
            .to({ x: 1, y: 1, z: 1 }, 60)
            .start();
        }
    }
}