あむちょです。

以前、タグクラウドを3Dで表示しようとしたけどその続き。

前回の投稿は以下から
HTML5とJavaScriptで3Dタグクラウド１歩手前

前回作ったやつをちょこっと改良。とりあえず格子を増やして滑らかにしてみました。

3dTagCloud

相変わらずただクルクル回るだけです。

で

今回は本来の目的であるタグを表示してみました。平面上で均等に並べたあと、球面上に変換しているので並びが均等ではありません。

3dTagCloud_test

あとは並び順を直して、クリックしたらリンクに飛べるようにする必要があるが、HTML5にはリンクに飛ばすアンカーが使えないので、プログラム上で処理するしかなさそう。

Z値が手前側にあるタグの左上座標(x,y)と右下座標(x1,y1)、クリック座標を(mouseX,mouseY)とした時。

x <= mouseX <= x1
y <= mouseY <= y1

を満たせばクリックを検出できそうです(ｙ軸は下に向かって正)。ただタグが増えた分だけ処理が必要になります。HTML5を使わずにJavaScriptだけで書いた方が楽です。

おまけで某ゲームのエンドロール風タグクラウドにもチャレンジしてみました。相変わらず表示するだけ。クリックした位置で上下に動きます。

3dTagCloud2

とりあえず完成したらサイドバーにおく予定です。これを置いたところでページビューが増えるかどうかは

かけた時間の割に微妙です。

　[ad]