1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. HTML+CSSで3D空間を表現した「CSS FPS」がすごい!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
VideoProcの画面録画機能がすごい!クロマキー合成も可能!

VideoProcの画面録画機能がすごい!クロマキー合成も可能!

VideoProcは、Digiarty Software社が開発・販売を行っている動画変換&編集、DVDコピー、動画ダウンローダー、画面録画とマルチに活躍する機能を持った動画処理ソフトです...

DVDFab 11 Blu-rayコピーを使ってみた!

DVDFab 11 Blu-rayコピーを使ってみた!

今回はDVDやBlu-rayのコピー&リッピングソフトとして世界で最も有名なDVDFabの最新版であるDVDFab 11 Blu-rayコピーを使ってみて、実際にレビューを書きたいと思います。D...

プライムデーセールがスタート!Amazon Echoシリーズが最大60%Offで大幅値引き!

プライムデーセールがスタート!Amazon Echoシリーズが最大60%Offで大幅値引き!

15日から始まったAmazonプライムデーセールですが、EchoシリーズやKindle、FireTVなどのAmazonデバイスが大幅値下げされています。中でもおすすめなのがAlexaを搭載するス...

超!A&G+がEchoシリーズで再生可能に!Amazon Alexaが再生に対応!

超!A&G+がEchoシリーズで再生可能に!Amazon Alexaが再生に対応!

文化放送が運営しているアニラジ専門のインターネットラジオである超!A&G+(ちょう!エーアンドジープラス)がAmazon Alexaに対応しました。これによりスマートスピーカ...

Amazon Prime VideoでChromecastへのキャストが可能に!

Amazon Prime VideoでChromecastへのキャストが可能に!

ついに7月10日よりAmazonプライムビデオでChromecastへのキャストが可能になりました。Amazonプライムビデオのアプリをアップデートすることで、Chromecastへのキャストボ...

Chromeで拡張機能なしでページ全体のスクリーンショットを撮る方法!

Chromeで拡張機能なしでページ全体のスクリーンショットを撮る方法!

みなさんはサイトのページ全体をキャプチャしてスクリーンショットを撮りたい時はどうしていますか?よくある手法としては拡張機能を入れてスクリーンショットを撮るという...

AOMEI BackupperでSSD&HDDを定期的に丸ごとバックアップしよう!

AOMEI BackupperでSSD&HDDを定期的に丸ごとバックアップしよう!

最近のPCではシステムドライブとしてSSDが採用されているのは当たり前の時代になりましたが、みなさんバックアップはしっかり取っていますか?SSDはHDDと比較しても非常に...

デュエルリンクスの最新情報が読めるアンテナを作りました!検索機能も大幅アップデート!

デュエルリンクスの最新情報が読めるアンテナを作りました!検索機能も大幅アップデート!

先日、遊戯王デュエルリンクスのカード検索サイトであるDuelLinks.netを公開しましたが、追加機能としていくつかのアップデートを行ったので、こちらにまとめておきます。...

クランプ式USBハブのORICO 4PORTS CLIP HUB MH4PU-U3を使ってみた!

クランプ式USBハブのORICO 4PORTS CLIP HUB MH4PU-U3を使ってみた!

今回紹介するのはクランプ式(クリップ式)のUSB3.0の4ポートハブであるORICO MH4PU-U3です。このUSBハブが普通のUSBハブとは違うのが、パソコン、液晶モニター、PCデスクな...

NetaGear RSS News

Now Loading

Article

HTML+CSSで3D空間を表現した「CSS FPS」がすごい!

Webデザイン > html+CSS+javascript 
CSS_FPS_001.png

今回紹介するのは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_001.png
「CSS FPS」は下記のサイトURLからアクセスできます。デモの種類は3種類で、PCのマウスとキーボードで動かすデスクトップ版の「Mouaw & Keyboard」、スマホなどのタッチデバイスで動かすタッチスクリーン版の[Touch Screen」、Javescriptを使わずHTML+CSSのみで実装された「Pure CSS demo」があります。※「Pure CSS demo」はJavaxcriptを使用していないため、自分で操作することができません。CSS animationで勝手に視点が動きます。



CSS_FPS_002.png
キーボード版の操作は、マウスで視点を移動、「W」「A」「S」「D」のキーボードでキャラクター移動、「Space」キーでジャンプできます。

CSS_FPS_003.png
このような感じで進めます。

CSS_FPS_004.png
階段を降りるとこんな感じです。

CSS_FPS_005.png
木箱などもあります。

CSS_FPS_006.png
ドラム缶があります。

HTML+CSSでの3Dの実装について


CSS_FPS_010.jpg
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.



ソースコードも公開されているので興味のある人はこれを見ると良いかもしれません。


作者のページ


その他の詳細について知りたい人は作者のページを見たほうが良いでしょう。興味のある人はぜひ作者のページを訪れて解説を読むことをおすすめします。




今回の個人的感想




今回紹介したのはHTMLとCSSを使ってFPSゲームなどでよくあるような3D空間を表現した技術デモサイトである「CSS FPS」の紹介でした。私も過去にはCSSドラえもんを作ったりといろいろCSSで遊んだりしていましたが、CSSでここまで表現できるのかととても勉強になりました。

特にPure CSS DemoはJavascriptなしで表現されているのは本当に驚きです。ソースを見てもhtml+CSSのみで作られています。divにテクスチャー画像を貼って表現しているのですが、それで一つ一つ部屋や階段を表現したりするのはかなり大変だと思います。FPSのように移動したりも可能なのですが、それもしっかり階段に合わせて視点がズレますし、箱の上に乗れたり良くできています。銃が撃てたら最高だったのですが、それはできませんでした。

今回のデモサイトを見て改めてCSSでできることの幅広さを知ることができてよかったです。ぜひ興味のある人は一度訪れるといい刺激がもらえますよ!

Related article

COMMENT TO THIS ENTRY

Most Popular

Now loading...

Social Links

Sponsored Link

Popular Article

Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位15位が表示されます。今ならリンクするだけで簡単に上位に表示されます。