HTML+CSSで3D空間を表現したCSS FPSがすごい！
今回紹介するのはHTMLとCSSを使ってFPSゲームなどでよくあるような3D空間を表現した技術デモサイトである「CSS FPS」のサイトを紹介したいと思います。HTML+CSSで表現できることの幅広さと可能性を感じさせる素晴らしいサイトなので見たことがない人はぜひ訪れてみることをおすすめします。
このサイトではHTML+CSS+Javascriptを使って3D空間を作成しており、FPSゲームのようにPCではキーボード、スマホなどではタッチを駆使して、移動したりジャンプしたりが可能です。CSS 3D transformsを駆使することでこのような3D空間を作り出せるのは本当にすごいです。
HTML+CSSで3D空間を表現した技術でもサイト「CSS FPS」！
「CSS FPS」は下記のサイトURLからアクセスできます。デモの種類は3種類で、PCのマウスとキーボードで動かすデスクトップ版の「Mouaw & Keyboard」、スマホなどのタッチデバイスで動かすタッチスクリーン版の[Touch Screen」、Javescriptを使わずHTML+CSSのみで実装された「Pure CSS demo」があります。※「Pure CSS demo」はJavaxcriptを使用していないため、自分で操作することができません。CSS animationで勝手に視点が動きます。
A 3D engine built using HTML and CSS 3D transforms by Keith Clark
キーボード版の操作は、マウスで視点を移動、「W」「A」「S」「D」のキーボードでキャラクター移動、「Space」キーでジャンプできます。
このような感じで進めます。
階段を降りるとこんな感じです。
木箱などもあります。
ドラム缶があります。
HTML+CSSでの3Dの実装について
HTML+CSSで3Dを表現するのは一般的な3DCGと同じようにテクスチャーを用意してそれをdivタグなどに貼り付ける形で実装しているようです。デモサイトにも書いてありますが、HTML5 and CSS 3D transformsを駆使して実装する形のようです。
ソースコード
See the Pen 3D objects in CSS with shading by Keith Clark (@keithclark) on CodePen.
ソースコードも公開されているので興味のある人はこれを見ると良いかもしれません。
作者のページ
その他の詳細について知りたい人は作者のページを見たほうが良いでしょう。興味のある人はぜひ作者のページを訪れて解説を読むことをおすすめします。
Creating 3D worlds with HTML and CSS今回の個人的感想＆まとめ
今回紹介したのはHTMLとCSSを使ってFPSゲームなどでよくあるような3D空間を表現した技術デモサイトである「CSS FPS」の紹介でした。私も過去にはCSSドラえもんを作ったりといろいろCSSで遊んだりしていましたが、CSSでここまで表現できるのかととても勉強になりました。
特にPure CSS DemoはJavascriptなしで表現されているのは本当に驚きです。ソースを見てもhtml+CSSのみで作られています。divにテクスチャー画像を貼って表現しているのですが、それで一つ一つ部屋や階段を表現したりするのはかなり大変だと思います。FPSのように移動したりも可能なのですが、それもしっかり階段に合わせて視点がズレますし、箱の上に乗れたり良くできています。銃が撃てたら最高だったのですが、それはできませんでした。
今回のデモサイトを見て改めてCSSでできることの幅広さを知ることができてよかったです。ぜひ興味のある人は一度訪れるといい刺激がもらえますよ！