トップページ > コンテンツ > プログラミング入門 > Ajax入門 > JavaScript入門 > HTML5 > WebGL

奥がかなり深そうなので、とりあえず分かりやすそうなサイトのURLを羅列。
Three.jsは便利そうだ。

下記に記載した引用URLの記述によると、
<script src="three.min.js"></script>でthree.jsをインポートし、
以下のスクリプトを記載すれば良さそうだ。

web上で編集できるものとして、
http://editor.jthree.jp/というサイトもあり、
面白いかも。

---

1.シーン作成

var scene = new THREE.Scene();

2.カメラ作成

var width = 500; //横幅
var height = 500; //縦幅
var fov    = 80;             //画角
var aspect = width / height; //画面アスペクト比
var near   = 1;              //クリッピング手前
var far    = 1000;           //クリッピング奥
var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
camera.position.z = 300; //カメラ位置調整
scene.add(camera);

3.光源の作成

var light = new THREE.DirectionalLight( 0xffffff, 3 ); //光の色と強さの指定
light.position.z = 3;
scene.add( light );

4.オブジェクトの作成

var geometry = new THREE.CubeGeometry(100, 100, 100); //形状(幅、高さ、奥行き)の指定
var material = new THREE.MeshLambertMaterial( { color: 0x77dd00 } ); //色(マテリアル)の指定
var mesh = [new THREE.Mesh(geometry, material),
            new THREE.Mesh(geometry, material)]; //メッシュを作成
mesh[0].position.x = -100; //各オブジェクトの位置を調整
mesh[1].position.x = 100;
scene.add(mesh[0]); //シーンにメッシュを追加
scene.add(mesh[1]);

5.レンダラの作成

var renderer = new THREE.WebGLRenderer({ antialias:true }); //アンチエイリアス処理有効
renderer.setSize( width, height ); //描画領域のサイズ設定
document.body.appendChild( renderer.domElement ); //追加したいDOM要素を指定。今回はbodyに追加。
renderer.render(scene,camera);

6.レンダリング

function animation() {
     var param = 0;
     mesh[0].rotation.set(param,param,param); 
     mesh[1].rotation.set(param,param,param);
     param++; //parameterを変化させるとアニメーションできる。
     renderer.render(scene,camera);
     requestAnimationFrame(animation); //setTimeoutと同義か?
}
animation();

の6段階に分けて考えると良さそう。

---

WebGL:
https://developer.mozilla.org/ja/docs/Web/WebGL

Three.js(WebGL用ライブラリ):
http://seattleservice.hatenablog.com/entry/2013/08/21/175001
http://www.slideshare.net/yomotsu/webgl-and-threejs
http://stemkoski.github.io/Three.js/
http://threejsdoc.appspot.com/doc/index.html