今年、最初のブログです。
前回の「3Dを基礎から勉強する 複数モデルの表示」から２ヶ月経ってしまいましたが、また再開したいと思います。
jsdo.itにて、han.kuroさんが馬の3Dモデルにてアニメーション表示していたのを見かけました。
プログラムも3Dライブラリーを使わないで自前で表示していたので、参考にするには丁度いいと思いました。
馬の3Dモデルデータだけ拝借して、アニメーション表示させるだけなら大分前に出来てたわけです。
この馬の3Dモデルデータは、Three.jsサンプルにあるデータであることが分かりまして、早速ダウンロードして見てみました。
「horse.js」でJSONデータになっていまして、参考にしたjsdo.itの馬の3Dモデルデータは必要部分のみ切り取ったデータになっていたわけです。
この段階でブログを書けばよかったんですが、欲を書いてJSONデータを読み込んで表示させようと思ってやり始めたところで急にやる気が停滞してしまい正月休みでやっと復活したところです。
プログラムの大まかなところは「複数モデルの表示」の応用です。違いはThree.jsサンプルにあるデータを使用したところにあります。
今回は、その部分について書いていきます。
ラジオボタンでモデルの種類を選びます。選択したモデルのJSONデータをロードします。
わざわざ連想配列にしているのは、jsdo.itではファイルをアップロードするとそれぞれにURLを割り当てられるため、
jsdo.itに投稿する際、例えば"horse.js"は"http://jsrun.it/assets/7/7/Y/3/77Y3s"に書き換えます。
changeModelData() {
var dict: { key?: string; } = {};
dict["horse"] = "horse.js";
dict["flamingo"] = "flamingo.js";
dict["stork"] = "stork.js";
dict["parrot"] = "parrot.js";
for (var i = 0; i < this.elmModels.length; i++) {
var elm: HTMLInputElement = <HTMLInputElement>this.elmModels[i];
if (elm.checked) {
this.index = 0;
this.frameCount = 0;
this.JSONLoader(dict[elm.value], (() => this.onJSONLoaded()));
break;
}
}
}
JSONLoader(file, callback: Function) {
var x = new XMLHttpRequest();
x.open('GET', file);
x.onreadystatechange = () => {
if (x.readyState == 4) {
this.json = JSON.parse(x.responseText);
callback();
}
}
x.send();
}
「horse.js」を例にするとアニメーションに必要なのは、"morphTargets"内の"horse_A_001"～"horse_A_015"にある各頂点データとなります。
頂点データは複数ですが面データは1つです。今回は色も付けるようにしたので"morphColors"から色データを取得しています。
色データはRGBの順に入っていますが値は0.0～1.0までの浮動小数点となっていますので、255倍して16進で格納するようにしています。
createModel(modelObject: any) {
this.modelData = new ModelData();
this.modelData.vertices = new Array();
if (modelObject.morphTargets !== undefined) {
this.animeLength = modelObject.morphTargets.length;
for (var j = 0; j < this.animeLength; j++) {
this.modelData.vertices[j] = new Array();
for (var i = 0; i < modelObject.morphTargets[j].vertices.length; i++) {
this.modelData.vertices[j].push(modelObject.morphTargets[j].vertices[i]);
}
}
}
else {
this.animeLength = 1;
this.modelData.vertices[0] = new Array();
for (var i = 0; i < modelObject.vertices.length; i++) {
this.modelData.vertices[0].push(modelObject.vertices[i]);
}
}
this.modelData.faces = new Array();
for (var i = 0; i < modelObject.faces.length; i++) {
this.modelData.faces.push(modelObject.faces[i]);
}
this.hasColor = false;
if (modelObject.morphColors !== undefined) {
this.hasColor = true;
this.modelData.colors = new Array();
for (var i = 0; i < modelObject.morphColors[0].colors.length; i+=3) {
var r: number = modelObject.morphColors[0].colors[i + 0];
var g: number = modelObject.morphColors[0].colors[i + 1];
var b: number = modelObject.morphColors[0].colors[i + 2];
this.modelData.colors.push(this.getColorHexString(r,g,b));
}
}
}
THREE.jsのモデルデータがどうなっているのかのを説明している日本語サイトって検索しても見当たらないんですよね。
JSON Model format 3 と、THREE.JSONLoader.createModelあたりを見るしかないです。
「horse.js」の"faces"では、区切りが10になっており、bitに変換すると「00001010」です。
0: 0 = triangle (3 indices), 1 = quad (4 indices)
1: 0 = no face material, 1 = face material (1 index)
2: 0 = no face uvs, 1 = face uvs (1 index)
3: 0 = no face vertex uvs, 1 = face vertex uvs (3 indices or 4 indices)
4: 0 = no face normal, 1 = face normal (1 index)
5: 0 = no face vertex normals, 1 = face vertex normals (3 indices or 4 indices)
6: 0 = no face color, 1 = face color (1 index)
7: 0 = no face vertex colors, 1 = face vertex colors (3 indices or 4 indices)
0ビットは「0」なので三角形ポリゴンです。1ビット目と3ビットは「1」なんですが今回は使用しません。
区切りの先頭データはType(10=00001010)となり、例 10,v0,v1,v2,0,fv0,fv1,fv2 として8個単位でデータを区切ります。
今回Faceクラスに色データを追加したのは、Faceクラスを面を奥行き座標で並び替えるためにソート(this.faces.sort)させているからです。
最初ソートしていたことに気が付いてなくて、データの順番通りに色をセットしていたため、オウムとか妙なカラフルで表示されてたんですよね。
var j = 0;
for (var i = 0; i < this.modelData.faces.length; i += 8) {
if (this.modelData.faces[i] != 10) {
continue;
}
var v0 = this.modelData.faces[i + 1];
var v1 = this.modelData.faces[i + 2];
var v2 = this.modelData.faces[i + 3];
this.faces.push(new Face(this.vertices[v0 + addfaces],
this.vertices[v1 + addfaces],
this.vertices[v2 + addfaces],
this.modelData.colors[j++]));
}
3Dモデルはフラットシェーディングで表示しているので、面ごとに色を付けるようにした際も光源の位置によって差をつけています。
ぱっと見では差が出てないようですがですが、よくよく見れば差がついています。
Colorfulチェックボックスを付けて、オンではカラフルにオフの場合には単色の緑色で表示するようにしました。
if (this.isFill) {
if (this.isColorful && this.hasColor) {
var col = this.setHex(parseInt(face.color, 16));
var hsv = this.RGBtoHSV(col.r, col.g, col.b, false);
var rgb = this.HSVtoRGB(hsv.h, hsv.s, hsv.v - Math.round((1 - face.nz) * 50));
}
else {
var rgb = this.HSVtoRGB(0.4 * 360, 0.5 * 255, face.nz * 255);
}
g.fillStyle = 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
g.fill();
}
Typescriptで組んだソースリストは、github/Study3Dに公開しました。
