Reactといえば、SPA（シングルページアプリケーション）のViewに使われるライブラリー。でもThree.jsとWebGLを組み合わせると、3Dのゲーム開発にもメリットがあるようです。 「Charisma The Chameleon」というタイトルのゲームを開発しています。このゲームは、Three.js、ReactJSおよびWebGLを使って開発しています。本記事ではこれらの技術がreact-three-renderer（R3R）を使ってどのように動作するかを説明します。 ReactおよびWebGLの紹介については、SitePointの『A Beginner’s Guide to WebGL』や『Getting Started with React and JSX』をチェックしてください。本記事および添付のコードはES6 Syntaxを使用しています。 はじめに しばらく前にPete
ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな
今回は二次元物理エンジンBox2DJSとWebGLライブラリ、three.jsを組み合わせて、カーレースゲームのサンプルを作成しました。 Box2DJS Box2DJSはC++で書かれた物理演算エンジンをJavaScriptに移植したものです。質量・速度・摩擦といった、古典力学的な法則をシミュレーションするゲーム用の2D物理演算エンジンとして、現在ではActionScript、Java、C#、Pythonにも移植されています。 前回の記事ではenchant.jsとthree.jsを併用しましたが、今回は3D表現としてthree.jsを使う事は変わりませんが、メインのロジック部分にBox2DJSを使用しました。 ソースコード ※操作方法 : 前進「↑」キー、後退「↓」キー、旋回「←→」キー、カメラアングル切り替え「スペース」キー ※WebGLを使用したデモなのでChromeかFireFoxで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く