前回のブログでご紹介したWebGLのJSライブラリーである「Three.js」を実際に使ってみました。
使い方は、こちらのサイト→（多彩な表現力のWebGLを扱いやすくする「Three.js」）を参考にさせていただきました。
↓こちらがデモです(Google Chromeでの閲覧推奨)。
※Safariで見る場合は、「Safari」→「環境設定」→「詳細」で「メニューバーに”開発”メニューを表示」のチェックボックスにチェックを入れ、「開発」→で「WebGLを有効にする」にチェックを入れます。
方法
まずはこちら(Three.js公式サイト)からThree.jsをダウンロードします。
ダウンロードできたら、ページを載せるサーバにアップロードして、HTMLでダウンロードしたThree.jsを読み込みます。
今回はミニファイされたthree.min.jsを読み込んでいます。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="js/three.min.js"></script> </head> <body> <div id="viewArea"></div> </body> </html> |
Three.jsではbody直下に描画領域を直接読み込むことが多いようなのですが、
自由な場所に配置することを想定して、divを設置し、こちらに描画領域を読み込むことにしました。
CSS
今回は空に浮かんでるイメージにしたかったので、
空色のグラデーションをdivに設定しました。
|
1 2 3 4 5 6 7 8 9 | #viewArea{ width: 640px; margin: 50px auto; background: -moz-linear-gradient(top, #187aff 0%, #b5d4ff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#187aff), color-stop(100%,#b5d4ff)); /* Chrome,Safari4+ */ background: -o-linear-gradient(top, #187aff 0%,#b5d4ff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #187aff 0%,#b5d4ff 100%); /* IE10+ */ background: linear-gradient(to bottom, #187aff 0%,#b5d4ff 100%); /* W3C */ } |
ではいよいよ本体となるJSです。
JavaScript
|
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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | /*--------------------- レンダラーの初期化 ---------------------*/ var renderer = new THREE.WebGLRenderer({ antialias:true });//描画を行うレンダラーの作成(アンチエイリアスを有効に) renderer.setSize(640, 640);//描画領域のサイズを設定 renderer.setClearColorHex(0x333333, 0);//描画領域の色と透過度を設定(色は16進数、透過度は0～1) document.getElementById("viewArea").appendChild(renderer.domElement);//描画領域の実装 /*--------------------- シーンの作成 ---------------------*/ var scene = new THREE.Scene(); /*--------------------- カメラの作成 ---------------------*/ var camera = new THREE.PerspectiveCamera(15, 500 / 500);//透視投影のカメラを作成(平行投影はOrthographicCamera) camera.position = new THREE.Vector3(0, 0, 8);//カメラの位置 camera.lookAt(new THREE.Vector3(0, 0, 0));//カメラの注視点 scene.add(camera);//シーンにカメラを追加 /*--------------------- ライトの作成 ---------------------*/ var light = new THREE.DirectionalLight(0xffffff);//無限遠光源(太陽光のような光源)のライトを作成 light.position = new THREE.Vector3(0.577, 0.577, 0.577);//ライトの位置 scene.add(light);//シーンにライトを追加 var ambient = new THREE.AmbientLight(0x212832);//環境光(照り返しのような間接的なの光)を作成 scene.add(ambient); /*--------------------- 表示する物体の作成 ---------------------*/ var geometry = new THREE.CubeGeometry(1, 1, 1);//形状を作成 var material = new THREE.MeshPhongMaterial({//質感を設定 color: 0xffffff, ambient: 0xffffff,//色、環境 specular: 0xcccccc, shininess:50, metal:true,//ハイライトの色、ハイライトの大きさ、金属の質感を有効 map: THREE.ImageUtils.loadTexture('images/logo_mark.jpg') });//マッピングを設定（bumpMapで凹凸の設定が可能） var mesh = new THREE.Mesh(geometry, material);//物体を作成 scene.add(mesh);//シーンに物体を追加 /*--------------------- レンダリング ---------------------*/ var baseTime = +new Date; function render() { requestAnimationFrame(render);//アニメーションを作成 mesh.rotation.y = 1 * (+new Date - baseTime) / 1000;//Y軸の回転 mesh.rotation.x = 0.5 * (+new Date - baseTime) / 1000;//X軸の回転 renderer.render(scene, camera);//3Dレンダリングの実行 }; render(); function tick() { var finished = false; // 再描画の処理 // アニメーションが終了したら // finishedをtrueにする if(!finished) requestAnimationFrame(tick); } //requestAnimFrameのクロスブラウザ対応 window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000/60); }; })(); |
基本的な流れは、
- レンダラーの初期化
- シーンの作成
- カメラの作成
- ライトの作成
- 表示する物体の作成
- レンダリング
となります。
「Three.js」を使うと、これらの設定を分かりやすく設定することができます。
私は今回初めてWebGLを扱いましたが、とても馴染みやすい印象を感じました。
初めてWebGLに挑戦される方には、とてもオススメです。
今回は簡単な直方体を作成しましたが、「Three.js」は3Dソフトで作成したモデルデータを、
変換後読み込むためのコンバータなどもいくつか用意されており、
比較的簡単にWebGLで表示することができるようです。
次回はモデルデータの読み込みに挑戦してみたいと思います。
