ゲーム制作Three.js今回はThree.jsを触ってみます。libraryブラウザで3DのCGを動かすといえばWebGLですが、OpenGLやDirectXのような細かい処理を書くのは結構大変です。それを手軽扱いやすくしたJavaScriptのライブラリのひとつがThree.jsです。最低限、ブラウザとテキストエディタだけあれば3Dのプログラムが書けてしまいます。(もちろんbracketsなどのhtmlエディタを使った方が書きやすいです。)3Dプログラムがどのように動いているか、基礎部分の勉強にもなると思います。Three.jsの読み込みまず、HTML5のhtmlファイルを用意し、Three.jsを読み込ませます。ダウンロードしてくるのも有りですが、CDNから読み込むと楽です。src="https://ajax.googleapis.com/ajax/libs/threejs/r84/three.min.js"></script>というように書けばOKです。次に、canvasをbody内のどこかに置きます。id="myCanvas"></canvas>のように置きます。ここに描画を行う予定です。次にJavaScriptを書きます。ここではid="myCanvas"のcanvasに描画するWebGLRendererを用意し、シーンとカメラを作成します。最後に描画を行う関数を繰り返し呼び出しています。camera);}requestAnimationFrame(drawStep);最低限の動作をするコードを作成しました。レンダラーとシーン、カメラを用意してiいます。drawStep一定時間で画面の更新があるごとにレンダラーで画面を描画しています。時間も計っていますが、現時点ではまだ使用していません。ブラウザで開くと、htmlおよびJavaScriptコードが正しければこれだけで動きます。短いコードですが、きっちりとWebGLの初期化及び描画の処理が行われています。現時点では何もオブジェクトが置かれていないので、フレームバッファのクリアが行われているだけです。今回は分かりやすく青"blue"でクリアしました。"red"や"black"、0xFFFF00など色を指定すると、その色でクリアされるのが分かると思います。次回は、ここに立方体などのプリミティブや、ツールで作成したモデルを置いていきます。【Unity】VideoPlayerでの動画再生(2)月別アーカイブはてなブログをはじめよう!chirotecさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。