Three.jsでNSX Concept 3D Modelを表示してみました

なか-chan@最愛のiMac — Sat, 01 Feb 2014 12:23:00 GMT

HONDA 3D Design Archives で、NSX Concept 3D Model など、ホンダのいろいろなコンセプトカーの3Dデータを配布していました。クリエイティブ・コモンズ4.0の表示-非営利という条件で公開されており、原作者のクレジット（氏名、作品タイトルなど）を表示し、かつ非営利目的であることを主な条件に、改変したり再配布したりできます。

そこで、このデータを用いてThree.jsというJavaScriptライブラリを使用して、Webブラウザで3D表示させてみました。WebGL対応のブラウザ(IE11, FireFox, Chrome, Opera等)で見ることができます。(モバイルは、ほぼ非対応) JavaScriptのソースはこちらです。

3Dモデルは、STL形式でしたので、Three.jsのexamples\js\loaders\STLLoader.jsを利用してモデルを読み込んでいます。
<script type="text/javascript" src="STLLoader.js"></script>
var loader = new THREE.STLLoader();
loader.addEventListener( 'load', function ( event ) {
var geometry = event.content;
// 読み込めたので、ここで表示する
} );
loader.load( "nsx_concept_LOW.stl" );
examples\js\controls\OrbitControls.jsを利用するとマウスをドラッグしてぐるぐる回すことができます。
<script type="text/javascript" src="OrbitControls.js"></script>
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var renderFrame = function () {
    requestAnimationFrame(renderFrame);
    renderer.render(scene, camera);
    controls.update();
};