HTML5で3D

※この記事はtkmh.me上で掲載している記事 (2014.09.30 公開) を転載したものです。内容があまりないですが、1つ目のデモのCSSアニメーションが表現としては面白いので、こちらでも残しておこうと思い、転載しました。

以下、原文のまま転載します。

---------

ちょっと前に作ったやつですが、HTML5における3Dの表現の実験。正二十面体を作ってみました(画像クリックでデモが見れます)。

1つ目はCSSオンリー。正三角形を半分にした図形を組み合わせて正二十面体を構成しています。マウスオーバーに反応して長方形に変形。けっこう面白い動きができたかなと思っています。ただし、IEでは

transform-style: preserve-3d

が非サポートなので、潰れてしまいます。

2つ目はAway3Dを使用してWebGLで。こちらはインタラクションなしです。正三角形を組み合わせて構成しています。ActionScript版を使用したことが会ったのですが、リファレンスがわかりにくかったのでここまでしかやりませんでした。。

3つ目はthree.jsを使用したものです。こちらもインタラクションなし。真ん中はただの立方体、右ははじめから用意されている正二十面体のメソッドで生成したもので、左は正三角形を組み合わせたものです。同じマテリアルを設定していますが、見え方が違いますね。

やはり表現力はCSSよりもWebGLのほうが圧倒的に高いです。でもCSSでここまでできるのもスゴイ。

また、ついにiOS8からsafariでWebGLがサポートされたので、表現力の高いスマホサイトもこれから出てくるかもしれません。

---------

2018年現在、Away3Dを使ったコンテンツってほとんど見たことない気がします。Flash時代ではPapervision3DかAway3Dかという感じでしたが、WebGLの3Dコンテンツだとthree.jsが強いですね。

また、今だからわかることですが、3つ目のデモで、正三角形を組み合わせたものと、プリミティブな正二十面体で見え方が違うのは、頂点法線が異なるからですね。昔はわかってませんでした。

こうやって昔の記事を掘り起こすのもまた再発見があって良いかも知れません。