Three.js には Blender 用のエクスポートスクリプトが付属しています。これを利用すると Blender で作成したモデルデータを Three.js で簡単に使うことが出来ます。
エクスポータのインストール
さっそく Blender でエクスポータを使えるようにしてみましょう。
エクスポータの設置
エクスポータは “three.js/utils/exporters/blender” 以下に入っています。このディレクトリの下に Blender のバージョンに合わせたディレクトリがあり、その下の “scripts” ディレクトリを Blender の “scripts” ディレクトリにコピーします。(バージョンが合っていなくても大抵は問題なく動作すると思います)
エクスポータの有効化
次に設置したエクスポータを有効化します。 Blender を起動し “User Preferences” で “Addons” タブを選択し、 “Import-Export” カテゴリを選択します。
恐らく一番下に “Import-Export: three.js format” という項目があると思うので、右側のチェックボックスを有効にします。
すると “File” メニューの “Export” に “Three.js(.js)” が追加されます。あとは適当なオプションを選択して保存すれば OK です。とりあえず今回はデフォルトの状態で出力をしました。
モデルデータを WordPress(サーバ) にアップロードする
それでは作成したモデルデータ(.js ファイル)を WordPress にアップロードしてみましょう(外部からアクセス出来るのであればレンタルサーバなどにアップロードしても構いません)。
「メディア」 → 「新規追加」から対象のファイルをアップロードします。
アップロードしたモデルデータを Three.js から利用する
それではアップロードしたモデルデータを利用してレンダリングを行ってみます。解説は省きますがそれぞれに対応する行数を書いておきます。
- ライトを追加する(16 から 18 行目)
- JSONLoader を使ってモデルデータをロードする(24 から 25 行目)
- ロードしたジオメトリデータにマテリアルを付けてシーンに追加する(30 から 35 行目)
今回はモデルデータが小さかったので、 33 行目で 100 倍に拡大するように指定しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <div id="div_canvas" style="text-align:center;"> <script> var camera, scene, renderer, geometry, material, mesh; init(); animate(); function init() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 75, 300 / 300, 1, 10000 ); camera.position.z = 1000; scene.add( camera ); light = new THREE.DirectionalLight( 0xffffff ); light.position.set( 0, 0, 1 ).normalize(); scene.add( light ); div_canvas = document.getElementById( 'div_canvas' ); renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( 300, 300 ); var loader = new THREE.JSONLoader(); loader.load( "http://www.soft-syokunin.com/wp-content/uploads/happy_buddha.js", createScene ); div_canvas.appendChild( renderer.domElement ); } function createScene( geometry ) { var material = new THREE.MeshFaceMaterial(); mesh = new THREE.Mesh( geometry, material ); mesh.scale.x = mesh.scale.y = mesh.scale.z = 100; scene.add( mesh ); } function animate() { // note: three.js includes requestAnimationFrame shim requestAnimationFrame( animate ); render(); } function render() { mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; renderer.render( scene, camera ); } </script> </div> |
今回は下記のリンクから “Happy Buddha” の一番解像度の荒いデータを使ってみました。
The Stanford 3D Scanning Repository
モデルデータを用意することや、それを読み込んで使うことは 3D グラフィクスを始めたばかりの障壁の一つでしたが全てフリーで出来るというのは嬉しいことですね。
「Three.js の Blender エクスポータを利用する」への1件のフィードバック
コメントは停止中です。