2020.04.17

コーディング

デザイン

【three.js入門・第0回】three.jsサイト紹介

こんにちわ
フロントエンドの葉っぱ一号です
 
さっそくですが皆さん
WebGLって聞いたことありますか?

WebGLとは
ウェブブラウザで3次元コンピュータグラフィックス
を表示させるための標準機能である。

さすがウィキペディア先生!
 
でも「3次元コンピュータグラフィックスを表示させる」
ってすごく難しそう

大丈夫
three.jsを使えばWebGLをとっても簡単に
扱うことができるんだよ

IT土方さん!

という訳で、今回から「three.js入門」と題しまして、WebGLを使用する際の作業を簡単にしてくれるライブラリ「three.js」について書いていく予定です。

今回は本編に入る前の第0回として、three.jsを使用したサイトやデモの紹介をやってみようと思います。
そもそもthree.jsを使ってみたいと思うかどうかが問題ですからね!
 
ではさっそくどうぞ👇

さり気ない奥行の演出
Kenta Toshikura | Web design & Development

Kenta Toshikura | Web design & Development

クリエイティブ・デジタル・プロダクション「ガーデンエイト」でwebのデザインとフロントエンドをされている利倉健太さんの個人サイトです。
 
インタラクティブな動きに奥行を感じ、流体的な画面遷移が気持ちいい。
サイト全体のデザイン自体もセンス溢れるものになっています。

kentatoshikura.com

落書きと謎の生物
DVEIN.com

DVEIN

スペインを中心に映像作品を配信しているインタラクティブ・スタジオ「Dvein」のサイトです。
 
カオスです。
「Dvein」というスタジオ自体がパワー溢れる奇抜な作品をつくるスタジオのようです。人を選ぶかもしれません。
TOP画面には落書きができて、謎の微生物の絵みたいなのをクリックすると動き出したりします。
ぶっ飛んだものの中になんとなく懐かしさを感じるのは私だけでしょうか。

DVEIN

DVEIN is a director with two heads, one is called Teo and the other Carlos. We work in commercials, music videos and films and we love ex...

癒しのサウンドと一緒に絵本チックな世界観
Short Trip – Alexander Perrin

Short Trip – Alexander Perrin

three.jsは3Dだけじゃないんです。
可愛らしいイラストの世界で、ちょっとした旅に出ましょう。
操作はキーボードの左右キーだけ。
世界観と環境音に癒されます。

Short Trip

An hand-drawn, interactive illustration about a tram driver, mountains, cloaked cats and everything in between.

three.jsデモ 目玉
Eye texture raytracing demo

Eye texture raytracing demo

リアルな目玉です。
リアルすぎて気持ち悪い。
パラメータ色々いじったら目玉が色々変わります。
気持ち悪いです。
ただthree.jsのイメージをつかめるかもしれません。

Eye texture raytracing demo

googleが提供する教育ゲーム
Interland

Interland

googleが子供たちに向けて作ったインターネットを学ぶためのオンラインゲームです。
何が真実で何がうその情報かを見分けられるようにするクイズゲーム「Reality River」
必要な情報を集めて、それを盗もうとするハッカーから逃げるレーシングゲーム「Tower of Treasure」
SNSなどで人に対してどのような振る舞いをすべきかを学べる冒険ゲーム「Kind Kingdom」
情報を誰とシェアすべきで誰とシェアすべきでないかを考えるパズルゲーム「Mindful Mountain」
3Dをフルに使ったコンテンツですね。

Interland

Interland is an adventure-packed online game that puts the key lessons of digital citizenship and safety into hands-on practice. Play you...

終わりに

むやみやたらに紹介するのもどうかと思ったので5つだけ紹介してみました。
興味ある方はthree.jsの公式サイトで他にもたくさん(180個くらい)紹介されているので覗いてみると楽しいと思います。

次回からはthree.jsの紹介と、基本要素の説明をしていきます。

ご覧いただきありがとうございました。

この記事を書いた人

葉っぱ一号

葉っぱ一号

フロントエンドエンジニア

おいしいお店を探すのが好きです。おいしいお店のために遠出もしちゃいます。遠出したい衝動のためにおいしいお店を探すのかもしれません。そんなものですよね。