読者です 読者をやめる 読者になる 読者になる

flandlescarlet's diary【情報工学生の備忘録】

元機械工学科所属だった情報工学生です。JavaScriptで適当に何かを作ったり、絵を描いていたりします。

JavaScriptライブラリthree.jsで作成された3D作品の中でお勧めをピックアップ

Webで見る3Dのサイト

前回記事で話したthree.jsですが本格的に見てみると他にも興味深い作品もありましたので

説明も加えて紹介させていただきます。

voxels

http://mrdoob.com/projects/voxels/

概要としてはブロックをユーザーが操作して作品を制作していくものです。

操作としては、0-9キーでカラー選択を行い、マウスドラッグで視点切り替えで行います。shift+Clickで作成したボックスを削除します。矢印キーで製作場所の移動が可能となります。製作してみたところかなり広い範囲で作成出来るようです。ブロックが遠くなった場合は視覚上消えますが、再度元の場所に製作場所を戻せばブロックは視覚内に戻ってきます。

 

 Rome

http://www.ro.me/

ほとんど閲覧という形になりますが、最初のムービー以外は全てJavaScriptによる絵画で3Dムービーを再現しています。

面白いところはマウスカーソルが直接、視点切り替えになり、途中建築物のようなステージの場所に辿り付きますが、カーソルを当てたところに自然が生まれるようですね。これはなかなか面白いと思いました。ちなみにFirefoxで閲覧しましたが、負荷が重いのか途中で強制終了させられましたので軽量な状態の時に閲覧してみると最後まで見れるかと思います。

 

aquarium

http://webglsamples.googlecode.com/hg/aquarium/aquarium.html

この水族館もなかなか綺麗でJavaScriptで製作したとは思えない完成度です。

メニューから魚の数を変えることができ他にも水族館の見る視点を変えることも出来ます。

 

World Population

http://data-arts.appspot.com/globe

これは地球全体の人口を見る模式図みたいなものですね。

年代が3つ用意されており、それぞれの人口量を3Dのグラフとして現地に絵画しています。グラフならば2Dでcanvasを用いて作成できるのですが。three.jsを用いれば3D空間にも絵画出来るようになるのですね。