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

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

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

1. 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" );

2. 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();
   };