3Dゲームでよくあるのがレイキャスティングによる表示です。壁などが垂直に表示されて、前後左右に動いたり、視点を変えると見える映像が変わるというものです。DOOMなどでよく知られている表示形式です。 そんなレイキャスティングをReactで再現したのがRaycastになります。HTML5でも十分に3Dゲームが楽しめそうです。

Raycastの使い方

デモです。左側がキャラクターの視点、右側に上から見た図が出ています。

ASWDキーで動けます。矢印キーは視点移動です。

実際に動かしているところです。

RaycastはWebブラウザ上で動くゲームを作るのに役立つでしょう。このままではただ空間を動くだけですが、迷路を作ったり、敵キャラを配置すればぐっと面白くなるはずです。Reactで作られている点も、カスタマイズを容易にしてくれそうです。

RaycastはReact/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

Raycast ahuth/raycast: HTML5 raycasting demo using React