みなさんベクトルをプログラムで活用していますか？ 学校で学んで以来、縁が無くなってしまった人も多いかと思いますが、実は3Dコンテンツの制作においてベクトルは非常に役に立つ概念なんです。本記事ではThree.jsとベクトルの基礎である足し算・引き算を使った座標の計算方法を紹介します。
ベクトルと聞くだけで拒絶してしまう人もいるかと思いますが、心配することはありません。Three.jsが煩わしい計算を全ておこなってくれるので、ベクトルの性質だけ覚えてしまえば誰でも扱えるようになります。基本からおさらいし、実際にThree.jsでどのようにベクトルを扱っていくか学んでいきましょう。
ベクトルを使った3Dのデモの紹介
本題に入る前にベクトルを使ったデモを作成したので紹介します。今回は以下のような物体を追従するカメラをベクトルを使って実装しています。サンプルコードもGitHubにアップしているので参考ください。
※このデモはThree.js(r84)で作成しています。
ベクトルのおさらい
ベクトルを知っている人も知らない人もベクトルおさらいをしましょう。まずは三次元ではなく二次元で解説していきます。
そもそもベクトルとは？
ベクトルは向き、量の２つの情報を持っています。矢印でイメージする場合、矢印の向きが向き情報、長さが量を示します。
位置ベクトル
本来ベクトルは位置情報を持っていませんが、原点(0, 0)から伸びているベクトルは座標を示す事ができるため、そういったベクトルを位置ベクトルと言います。
ベクトルの足し算
点O(0, 0)、点A(2, 0)、点B(1, 1)の三点が存在するとします。この時、点Oから点Aを結ぶベクトルをOAベクトルとし、点Oから点Bを結ぶベクトルをOBベクトルとします。この時OAベクトルとOBベクトル足すと以下の図のようなOCベクトルになります。
OBベクトルをOAベクトルの先端までずらし、その時のOAベクトルの開始点とOBベクトルの先端を結ぶベクトルが和になります。これをThree.jsを使ったコードで表すと以下のようになります。
var vOA = new THREE.Vector2(2, 0); var vOB = new THREE.Vector2(1, 1); var vOC = vOA.add(vOB);
和を求める場合はTHREE.Vector2クラスに用意されているadd()メソッドを使います。
ベクトルの引き算
足し算の時と同様のOAベクトルとOBベクトルで考えていきます。OAベクトルからOBベクトルを引くと以下のようなOCベクトルになります。
引き算の場合はまずOBベクトルの向きを反転させます。あとは足し算と同様の考え方で差を表現できます。これをThree.jsを使ったコードで表すと以下のようになります。
var vOA = new THREE.Vector2(2, 0); var vOB = new THREE.Vector2(1, 1); var vOC = vOA.sub(vOB);
差を求める場合はTHREE.Vector2クラスに用意されているsub()メソッドを使います。
次のページではThree.jsでのベクトルの実践的な使い方を解説します。
