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では、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。
