papervisionで360度のパノラマ画像を取り込み、マウスで動かしてみました。
マウスの位置がステージの真ん中にあれば止まり、右なら右に回り、左なら左に回ります。
とっても簡単に製作できます！コードも50行以内におさまりました。
papervision3dのバーションは2.0のGreat Whiteを使ってます。
今回、360度パノラマ写真を撮るためにiPhoneとiPhone用アプリ、Panoを使いました。このPanoは複数の写真を合成してくれるアプリです。写真を撮って次の写真を撮るときに、前回撮った写真がうっすらとでてくるのでとても撮りやすいです。350円の有料アプリですが、最大16枚撮影可能・縦横両方撮影可能でとてもコストパフォーマンスに優れたアプリです。
以下、コードです。
[sourcecode language=”as3″]
package{
import flash.display.*;
import flash.events.*;
//――――――――――――――――――――――――――――――――――――papervision3d
import org.papervision3d.view.BasicView;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.objects.primitives.Cylinder;
import org.papervision3d.cameras.CameraType;
import org.papervision3d.cameras.Camera3D;
[SWF(width = "1024", height = "500", frameRate = "30", backgroundColor = "0")]
public class Main extends BasicView {
private var cylinder:Cylinder;
public function Main(){
super(1024, 500, true, false, CameraType.FREE);
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.quality = StageQuality.HIGH;
init3D();
}
public function init3D():void{
//画像マテリアル用プロパティ
var objRaduas :Number = 400 / Math.PI;
var objHeight :int = 95;
var quality :int = 32;
//画像
var materials:BitmapFileMaterial = new BitmapFileMaterial("http://www.mztm.jp/wp/wp-content/uploads/2009/06/tachino_s101.jpg", false);
materials.doubleSided = true;
cylinder = new Cylinder(materials, objRaduas, objHeight, quality, quality, -1, false, false);
scene.addChild(cylinder);
//カメラ
camera.x = camera.y = camera.z = 0;
camera.focus = 680;
camera.zoom = 1;
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
startRendering();
}
private function enterFrameHandler(event:Event):void{
// 回転
var pan:Number = (mouseX – stage.stageWidth / 2) / 30;
camera.rotationY += pan / 12;
}
}
}
[/sourcecode]
●初期設定
papervision3dのCylinderクラスを呼び、シリンダー用変数を宣言。
superは継承元であるBasicViewから受け継いだパラメータの初期設定を行ってます。
[sourcecode language=”as3″ firstline=”12″]
public function Main(){
super(1024, 500, true, false, CameraType.FREE);
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.quality = StageQuality.HIGH;
init3D();
}
[/sourcecode]
●画像のパラメータ設定
シリンダーの半径・高さ・ポリゴン分割数を設定します。
[sourcecode language=”as3″ firstline=”22″]
public function init3D():void{
//画像マテリアル用プロパティ
var objRaduas :Number = 400 / Math.PI;
var objHeight :int = 95;
var quality :int = 32;
[/sourcecode]
●シリンダーに画像を貼り付け、表示する
papervision3dのBitmapFileMaterialクラスを使って使用したい画像とリンクさせる。
→ブログの都合上、絶対パスにしてますが、相対パスでもいけます。
→外側に貼り付けた画像を内側から見るため、画像は左右反転してからリンクしてください。
画像を両面とも表示するよう設定します。
[sourcecode language=”as3″ firstline=”28″]
//画像
var materials:BitmapFileMaterial = new BitmapFileMaterial("http://www.mztm.jp/wp/wp-content/uploads/2009/06/tachino_s101.jpg", false);
materials.doubleSided = true;
cylinder = new Cylinder(materials, objRaduas, objHeight, quality, quality, -1, false, false);
scene.addChild(cylinder);
[/sourcecode]
●視点の設定をして、レンダリングをします。
[sourcecode language=”as3″ firstline=”34″]
//カメラ
camera.x = camera.y = camera.z = 0;
camera.focus = 680;
camera.zoom = 1;
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
startRendering();
}
[/sourcecode]
●パン(回転)の設定をします。
44行目の30のパラメータは大きくすると遅く回転し、低くすると速く回転します。
45行目の12のパラメータは数字が少なくなるといきなり止まるようになります。
[sourcecode language=”as3″ firstline=”42″]
private function enterFrameHandler(event:Event):void{
// 回転
var pan:Number = (mouseX – stage.stageWidth / 2) / 30;
camera.rotationY += pan / 12;
}
}
}
[/sourcecode]
画像を回転する際に走査線のようなものが走って気になりますので、この点についてはもっと検証していこうと思います。
シリンダー用のパラメータやキューブ型やプレーン型のパラメータについては以下のブログが参考になります。
throw Life – apervision3Dのプリミティブ・オブジェクト – Cone, Cube, Cylinder, Sphere –
