WebGLとThree.jsに関する覚え書き

by · 公開済み · 更新済み

HTML5でブラウザ上で3Dを表示処理するAPI。
WebGLに関に関して若干の覚え書き。

この手の技術を利用する場合、単純にどこで何を入手するか、簡単な作業フローはどのようなものなのかが解らずに単純なところで立ち止まってしまう。
今回もWebGLとthree.js、Away3D TypeScript、Brender等利用環境に関する情報が直ぐに（10分程度で）手に入らなかったのでそのあたりのメモ。
先ずHTML5で3Dを扱うにはWebGLを利用するわけだが、直接利用するよりもより簡易に便利なフレームワークが幾つか用意されている。

Blender

今現在の最新はBlender 2.74 、ダウンロードはこちらの公式サイトでOK。
ちなみにこのBlender、オープンソースのフリーウェアでありながら、Killer Mayaアプリとして有望視（私見）されている。
積極的なアップデートを重ね、その進化は早くつい最近までは直立猿人とみられていたが、近年のバージョンではホモ・サピエンスと何ら見分けがつかないレベルのアプリへと姿を変えた。
今後の進化が楽しみである。

three.js

ダウンロードはhttps://github.com/mrdoob/three.js
色々とファイルがアップされているが、動作に必要なスクリプトはhttps://github.com/mrdoob/three.js/tree/master/build にあるthree.min.jsだけでOK。
JSファイルなので、使用方法は、head内に<script src=”three.min.js”></script>でOK。

Blender 用JSONエクスポートプラグイン

githubに行ったついでにBlender用のJSONエクスポートプラグインを入手。
https://github.com/mrdoob/three.js/tree/master/utils/exporters　のBlenderフォルダ内のthree.js/utils/exporters/blender/addons/　以下の　io_three　フォルダをダウンロードしてC:\Program Files\Blender Foundation\Blender\2.74\scripts\addons　にコピー。

それと、、three.js/examples/js/shaders/　以下にはHorizontalBlurShader.js、VerticalBlurShader.js　など様々なシェーダーがあり、three.js/examples/js/controls/にはOrbitControls.jsなどの超便利ライブラリがアップされている。

基本構成

以下はthree.min.js（Three.js本体）、OrbitControls.js（マウスでマウスでビューを回転、拡縮できるライブラリ）、my3D.js（ユーザー作成のスクリプト）　を読み込み、ページがロードされると、my3D.js 内のmainを実行しているシンプルなHTML。
注意: 以下のスクリプトは説明のために簡略化しています。コピー＆ペーストで作成しても動作しません。

<html>     <head>         <title>Three.js app</title> 	<style> 		body { margin: 0; } 		canvas { width: 100%; height: 100% ; background-color:#000;} 	</style> 	<script src="three.min.js"></script> 	<script src="OrbitControls.js"></script> 	<script src="my3D.js"></script>     </head>     <body> 	<script> 		window.addEventListener( 'DOMContentLoaded', main, false ); 	</script>     </body> </html>

以下は my3D.jsスクリプト。
必要な処理はこちらに記述。
（もちろん、HTML内にJavascriptを直接記述してもOK）

以下のスクリプトではBlenderで作成したモデルをJSONファイルとして保存し、THREE.JSONLoader()で読み込んで表示しています。
Txtureもマッピングしていますが、マッピングするためにはBlenderでUVを作成しておく必要があります。

またJSONオブジェクト以外にTHREE.CylinderGeometry( 5, 5, 4, 36)でシリンダー形状のオブジェクトを作成し、こちらへもマッピングを行っています。

OrbitControls.jsは読み込むだけでビューのマウスによる操作が可能となる便利なライブラリです。
読み込み後の有効化は簡単で、var controls = new THREE.OrbitControls(camera); 、controls.update(); を記述するだけです。

var main = function () { /************/ /*　my3D  */	 /*************/ /*Init*/ var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(35, window.innerWidth/window.innerHeight, 0.1, 1000); var controls = new THREE.OrbitControls(camera);      renderer = new THREE.WebGLRenderer( { alpha: true, antialias: true } ) renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor( 0xffffff, 0 ); document.body.appendChild(renderer.domElement);  //Texture for JSON Model 	var texture4  = new THREE.ImageUtils.loadTexture('panel.png');	 	texture4.wrapS = THREE.RepeatWrapping; 	texture4.wrapT = THREE.RepeatWrapping; 	texture4.repeat.set( 1, 1 ); // load JSON model var loader = new THREE.JSONLoader(); loader.load( 'panel1.json', function ( geometry ) { 	model = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial({ 	map: texture4,     	}) ); 	model.position.z = 5; 	model.scale.set(40,36,38); 	scene.add( model ); } );   /*Light*/ /*Front Light*/ var light = new THREE.DirectionalLight(0xffffff,1.2); light.position.set(0, 0, 5).normalize(); scene.add( light );  var light = new THREE.AmbientLight(0x111111); scene.add( light );  /*Load Texture*/ var texture1  = new THREE.ImageUtils.loadTexture('reel.png'); texture1.wrapS = THREE.RepeatWrapping; texture1.wrapT = THREE.RepeatWrapping; texture1.repeat.set( 1, 1 );  /*Obj*/ /*reel*/ var geometry1 = new THREE.CylinderGeometry( 5, 5, 4, 36); var material1 = new THREE.MeshPhongMaterial( {map: texture1}); var reel = new THREE.Mesh( geometry1, material1 );  camera.position.z = 30;	 scene.add( reel ); 	reel.position.x = -4.1; 	reel.rotation.z = 1.57;  var render = function () { 	var deg1 = 0.5; 	requestAnimationFrame(render); 	reel.rotation.x += deg1*Math.PI*2/180 ;	  controls.update();    renderer.render(scene, camera); }; render();  }

 

 

おすすめ