お姉チャンバラ Revolutionとうゲームがありまして、これの公式サイトにあるスクリーンショットがちょっと面白いんです。マウスで画像をドラッグして、360度の全方向から見ることができるようになっています。

この3Dスクリーンショットを見てから、ぜひPoserのレンダリング画像でも同じようなことをやってみたいと思っていたのですが、先日DAZにV4.2のスクリーンショットで先を越されてしまいました。

ただ、DAZのものはFlashを使っています。私はより汎用的なJavaScriptで実現してみたいと思っていたので、ちょっとだけ違います。また、Poserで360度の回転画像といえば、Render360のmatoさんが以前からやられていますが、こちらもFlashです。

と、いうわけでJavaScriptでやってみました。「続きを読む」の先にあります。(↓これは元画像の一部。急いで作ったので適当です)

↓こちらが作ったもの。画像下のスライダで操作します。うまく動いてくれると良いのですが(^^;

JavaScriptの便利なライブラリとネット上の情報に助けられて、何とかイメージ通りに仕上げることができました。IE6とFirefoxで動作確認しています。主に参考にさせていただいたのは以下のページ。

Slider (WebFX)
スライダーにはこのライブラリを使っています。
小粋空間: Slider の利用方法
上のライブラリの解説記事。
CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル:phpspot開発日誌
切り替えて表示している画像は、実は大きな一枚の画像になっていて、こちらの記事の方法で一部分を表示しています。
第五章　クライアントサイドの技術：スタイルシートへのアクセス方法 - 位置指定 -
画像の表示位置を動的に指定する方法はこちらを参考にしました。
hover時の背景画像ちらつきに対処する - Archiva
IEでスライダーを動かしたとき、マウスカーソルが一瞬だけ砂時計のアイコンに変わる現象が見られたので、こちらの方法で解決しました。

Poserではアニメーション機能を使ってカメラを回転させながら15枚の画像をレンダリングし、画像形式で保存→できた画像をJointogetherで一枚に連結→ファイルをアップロードしてHTMLとJavaScriptを記述・・・という流れになっています。

ちなみにHTMLとJavaScriptはこんな感じです。これを元に試してみる際は「http〜」となっているURLの部分を必ず修正してからお使いください。なお、補償もサポートもできませんので自己責任でお願いします