non vorrei lavorare

ブログ名の通りです。javascript three.js mruby rust OCaml golang julialang blender

Three.jsでexamplesの高級車たちをblenderにExportしたが残念な結果に

この記事は@kjunichiの2017年パーソナルアドベントカレンダーの16日目の記事です 。

背景

https://threejs.org/examples/#webgl_materials_cars

で見つけたブガッティやフェラーリを息子と一緒に作ってるゲーム中に登場させることは出来たが、 そのままだと、ホイールと車体が分離していないので、タイヤが回らず、リアルさに欠ける状態。 また、Blenderに持ってこれれば、微調整して、ペイントしたり色々加工出来て楽しめそう。

ググってもThree.jsにエクスポートする記事ばかり

ググってもThree.jsにエクスポートする記事ばかり、が

stackoverflow.com

をみつけ、実は、three.jsのexamplesにエクスポートするコードが含まれていたことを知った。

世の中そんなに甘くなかった

まずは.objで試すも、 マテリアルがエクスポートされない。

const exporter = new THREE.OBJExporter();
const objData = exporter.parse(scene);

const blob = new Blob([objData ], {
                        "type": "application/x-msdownload"
});
const elm = document.createElement("a");
elm.href = window.URL.createObjectURL(blob);
elm.innerHTML = "dl";
document.body.appendChild(elm);

最新版のthree.jsに含まれるObjExporterはコード出来にはMaterialも扱っていそうだが、 少なくともExamplesのブガッティベイロンは形状データのみでマテリアルデータがNG。

f:id:kjw_junichi:20171216223247p:plain

GLTFもためしたが、こちらに至っては、利用しているマテリアルの方式?に対応してない模様で、 途中でエラーが吐かれて、ファイルすらできないという。

関連記事