Three.jsとは何ですか？

Three.jsは、ブラウザで3Dグラフィックスを描画するためのJavaScriptライブラリです。WebGLを直接書くよりはるかに少ないコードで、3Dゲームやインタラクティブな表現を作れます。MITライセンスのオープンソースです。

Three.jsでゲームを作る方法を知りたいのですが。

まずシーン・カメラ・レンダラーの基本構成を理解し、小さな表現から始めるのがおすすめです。AMIXのモーション＆WebGLギャラリーでは、パーティクルやシェーダーなどThree.jsの表現サンプルを多数公開しています。

はい。このページで紹介しているThree.jsゲームはすべて無料です。アカウント登録もアプリのインストールも不要で、リンクを開くだけで始められます。

GAME 01 3Dレース

3頭身の子柴が飼い主を引きずって全力疾走する3Dレースゲーム。柴犬4種×コース6種×難易度3種。招待URLを送るだけで、友だちと2〜4人のオンライン対戦もできます。

あそぶ

GAME 02 3Dフライト

ぷっくり可愛い鳩になって大空を飛びまわるフライトゲーム詰め合わせ。荷物をとどける「おとどけ」、ドローンを撃ち落とす「討伐」、砲台で街をまもる「防衛」、時間がめぐる島を自由に飛ぶ「そらさんぽ」の4モード。

あそぶ

GAME 03 3D生態系シミュレーター

エビの水槽をただ眺める。餌やりと水換えをしながら、抱卵、孵化、脱皮、遺伝、水質変化——小さな生態系が育っていく様子を3Dで観察できます。夜、部屋を暗くして眺めるのがおすすめ。

あそぶ

GAME 04 3Dフォトウォーク

誰もいない世界の隙間を、ただ歩いて、撮る。リミナルスペース文化への敬意を込めた3Dカメラ散歩。目的もスコアもありません。あるのは、見覚えがあるのに知らない場所だけ。

あるく

Three.jsは、ブラウザで3Dグラフィックスを描画するためのJavaScriptライブラリです。WebGLを直接書くよりはるかに少ないコードで3D空間を構築でき、世界中のインタラクティブサイトや3Dゲームで使われています。MITライセンスのオープンソースです。

Three.js製のブラウザゲームには、アプリと違う気楽さがあります。インストールも登録も不要で、URLを開いた瞬間に3D世界が立ち上がる。スマホでもPCでも同じリンクで遊べて、友だちに送るのもURLひとつ。このページ自体も、Three.js r185で描画しています。

AMIXでは、ゲームのほかにもパーティクル・シェーダー・スクロール連動などThree.jsとAnime.jsの表現サンプルをモーション＆WebGLギャラリーで公開しています。「作ってみたい」と思ったら、そちらもどうぞ。

Three.jsのゲームは無料で遊べますか？

はい。このページで紹介しているゲームはすべて無料です。アカウント登録もアプリのインストールも不要で、リンクを開くだけで始められます。

スマホでも動きますか？

動きます。Three.jsはWebGLを使ってブラウザ上で3Dを描画するため、iPhone・AndroidのブラウザでもPCと同じURLでそのまま遊べます。各ゲームはタッチ操作にも対応しています。

新しいゲームは追加されますか？

されます。現在も複数のThree.jsゲームを制作中です。公開され次第、このギャラリーに並びます。

Three.jsでゲームを作る方法を知りたい。

まずシーン・カメラ・レンダラーの基本構成を理解して、小さな表現から始めるのがおすすめです。AMIXのモーション＆WebGLギャラリーでは、Three.jsの表現サンプルを多数公開しています。