お好きなサイトを三次元化!! 物理演算付きでサイトを 3D プレビューする explosify が楽しい!
エレメントを自動的にボックスモデル化
今回ご紹介するのは、指定されたサイトを三次元ビューに自動的に展開、さらに物理演算付きでレンダリングするという面白いサイトです。
動的にモデルを生成する部分など、内部的にどういう仕組みで動いているのか、個人的には想像できないのですがなんとも楽しいコンテンツです。ブロック要素かなにかをひとつの判断基準にしているのかな?
好きなサイトを三次元化して、ぜひ遊んでみてください。
どんなサイトも一発変換
サイトに訪れると、まずは下の画像のような、爆弾のようなものが表示されたページが出てきます。
テキストボックスが置かれているので、そこに好きなサイトの URL を入力しましょう。
今回はまず wgld.org から試してみました。
日本語のようなマルチバイト文字は、残念ながら文字化けしてしまいますね。
また、ウェブフォントを使っているところも強制的に変更されてしまうようです。
最初はそそり立つような形でモデルが積みあがった状態になっていて、画面内をクリックしたりドラッグしたりすると、その作用を受けてモデル化したオブジェクトが崩れ落ちていきます。
何を基準にしてモデルを分割しているのだろう……
wgld.org は背景が黒くてわかりにくいので、今度はこのサイト、WebGL 総本山の URL を入れてみます。
崩れる前の状態だと、文字化けしたプレビュー画面のようにも見えますね。
画像や、サイト内のレイアウトなどは綺麗に再現されています。
ただ、パッと見ではわかりませんが、全部 3D のモデルに変換された状態になっています。軽くクリックしてやると、物理演算が働いてガラガラと崩れていきます。
クリックする以外にも、ドラッグするとパーツを持ち上げて移動させたり、勢いよくドラッグしてマウスのホールドを解くことで投げるようなこともできます。
いくつか、有名なサイトで試してみましたが、どのサイトでもうまく 3D ビューを展開できました。
実益はほとんどありませんが、とても面白いサイトです。
ぜひ、皆さんもお好きなサイトを三次元化して遊んでみてください。