こんにちは。Web 開発担当の真谷（シンガイ）です。
突然ですが 3D でフェンリルくんを作りました。
黒枠内でマウス左クリックしながら視点変更もできます。
完全に出オチですが、今回はこの 3D フェンリルくんをどうやって実現したかの紹介をします。
DMM 3D プリントにアプリ登録
今回モデルデータを外部から参照する為に、DMM 3D プリント API を使います。
DMM 3D プリントにアプリ登録をして、API を使えるようにするには以下の2点だけです。
登録が完了すると画像のように表示されます。簡単ですね。
全国200万人の提督の方々はアプリ登録だけで OK です。
3D データのアップロード
3D データを用意する手順が必要ですが、今回は弊社デザイナーに Web で表示するにあたってサイズも軽くて美しいフェンリルくんを用意してもらいました。
これを DMM 3D のサイト上 or モデル登録 API からアップロードをします。
DMM 3D のサイト上でアップロードするには、3D データアップロードフォーム からアップロードします。
アップロードする 3D データの基本ルールは以下のようになります。
- 対応形式は、STL、OBJ、3DS、STEP、IGES、PLY、VRML・WRML、3DP
- 1ファイル 100 MB 以内
実際に 3D モデルをプリントする場合には、更に細かい ルール があります。
アップロードが完了すると、以下のように登録されます。表示されている「モデル ID」を後に使用します。
3D データの表示
3D の表示をします。バックエンドは PHP で モデル詳細取得 API を使用します。
フロントエンドは JavaScript と「three.js」をライブラリとして使用します。three.js は WebGL レンダリング対応、右手系、人気もあって情報量も多い 3D レンダリングのライブラリです。
実際のコードは以下になります。
モデルデータ受け取り (PHP)
$applicationId = 'アプリケーション ID';
$modelId = 'アップロードしたモデル ID';
// UA 指定しないとうまく取得できませんでした。
$options = array(
'http'=>array(
'method'=>'GET',
'header'=>"User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36 Sleipnir/6.0.0\r\n".
"Accept-language: ja\r\n"
)
);
$context = stream_context_create( $options );
$result = file_get_contents('https://api.make.dmm.com/models/download/v1?applicationId='.$applicationId.'&modelId='.$modelId, FALSE, $context);
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename=model.stl');
echo $result;
モデルデータ表示 (Javascript)
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(520,300);
renderer.shadowMapEnabled = true;
document.getElementById("3d_fenrirkun").appendChild(renderer.domElement);
var modelLoad = 'ここにモデルデータ受け取り API を指定します';
var loader = new THREE.STLLoader();
var pos = 0;
loader.addEventListener( 'load', function ( event ) {
var geometry = event.content;
THREE.GeometryUtils.center( geometry );
var material = new THREE.MeshPhongMaterial( { ambient: 0x666666, color: 0xc0c0c0, specular: 0xFFFFFF, shininess: 30, shading: THREE.SmoothShading } );
mesh = new THREE.Mesh( geometry, material );
mesh.rotation.x = - Math.PI / 2;
mesh.castShadow = true;
mesh.receiveShadow = true;
mesh.position.set(0, 7, 0);
mesh.scale.set(0.32, 0.32, 0.32);
scene.add( mesh );
var light = new THREE.SpotLight(0xFFFFFF, 2, 900, Math.PI / 4, 1);
light.target.position = new THREE.Vector3(0, 0, 0);
light.position.set(300, 500, 300);
scene.add( light );
var ambientLight = new THREE.AmbientLight(0x666666);
scene.add(ambientLight);
camera.position = new THREE.Vector3(0, 0, 100);
render();
} );
loader.load( modelLoad );
var controls = new THREE.OrbitControls(camera, renderer.domElement);
function animate(){
pos += 0.02;
mesh.rotation.z = pos;
}
var render = function () {
requestAnimationFrame(render);
renderer.render(scene, camera);
controls.update();
setTimeout(animate, 100);
};
まとめ
以上のように 3D データさえあれば、簡単な手順で表示できます。
DMM 3D プリント API では、
実際の 3D モデルには自分のみ取得でき、他の人の場合はモデル一覧のみ取得可能です。他の人の 3D モデルを取得できないのは、データを権利無視で利用されることも考えられるので仕方がないのかなと思います。
このあたり、3D プリント自体が過渡期でもあるので、業界が発展していく中で API としても使いやすくなることを期待します。
次回はフロントエンドで使用した three.js について説明をします。
フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください！
関連記事
