Three.jsでWebGLのコンテンツを作成してみる(1)

Three.js

今回はThree.jsを触ってみます。

three.js - Javascript 3D library

 

ブラウザで3DのCGを動かすといえばWebGLですが、OpenGLDirectXのような細かい処理を書くのは結構大変です。それを手軽扱いやすくした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など色を指定すると、その色でクリアされるのが分かると思います。

f:id:chirotec:20181215140728p:plain

次回は、ここに立方体などのプリミティブや、ツールで作成したモデルを置いていきます。