この記事は@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);