1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. HTML+CSSで3D空間を表現した「CSS FPS」がすごい!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
ギガビット対応のLANケーブル延長コネクターを買ってみた!

ギガビット対応のLANケーブル延長コネクターを買ってみた!

先日の記事でダイソーで売っているLANケーブル延長コネクターを購入しましたが、せっかく最大1Gbpsのフレッツ光ネクスト ギガファミリー・スマートタイプを契約しているの...

日本未発売の薄型背面バッテリーmoto modsの「moto power pack」を買ってみた!

日本未発売の薄型背面バッテリーmoto modsの「moto power pack」を買ってみた!

ちょっと前の記事で日本未発売で日本に発送できない商品を購入する方法の例として、Xボーダーを利用して日本未発売の超薄型背面バッテリーmoto modsの「moto power pack」...

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

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

今回紹介するのはHTMLとCSSを使ってFPSゲームなどでよくあるような3D空間を表現した技術デモサイトである「CSS FPS」のサイトを紹介したいと思います。HTML+CSSで表現でき...

YouTubeのチャンネル&動画分析ツールの「NoxInfluencer」で分析しよう!

YouTubeのチャンネル&動画分析ツールの「NoxInfluencer」で分析しよう!

今回紹介するのは、YouTubeのチャンネル分析が可能なマーケティングツールである「NoxInfluencer」です。NoxInfluencerを使うことでYouTubeチャンネルランキング、比較、タ...

動画変換やダウンロード、画面録画などが可能なマルチな動画ソフト「VideoProc」!

動画変換やダウンロード、画面録画などが可能なマルチな動画ソフト「VideoProc」!

先日からGWプレゼントキャンペーンでライセンスコードをプレゼントされていたVideoProcですが、今回はそのVideoProcを実際に使ってみたのでレビューを書きたいと思います。...

Vegas Proの手ブレ補正機能の効果を検証してみました!

Vegas Proの手ブレ補正機能の効果を検証してみました!

先日86%オフのキャンペーンで購入したプロ用動画編集ソフトのVegas Proですが、今回はそのVegas Proを使って手ブレしている動画にVegas手ブレ補正プラグインを使って手ブレ...

スマートスピーカーのAmazon Echo Dot第3世代が46%オフの3,240円で販売中!

スマートスピーカーのAmazon Echo Dot第3世代が46%オフの3,240円で販売中!

Amazon Echo Dot 第3世代 スマートスピーカー with Alexaがセール特価でなんと46%オフの大特価で販売中です。販売はAmazonなので送料はもちろん無料です。ちなみにAmazon E...

GW限定でVideoProcが無料で手に入るプレゼントキャンペーンを実施中!

GW限定でVideoProcが無料で手に入るプレゼントキャンペーンを実施中!

Digiarty Softwareはゴールデンウィーク限定で、VideoProcとDearMob iPhoneマネージャーのライセンスコードを無料でプレゼントするキャンペーンを実施中です。キャンペーン...

ゴールデンウィーク限定でプロ用動画編集ソフトのVEGASシリーズが最大90%割引!

ゴールデンウィーク限定でプロ用動画編集ソフトのVEGASシリーズが最大90%割引!

現在ソースネクストでは、ゴールデンウィーク限定のスーパー値引きキャンペーンとして、VEGAS製品が衝撃プライスのThe Chance GOLDを実施しています。このキャンペーンでは...

NetaGear RSS News

Now Loading

Article

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

 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位が表示されます。今ならリンクするだけで簡単に上位に表示されます。