1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. HTML+CSSで3D空間を表現した「CSS FPS」がすごい!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
Leawo Blu-rayコピーでブルーレイをISOファイルに簡単バックアップ!

Leawo Blu-rayコピーでブルーレイをISOファイルに簡単バックアップ!

今回紹介するのは全世界で1,000万以上のユーザーがいるBlu-rayコピーソフトであるLeawo Blu-rayコピーです。Leawo Blu-rayコピーを使用すると、簡単にBlu-rayディスクのバ...

安物バッテリーは危険!?またまたMoto Zのバッテリーを自分で交換した話!

安物バッテリーは危険!?またまたMoto Zのバッテリーを自分で交換した話!

3,4ヶ月前のことになりますが、MOTOROLA Moto Zのバッテリーが死んでバッテリーを交換する手順の記事を書きました。当時は充電ケーブルを抜くと5分もせずに落ちるという状...

1/4ネジの三脚ボール ヘッドブラケットを買ってみた!

1/4ネジの三脚ボール ヘッドブラケットを買ってみた!

先日の記事で199円のミニ三脚についてのレビューにおいて、三脚上部の角度などが変更できればもっと自由度が上がって使いやすくなるということを書きました。そこで今回は...

無料でもらえるGoogle Nest miniが届いたのでレビュー!

無料でもらえるGoogle Nest miniが届いたのでレビュー!

先日の記事のGoogle Nest Miniが無料で手に入る!YouTube PremiumとGoogle Play Music会員が対象!でも紹介したGoogle Nest miniが届いたのでレビューを書きたいと思います...

スマート体組成計&体重計が792円!スマホ連動可能でソーラー充電で使える!

スマート体組成計&体重計が792円!スマホ連動可能でソーラー充電で使える!

Bluetoothでスマホ連動可能なBeyeahスマート体組成計&体重計が792円の超激安で販売中です。スマホとBluetoothで連動させることで、体重や体水分量・BMI・筋肉量・推定骨量...

Fire TV StickでIEEE802.11acが認識されない問題!

Fire TV StickでIEEE802.11acが認識されない問題!

先日のレビューも書いたFire TV Stickですが、実は一つ気になることがあったので同じようなことで困っている人の役に立てばと思い記事で残しておきたいと思います。それはF...

超電磁砲・禁書目録などとあるシリーズの小説・漫画が最大80%オフのキャンペーン!

超電磁砲・禁書目録などとあるシリーズの小説・漫画が最大80%オフのキャンペーン!

現在BOOK★WALKERでは、1月10日よりTVアニメが放映開始となる「とある科学の超電磁砲T」を記念して、とあるシリーズが最大80%オフのキャンペーンを実施しています。とある科...

完全防水IPX7&360度のTribit StormBox bluetoothスピーカーを使ってみた!

完全防水IPX7&360度のTribit StormBox bluetoothスピーカーを使ってみた!

今回は完全防水IPX7に対応したBluetoothスピーカーであるTribit StormBox bluetoothスピーカー BTS30を紹介したいと思います。お風呂場などで使用可能なIPX7に対応しており...

ダイソーで買えるライトニングとMicroUSBが両方使えるケーブルがすごい!

ダイソーで買えるライトニングとMicroUSBが両方使えるケーブルがすごい!

先日ダイソーですごいケーブルを見つけたので紹介したいと思います。それはなんとライトニングケーブルとMicroUSBケーブルが一本で両方使えるという製品です。先頭の端子を...

2020年あけましておめでとうございます!

2020年あけましておめでとうございます!

新年あけましておめでとうございます!裏技shop DDは今年でサイト開設から15年目に突入します!気がつけばこんなに長く続けていることは他にないくらい長い時間が経ってし...

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