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

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

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

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

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

Kenta Toshikura

Lead web designer and front-end developer at Garden Eight.

落書きと謎の生物
DVEIN.com

スペインを中心に映像作品を配信しているインタラクティブ・スタジオ「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

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

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

404 Not Found

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

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

Play Interland - Be Internet Awesome

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の公式サイトで他にもたくさん（１８０個くらい）紹介されているので覗いてみると楽しいと思います。

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