最先端を感じる!HTML5で3D表現をしているサイト10選
HTML5で3D表現されているサイトを集めています。最先端を感じるような出来栄えになっているサイトばかりなので、こういったものを作りたいと感化されるでしょう。立体的なサイトを作りたいという人は、ぜひ参考にしてみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名 調査手法:インターネット調査
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のドット絵の横側を見ることもできてしまいます。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは?
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか?
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
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デザインオンラインブートキャンプを開催しています。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか?
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)