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();
};
投稿日時 : 2014年2月1日 12:23