Three.jsでWebGLのコンテンツを作成してみる(1)
Three.js
今回はThree.jsを触ってみます。
three.js - Javascript 3D library
ブラウザで3DのCGを動かすといえばWebGLですが、OpenGLやDirectXのような細かい処理を書くのは結構大変です。それを手軽扱いやすくしたJavaScriptのライブラリのひとつがThree.jsです。
最低限、ブラウザとテキストエディタだけあれば3Dのプログラムが書けてしまいます。
(もちろんbracketsなどのhtmlエディタを使った方が書きやすいです。)
3Dプログラムがどのように動いているか、基礎部分の勉強にもなると思います。
Three.jsの読み込み
まず、HTML5のhtmlファイルを用意し、Three.jsを読み込ませます。
ダウンロードしてくるのも有りですが、CDNから読み込むと楽です。
headに
<script src="https://ajax.googleapis.com/ajax/libs/threejs/r84/three.min.js"></script>
というように書けばOKです。
canvasの配置
次に、canvasをbody内のどこかに置きます。
<canvas id="myCanvas"></canvas>
のように置きます。ここに描画を行う予定です。
初期化処理
次にJavaScriptを書きます。ここではid="myCanvas"のcanvasに描画するWebGLRendererを用意し、シーンとカメラを作成します。最後に描画を行う関数を繰り返し呼び出しています。
var canvasWidth = 640;
var canvasHeight = 480;
var myCanvas = document.querySelector('#myCanvas');
renderer = new THREE.WebGLRenderer({
canvas: myCanvas,
antialias: true,
alpha: true
})
renderer.setClearColor(new THREE.Color('blue'), 1)
renderer.setPixelRatio(1);
renderer.setSize( canvasWidth, canvasHeight );
var scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 45, canvasWidth/canvasHeight, 0.1, 1000 );
scene.add(camera);
var lastTimeMsec= null
function drawStep(nowMsec){
requestAnimationFrame(drawStep);
lastTimeMsec = lastTimeMsec || nowMsec-1000/60
var deltaMsec = Math.min(200, nowMsec - lastTimeMsec)
lastTimeMsec = nowMsec
var delta = deltaMsec / 1000
renderer.render(scene, camera);
}
requestAnimationFrame(drawStep);
最低限の動作をするコードを作成しました。レンダラーとシーン、カメラを用意してiいます。drawStep
一定時間で画面の更新があるごとにレンダラーで画面を描画しています。時間も計っていますが、現時点ではまだ使用していません。
ブラウザで開くと、htmlおよびJavaScriptコードが正しければこれだけで動きます。
大変短いコードですが、きっちりとWebGLの初期化及び描画の処理が行われています。
現時点では何もオブジェクトが置かれていないので、フレームバッファのクリアが行われているだけです。今回は分かりやすく青"blue"でクリアしました。"red"や"black"、0xFFFF00など色を指定すると、その色でクリアされるのが分かると思います。
次回は、ここに立方体などのプリミティブや、ツールで作成したモデルを置いていきます。