PR

最先端を感じる!HTML5で3D表現をしているサイト10選

2016年9月30日(金)
TechAcademy

HTML5で3D表現をしているサイトを集めてみました。特に難しい技術を使用せず、ここまでクオリティの高いものが作れるという点で参考になるはずです。

サイト上で立体的な表現をしているものは、日頃あまり見ないので新鮮さを感じるでしょう。

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

ROME

html14_01

シンプルな雲の3D背景が広がるサイトです。

マウスを動かすことによって、雲の視点が変わり、実際に空を飛んでいるかのような感覚になります。

ROME

The GLOBE of ECONOMIC COMPLEXITY

html14_02

世界のお金のバランスを見やすく3Dで具現化したのがこのサイトです。ハーバード大学の学生が作り上げました。

学生でもこのクオリティのものが作れるとは感服ですね。

The GLOBE of ECONOMIC COMPLEXITY

Chemdoodle

html14_03

化学結合を3Dで表現したサイトです。

高校時代にこのような方法で化学を勉強していたら、とても楽しくなること間違い無しです。

Chemdoodle

8-bit Destruction

html14_04

昔懐かしい8bitのドット絵を3Dで表現したのがこのサイトです。

マウスによって視点を変えることができるので、本来2Dのドット絵の横側を見ることもできてしまいます。

8-bit Destruction

Nine Point Five

html14_05

地震の起きた量を3Dで具現化したサイトです。

マグニチュードや起きた時間などで絞ることもでき、HTMLの可能性を感じるサイトになっています。

Nine Point Five

Materials Skin

html14_06

人の顔を3Dで表現したサイトです。

3D技術の使い道がわかるサイトだと感じます。

Materials Skin

Hello Racer

html14_07

リアルなF1カートを3D表現したサイトです。

車好きの方にはたまらないサイトとなっています。

Hello Racer

webcammesh

html14_08

Webカメラに映った映像をメッシュ表現するサイトです。

Webカメラとも連携ができるとなると、技術力の進歩を感じます。

webcammesh

Shapespark

html14_09

インテリアを3Dで表現したサイトです。

今後家具業界などで、このような3Dで家具のイメージを共有する技術が進んでいきそうですね。実際に自分がそこに住んでいるイメージが湧くので見ているだけでも楽しめるでしょう。

Shapespark

Suisse Mania

html14_10

スイスを可愛い3Dで表現したサイトです。

自然豊かなスイスを気球で旅している気分になれます。

Suisse Mania

以上、HTML5で作られた3Dのサイトをまとめてみました。

実際に自分が動かしてみたり、その場にいるような新鮮さを感じることができると思いますが、自分でも表現したいと思ったものがあればぜひチャレンジしてみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。


TechAcademyマガジンは、オンラインのプログラミングスクールTechAcademyが運営する教育×ITに関するWebメディアです。トレンドや最新情報など役に立つ記事を発信しています。
https://techacademy.jp/magazine/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています

最先端を感じる!HTML5で3D表現をしているサイト10選 | Think IT(シンクイット)

Think IT(シンクイット)

サイトに予期せぬエラーが起こりました。しばらくたってから再度お試しください。