objson.js リファレンス

概要

OBJ 形式のファイルを読み込んで JSON 形式に変換するライブラリです。

かの有名な three.js には様々な形式のファイルローダーが付属しており、当然 OBJ 形式もサポートしています。比較的扱いやすい構造の OBJ 形式は、three.js 以外にも多数のモデリングソフトがサポートしている汎用性の高い 3D モデルファイルフォーマットです。

当サイトのオリジナルライブラリとなる objson.js は、XMLHttpRequest なり File API なりを使って取得した OBJ 形式のデータを JSON 形式に変換します。戻り値は JSON のソースを文字列として返す形なので JSON.Parse などを使って展開してやってください。

このライブラリをほぼ完成させたときに、@yomotsu さんに three.js でも OBJ 読めますよー と教えていただきました。もっと早いうちに知っていれば参考にできたのですが、ほぼ完成してしまっていたのでそのまま公開することにしました。当方で確認したところでは、OBJ 形式として基本的なルールを守っているファイルであれば問題なく変換できるようですが、不具合ありましたら教えていただけますと幸いです。

ちなみに、mtl ファイルに関しては未対応です。また、法線が含まれていない OBJ 形式のファイルに関しては法線情報を頂点位置から自動的に算出します。プリミティブ形状は必ずしも三角形でなくても読み込めるように設計しました。

デモンストレーション

以下のリンクから、実際に objson.js を利用したデモページを閲覧できます。

input 要素から受け取ったファイルを解析して OBJ 形式から JSON 形式へと変換します。さらに、その JSON データを読み込んでレンダリングします。レンダリングには基本的なライティングのみ利用しており、正しく法線が出力されているのかなどをチェックできます。ちなみにテクスチャは仮にテクスチャ座標データがあっても貼られません。

また、デモページ内には iframe が置かれており、そこに変換した JSON データを出力するようになっています。簡易なコンバータとしても利用できます。

解説

以下、ライブラリに含まれる関数の解説です。

※テキストの最後にファイルへのリンクがあります

objsonConvert 関数

構文

string objsonConvert(string source)

第一引数:source:文字列の OBJ ソース

上記の構文の見たまんまで、引数に OBJ 形式の文字列データを渡すだけです。

戻り値は文字列データで、そのまま JSON としてパースできます。JSON データの中身は、おおよそ以下のような構造になります。

{
	"vertex": vertex count,
	"face": face count,
	"position":[
		posX, posY, posZ,
		...
	],
	"normal":[
		norX, norY, norZ,
		...
	],
	"texCoord":[
		texS, texT,
		...
	],
	"index":[
		index1, index2, index3,
		...
	]
}

上記のうち texCoord だけは元になった OBJ ファイルにテクスチャ座標が含まれる場合のみ出力されます。同様に法線が含まれていない場合もあるかと思いますが、法線に関しては自動的に計算されます。

vec3Normalize 関数

三つの要素からなるベクトルを受け取り正規化します。戻り値も同様にベクトルを表す配列として返します。

構文

vec3 vec3Normalize(vec3 v[, int d])

第一引数:v:正規化する三つの要素を持つ配列(ベクトル)

第二引数:d:法線の小数点以下の桁数 ※省略可

faceNormal 関数

三つのベクトルを受け取り、面法線を算出します。面法線は正規化された状態になります。

構文

vec3 faceNormal(vec3 v0, vec3 v1, vec3 v2)

第一引数~第三引数:vn:面を構成する頂点の座標位置(三つの要素を持つ配列)

ダウンロード

以下のリンクから、javascript ファイル本体をダウンロードできます。

entry

PR

press Z key