EaselJS用のVector3Dクラスを作ったよ

3Dの勉強も兼ねて、EaselJS用のVector3Dクラスを作ってみました。Vector3D for EaselJSは、JavaScriptファイルを読み込むだけで、EaselJSにActionScript3.0と同様のVector3Dクラスを追加することができます。ライセンスフリーで公開していますので、商用であっても無料でお使い頂けます。

Vector3D for EaselJS ダウンロード

下記のリンクより、EaselJSにVetor3Dクラスを追加するvector3d.jsをダウンロードして頂けます。ライセンスフリーですので、商用でも無料でお使い頂けます。

vector3d.jsの読み込み

Vector3Dクラスを使用するには、HTMLのhead領域で下記のように記述し、vector3d.jsのJavaScriptファイルを読み込みます。これでEaselJSでもActionScript3.0と同様のVector3Dクラスが使えるようになります。

HTML

<script type="text/javascript" src="js/easeljs-0.5.0.min.js"></script>
<script type="text/javascript" src="js/vector3d-1.0.0.js"></script>

Vector3Dインスタンスの生成

Vector3Dインスタンスを生成するには、コンストラクタの引数で(x, y, z)座標を渡します。引数を省略した場合、各値は0となります。ActionScript3.0と同様にオプションの第4引数でwプロパティを指定することもできます。

JavaScript

var v1 = new createjs.Vector3D(50, 100, -50);
console.log(v1.toString()); // 出力:[Vector3D (x=50 y=100 z=-50)]

ベクトルの長さを取得する getLength(), getLengthSquared()

ベクトルの長さを取得するには、getLength()を使用します。ActionScript3.0では、lengthプロパティとして定義されていますが、JavaScriptでは古いブラウザでアクセサがサポートされていないため、メソッドとして定義しています。

また、ベクトルの長さの2乗を取得するgetLengthSquared()もメソッドとして定義しています。getLengthSquared()は、内部の処理でMath.sqrt()を使用しないため、getLength()よりも高速に動作します。

追記 2013/12/10

Vector3D for EaselJS ver1.1.0では、lengthとlengthSquaredをgetterで定義しました。そのため、lengthとlengthSquaredは、AS3と同様に読み取り専用のプロパティとして使用できます。v1.1.0では、getLength()とgetLengthSquared()は、Deprecated(将来廃止予定)となりますので、ご注意下さい。

JavaScript

var v1 = new createjs.Vector3D(10, 10, 10);
console.log(v1.getLength()); // 出力:17.320508075688775
console.log(v1.getLengthSquared()); // 出力:300

ベクトルが等しいかを判別する equals(), nearEquals()

equals()は、現在のVector3Dインスタンスのベクトルと第1引数で渡されたVector3Dインスタンスのベクトルが等しいかをBool値で返します。オプションの第2引数で比較にwプロパティを含めるかをBool値で指定できます。

nearEquals()は第1引数で比較対象のVector3Dインスタンス、第2引数で許容値を指定することで、2つのベクトルがほぼ等しいかを判別できます。各プロパティの差が、第2引数で指定した許容値未満であればtrueを返します。オプションの第3引数で比較にwプロパティを含めるかをBool値で指定できます。

JavaScript

var v1 = new createjs.Vector3D(50, -100, -50);
var v2 = v1.clone();
var v3 = new createjs.Vector3D(50.99, -99.01, -49.01, 0.99);
console.log(v1.equals(v2)); // 出力:true
console.log(v1.nearEquals(v3, 1, true)); // 出力:true

ベクトルを加算する add()

add()は、現在のベクトルに引数で渡されたVetor3Dインスタンスのベクトルを加算し、新しいVector3Dインスタンスとして返します。元のVector3Dインスタンスは変更されません。

JavaScript

var v1 = new createjs.Vector3D(50, -100, 100);
var v2 = new createjs.Vector3D(100, 50, -50);
var v3 = v1.add(v2);
console.log(v3.toString()); // 出力:[Vector3D (x=150 y=-50 z=50)]

ベクトルを減算する subtract()

subtract()は、現在のベクトルから引数のVector3Dインスタンスのベクトルを減算して、新しいVector3Dインスタンスとして返します。元のVector3Dインスタンスは変更されません。

JavaScript

var v1 = new createjs.Vector3D(50, -100, 100);
var v2 = new createjs.Vector3D(100, 50, -50);
var v3 = v1.subtract(v2);
console.log(v3.toString()); // 出力:[Vector3D (x=-50 y=-150 z=150)]

ベクトルを正規化する normalize()

normalize()は、ベクトルを正規化して単位ベクトルに変換します。単位ベクトルとは長さが1のベクトルで、単位ベクトルを求める演算を正規化といいます。

JavaScript

var v1 = new createjs.Vector3D(100, -50, 10);
var length = v1.normalize();
console.log(length); // 出力:112.24972160321825
console.log(v1.toString()); // 出力:[Vector3D (x=0.8908708063747479 y=-0.44543540318737396 z=0.0890870806374748)]

内積を求める dotProduct()

dotProduct()は、現在のベクトルと引数で渡されたVector3Dインスタンスのベクトルとの内積を数値で返します。

JavaScript

var v1 = new createjs.Vector3D(10, 10, 10);
var v2 = new createjs.Vector3D(-5, -5, -5);
v1.normalize();
v2.normalize();
var dotProduct = v1.dotProduct(v2);
console.log(dotProduct); // 出力:-1

外積を求める crossProduct()

crossProduct()は、現在のベクトルと引数で渡されたVector3Dインスタンスのベクトルとの外積をVector3Dインスタンスで返します。

JavaScript

var v1 = new createjs.Vector3D(5, 5, 0);
var v2 = new createjs.Vector3D(0, 5, 5);
var crossProduct = v1.crossProduct(v2);
console.log(crossProduct.toString()); // 出力:[Vector3D (x=25 y=-25 z=25)]

その他の定義済みメソッド・定数

上で紹介した以外にも下記メソッド・定数をActionScript3.0と同様にお使い頂けます。引数や戻り値もActionScript3.0に合わせているので、詳しい使い方についてはActionScript3.0のリファレンスをご覧頂くと良いかもしれません。

なお、X_AXIS, Y_AXIS, Z_AXISに関しては定数のように定義していますが、JavaScriptでは定数がサポートされていないので実際にはstatic変数となります。上書きが可能である点にはご注意下さい。

  • negate()
  • scaleBy()
  • project()
  • incrementBy()
  • decrementBy()
  • setTo()
  • copyFrom()
  • clone()
  • Vector3D.distance()
  • Vector3D.angleBetween()
  • Vector3D.X_AXIS
  • Vector3D.Y_AXIS
  • Vector3D.Z_AXIS