スポンサーリンク

3次元の回転行列(オイラー角)で画像を回転させる (roll pitch yaw)【JS】

スポンサーリンク
JavaScript
スポンサーリンク

スポンサーリンク

概要

JavaScriptを用いて、3次元の回転行列で画像を回転させるサンプルを紹介します。

3次元の回転行列

任意の軸周りの回転行列は次の式で表すことができます。

各軸周りの回転行列は以下の式で表します。



回転行列 フリー百科事典『ウィキペディア(Wikipedia)』 より

オイラー角 - Wikipedia

回転行列のサンプルコード

const sin = (x) => { return Math.sin(x); }
const cos = (x) => { return Math.cos(x); }
const tan = (x) => { return Math.tan(x); }

function rotation(x, y, z, a, b, c) {
	var R = [
		[cos(b) * cos(c) - sin(a) * sin(b) * sin(c), -cos(a) * sin(c), sin(b) * cos(c) + sin(a) * cos(b) * sin(c)],
		[cos(b) * sin(c) + sin(a) * sin(b) * cos(c), cos(a) * cos(c), sin(c) * sin(b) - sin(c) * cos(b) * cos(c)],
		[-cos(a) * sin(b), sin(a), cos(a) * cos(b)]
	]

	var _x = x * R[0][0] + y * R[0][1] + z * R[0][2];
	var _y = x * R[1][0] + y * R[1][1] + z * R[1][2];
	var _z = x * R[2][0] + y * R[2][1] + z * R[2][2];

	return [_x, _y, _z];
}

画像を回転させるデモ

外部リンクで開く

結果



参考

ローリング - Wikipedia
オイラー角 - Wikipedia
ロドリゲスの回転公式 - Wikipedia
回転 (rotation)
http://camphor.wpblog.jp/2015/05/17/%E4%B8%89%E6%AC%A1%E5%85%83%E5%A7%BF%E5%8B%A2%E8%A1%A8%E7%8F%BE%EF%BC%88%E3%82%AA%E3%82%A4%E3%83%A9%E3%83%BC%E8%A7%92%EF%BC%89/
JavaScript画像処理
スポンサーリンク
スポンサーリンク
スポンサーリンク
404 Motivation Not Found

コメント

  1. My Homepage より:

    … [Trackback]

    […] There you will find 39413 more Infos: tech-blog.s-yoshiki.com/2019/01/929/ […]

タイトルとURLをコピーしました