お姉チャンバラ 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の部分を必ず修正してからお使いください。なお、補償もサポートもできませんので自己責任でお願いします
JavaScriptで360度回転、すごいですね。
スライダを使って思い通りの場所で止められるのが、とても便利そうです。
いろいろなサイトを参考にされていて、とても研究されているのですね。
JavaScripだけでこんなことができるとは思いもしませんでした。
私も多少プログラミングとかしてたりするのですが...。
あと、ゲームの回転画像は背景まで作られていて、さらに階段の部分でカメラの高さが変化したり、武器が画面の方まで伸びていたり、色々工夫されていて面白かったです。
私も一度昨年の和風展のときに背景というか、足元に箱庭風のセットを付けた回転画像を作ったことがあったのですが、予想外に大変だったのでそれ以来一度も作っていません。
また、いつか背景をつけたものに挑戦してみたいです。
そして、DAZがV4.2のスクリーンショットで回転できるようにしていたのは、初めて知りました。
今後、Poserの服などを購入できるサイトで360度からアイテムを確認できるようなシステムが普及すると、とても便利そうですね。
回転画像についてこんなに色々見せていただいて、とても楽しかったです。
そして、私のブログをLinkにいれて下さってありがとうございます。
私の方からもこちらをリンクさせていただきたいと思います。
長々とすみませんでした。
これからもよろしくお願いします。
記事を書いたときトラックバックを送ろうか迷ったんですが、関係ない記事に送るのも悪いかと思って、さりげなくリンクするだけにしていました。読んでいただけてよかったです。しかもちゃんと別の環境でも動いているようで一安心(^^;
＞階段の部分でカメラの高さが変化
私もここがお気に入りのポイントですｗ 面白いですよね。こんな形のゲームのスクリーンショットは初めて見たのでちょっと衝撃でした。
そもそも、せっかくモデルは3Dなのに、レンダリングしたら平面になってしまうというのはもったいないですね。360度の回転画像にこだわって作品を作っておられるmatoさんの取り組みは素晴らしいと思います。ちなみに個人的な妄想ですが将来的には写真もテレビも立体になればよいなと思っています。
とりあえず今回は適当な画像しか用意できませんでしたが、今度はもうちょっとましな画像で試してみたいですね。私も背景付きのレンダリングを検討中です。
よければまたお越しください。でわでわ〜。