突然ですが、今週からWebGLの勉強を始めてみました。
WebGLというのは「ブラウザ上で3DCGを表現できるグラフィックス技術」のことで、イメージとしては
「OpenGLをWeb上で使う」という表現が近いのかなと勝手に思っています。
今までWebGLはあまり興味が無かったのですが、先日の天下一altJS勉強会で
同じDart枠で発表されていた方のデモを拝見してからモチベーション急上昇中です。
実際に動いてるモノを見ると心に響く物もある。ということで早速やってみました。
今回は、three.jsという「WebGLを複雑な手順なしで直感的に操作することができるライブラリ」を使って 立方体のアニメーションを作ってみます。
まずはthree.jsのHP
three.js - JavaScript 3D library
からライブラリ本体をダウンロード。ダウンロードしたものを解凍したら、
buildフォルダの中から「three.js」「three.min.js」を持ってきて任意の場所にコピーします。
必要なモノを用意できたら、コードを書いていきましょう。
今回自分が本家HPを見ながら書いたコードは以下の通りです。
main.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Hello three.js</title> </head> <body> <script src="js/three.min.js"></script> <script type="text/javascript"> var main = function() { // シーン作成 var scene = new THREE.Scene(); // カメラ作成 var width = window.innerWidth; var height = window.innerHeight; var fov = 60; var aspect = width / height; var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera(fov, aspect, near, far); // カメラの位置調整 camera.position.set(0, 0, 50); // レンダラーの配置 var renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height); document.body.appendChild( renderer.domElement ); // 光源追加 var directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set(0, 0.7, 0.7); scene.add( directionalLight ); // 表示する物体を追加する var geometry = new THREE.BoxGeometry(20, 20, 20); // 赤、緑、青で三色で構成された素材を使用 var material = new THREE.MeshNormalMaterial(); var mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); // 少しづつ動かすアニメーション function rendering() { mesh.rotation.x += 0.01; mesh.rotation.y += 0.01; renderer.render( scene, camera ); requestAnimationFrame(rendering); } rendering(); }; window.addEventListener('DOMContentLoaded', main, false); </script> </body> </html>
- 物体を表示する場所
- 物体を写すカメラ、カメラを置く位置
- 物体を照らす光源
- 物体のアニメーション処理
等をJSで1つ1つ定義していきます。この40行くらいのJSを書くと、
アニメーションで動く立方体をブラウザ上で表現することが出来ます。
結果が気になる方は是非お試しください。
自分でも理解し切れていない部分が多々あるので、それはこれからの学習で補っていきたいと思います。
目先の目標はプラネタリウムっぽいものを自作すること・・
7月前半くらいには何とか作りあげたいですね。
おしまい