最先端を感じる！HTML5で3D表現をしているサイト10選
HTML5で3D表現をしているサイトを集めてみました。特に難しい技術を使用せず、ここまでクオリティの高いものが作れるという点で参考になるはずです。
サイト上で立体的な表現をしているものは、日頃あまり見ないので新鮮さを感じるでしょう。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
ROME
シンプルな雲の3D背景が広がるサイトです。
マウスを動かすことによって、雲の視点が変わり、実際に空を飛んでいるかのような感覚になります。
The GLOBE of ECONOMIC COMPLEXITY
世界のお金のバランスを見やすく3Dで具現化したのがこのサイトです。ハーバード大学の学生が作り上げました。
学生でもこのクオリティのものが作れるとは感服ですね。
The GLOBE of ECONOMIC COMPLEXITY
Chemdoodle
化学結合を3Dで表現したサイトです。
高校時代にこのような方法で化学を勉強していたら、とても楽しくなること間違い無しです。
8-bit Destruction
昔懐かしい8bitのドット絵を3Dで表現したのがこのサイトです。
マウスによって視点を変えることができるので、本来2Dのドット絵の横側を見ることもできてしまいます。
Nine Point Five
地震の起きた量を3Dで具現化したサイトです。
マグニチュードや起きた時間などで絞ることもでき、HTMLの可能性を感じるサイトになっています。
Materials Skin
人の顔を3Dで表現したサイトです。
3D技術の使い道がわかるサイトだと感じます。
Hello Racer
リアルなF1カートを3D表現したサイトです。
車好きの方にはたまらないサイトとなっています。
webcammesh
Webカメラに映った映像をメッシュ表現するサイトです。
Webカメラとも連携ができるとなると、技術力の進歩を感じます。
Shapespark
インテリアを3Dで表現したサイトです。
今後家具業界などで、このような3Dで家具のイメージを共有する技術が進んでいきそうですね。実際に自分がそこに住んでいるイメージが湧くので見ているだけでも楽しめるでしょう。
Suisse Mania
スイスを可愛い3Dで表現したサイトです。
自然豊かなスイスを気球で旅している気分になれます。
以上、HTML5で作られた3Dのサイトをまとめてみました。
実際に自分が動かしてみたり、その場にいるような新鮮さを感じることができると思いますが、自分でも表現したいと思ったものがあればぜひチャレンジしてみてください。
[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
連載バックナンバー
Think ITメルマガ会員登録受付中
他にもこの記事が読まれています
全文検索エンジンによるおすすめ記事
- Windows Azureの利用登録と、サブスクリプションIDの申告（クエスト3）
- 自分でも作ってみたくなる！HTML5でできているゲーム10選
- LFがOSS活用の経済価値に関する調査レポート「Measuring the Economic Value of Open Source」を公開
- Javaはどこへ向かうのか？
- 『e-skin』の小さな発見は大きな革命の起爆剤となるか
- デザイン作業に役立つ！本格的なオープンソースツール6選
- SoftLayerでMongoDB環境を構築してみよう
- スマホでモーションキャプチャを実現する技術 フェイスブックが開発中
- 今さら聞けない！XAMPPをインストールする方法【超初心者向け】
- GMOペパボの人事に聞いた！未経験でも新卒デザイナーを採用したワケとは