Three.js デザイン参考

【WebGL/Three.js】3D表現を効果的に用いたサイトをまとめてみました【2022年2月】

WebGl、Three.jsを使った3D表現がステキなサイトを集めてみました。

WebGLで3D表現をしているサイトでよくありがちなのですが、あまりにもデータが重すぎて、特に企業サイトだと「厳しい」サイトがよくあります。3D表現をリッチにしすぎると重くなってしまうので、案外表現できることは限られていると思います。それらの制限をうまいことクリアしているサイトで、”いいな”と思ったサイトをまとめてみました。

ExxonMobil Carbon Capture AR

石油会社エクソンモービルのサイト。WebGLを使っているサイトは概して重くなりがちですが、わりと軽くサクサク動きます。インフォグラフィックとして3D表現を効果的に使っています。

ExxonMobil Carbon Capture AR

Nike PLAYlab. Nike.

今っぽい”チープ”な感じで、80年代、90年代っぽいデザインに仕上げています。レスポンシブ対応されており、ウインドウサイズを変えてもちゃんとボールが跳ね返ります。ビビットなボールなどインパクトがあり、楽しいサイトです。

Nike PLAYlab. Nike.

DELTA QUEST

ローポリで作られた箱庭的空間が楽しいサイトです。オブジェクトをクリックすることで話が進んでいくという作りになっています。

DELTA QUEST

Flowers for Society

"Flowers for Society is a new metaverse for collectors, sneaker heads and the NFT community."("Flowers for Societyは、コレクター、スニーカーヘッズ、NFTコミュニティのための新しいメタバースです。")というサイトらしいです。よくわかりません。
パーティクルで表現された3D空間は、めちゃくちゃカッコイイです。

Flowers for Society

3Dのギャラリーサイト。ただオブジェクトが360°回転するだけですが、3Dのオブジェクト自体が面白いので、ついつい見てしまいます。

The Swell Gallery curated by Ripple

Share Your Christmas

クリスマスメッセージが作成できるサイト。やれることはそんなにないですが、クリスマスモチーフのローポリで作られた空間がステキです。左下の「∞」マークを押すとオブジェクトが変わります。控えめなアニメーションが楽しいです。

Share Your Christmas

Lusion

ロンドンにある制作プロダクションのサイト。レベルが高すぎて意味がわかりません。クライアントワークでもWebGLの技術が多く使われている作品が多いようです。「WORK」も見ておくと良いと思いますが、LusionのTwitter(@lusionltd)のほうが頻繁に情報を発信しているので、そっちをチェックしたほうが効率的です。

Lusion

Garden Eight

東京にあるデジタルデザインスタジオのサイト。メインビジュアルの3Dがカワイイです。オブジェクト差し替えのトランジションや、操作感というかオブジェクトの手触りが気持ちいいです。

Garden Eight

Three.jsにBlenderで作ったオブジェクトを読み込む

Three.jsにBlenderで作成したオブジェクトの読み込み方についての記事になります。下記の前回で作ったものをベースに進めます。 初心者からのThree.js入門 Meshを表示する │ MUK ...

続きを見る

脱初心者、中級者プログラマー、WEBデザイナーにUdemyがオススメです

脱初心者を目指しているプログラマー、WEBデザイナーの方にUdemyがオススメです。 もちろんプログラマー、WEBデザイナー以外にも3DCGデザイナー、CGデザイナーの方にもオススメです! これまで自 ...

続きを見る


-Three.js, デザイン参考

© 2022 MUKOLOG