突然ですが、今週から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
<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月前半くらいには何とか作りあげたいですね。
おしまい