[Papervision3D] 图片墙的制作

[复制链接]

oaioai

4 主题	0 听众	70 积分

设计初学者

Rank: 1

纳金币: 10
精华: 0

电梯直达

楼主

发表于 2013-11-4 09:56:32 |只看该作者 |倒序浏览

使用pv3d 类库真的可以创作出不错的效果演示，这种效果已经见得很多了，实际做法也不是很难。

基本原理是通过圆形的方式对图片进行分布，然后通过rotationY 偏转每一张图片角度，促使向中心点连线垂直。

讲到分布，圆形分布是其中一种比较常用的手法。通过对图片进行平均的分布位置，围绕圆来进行。

制作过程：

   1. 准备papervision3d 的类库

   2. 准备补间引擎类库TweenMax 或者其他

   3 .准备两套图片，一大一小对应起来。

   4. 对图片实现交互效果，弹出和缩放，通过TweenMax 进行

   5.采取一次加载的办法，当点击加载之后通过保存方式对其进行显示。

初步示意图如图，每一张图片都会与中心向注册点连线垂直。这一点当我们求出出来就能实现到如上面的效果。

偏移角度计算：通过平行线互补角为180的关系求出，（180-i*perAngle）+90=-i*perAngle+270;这个方式可以求出偏移的角度。

下面的类写在一个里面，但是建议将其分开处理。使主类尽量减少不必要的代码开支。看起来更加简洁一些。

  Main.as

  plane2d.as

  还可以再细分起来。

注意：由于方便一点编译所以将整个类写出来，但是为了分类减少主类的大小和复杂的逻辑，还是可以将部分功能抽出来。

package
{
import org.papervision3d.core.utils.Mouse3D;
import org.papervision3d.events.InteractiveScene3DEvent;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.view.BasicView;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.materials.*;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.core.effects.view.ReflectionView;
import org.papervision3d.core.render.filter.BasicRenderFilter;
import org.papervision3d.core.utils.virtualmouse.*;
import flash.filters.*;
import flash.events.*;
import flash.display.Sprite;
import flash.utils.Dictionary;
import flash.display.Bitmap;
import flash.display.Loader;
import flash.net.URLRequest;
import com.greensock.TweenMax;
[SWF(width="640", height="480", frameRate="30", backgroundColor="0x000000")]
public class Main extends Sprite
{
private var pc:Plane = new Plane();
private var camera:Camera3D=new Camera3D();//摄影机
private var scene:Scene3D=new Scene3D();//场景
private var engine:BasicRenderEngine=new BasicRenderEngine();//渲染引擎
private var view:ReflectionView=new ReflectionView(640,480,true,true);
private var angle:Number = 0;
private var vMouse:VirtualMouse;
private var mouse3D:Mouse3D;
private var data:Dictionary = new Dictionary(true);//保存已经加载的图片
private var tempURL:String;
public function Main()
{
init3D();
}
//初始化图片位置和设置
private function init3D():void
{
var contain:DisplayObject3D = new DisplayObject3D();
var perAngle:Number = 2 * Math.PI / 20;
for (var i:int=0; i<20; i++)
{
var cm:BitmapFileMaterial = new BitmapFileMaterial("wallimages/thumbs/"+(i+1)+".jpg");
var p:Plane2D = new Plane2D(cm, 100, 100);
cm.interactive = true;
p.x = Math.cos(i * perAngle) *350;
p.z = Math.sin(i * perAngle) * 350;
p.url = "wallimages/" + (i + 1) + ".jpg";//大图片路径
p.rotationY = ( -i * perAngle) * (180 / Math.PI) + 270;//计算的偏移值
p.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, onMouseOverHandler);
p.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, onMouseOutHandler);
p.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onMouseClickHandler);
contain.addChild(p);
}
view.scene.addChild(contain);
view.camera .z = -600;
view.camera.target = pc;
//设置反射
view.surfaceHeight =-100;
view.viewportReflection.alpha = 0.5;
view.viewportReflection.filters = [new BlurFilter(3, 3, 1)];
//vMouse = view.viewport.interactiveSceneManager.virtualMouse;
// mouse3D = view.viewport.interactiveSceneManager.mouse3D;
// Mouse3D.enabled = true;
addChild(view);
addEventListener(Event.ENTER_FRAME,render);
}
private function onMouseOverHandler(event:InteractiveScene3DEvent):void
{
}
private function onMouseOutHandler(event:InteractiveScene3DEvent):void
{
}
private function onMouseClickHandler(event:InteractiveScene3DEvent):void
{
//判断这张图片是否第一次加载
if(getImage(event.currentTarget.url)==null)
{
loadImage(event.currentTarget.url);
}
else
{
showImage(event.currentTarget.url);
}
}
//绘制底图背景
private function drawBase(bitmap:*, w:Number, h:Number, color:uint = 0xffffff):Sprite
{
var filter:DropshadowFilter=new DropShadowFilter();
filter.strength=0.3;
var shape:Sprite = new Sprite();
shape.addChild(bitmap);
shape.graphics.lineStyle(0,0,0);
shape.graphics.beginFill(color);
shape.graphics.drawRect(bitmap.x-w/60,bitmap.y-h/60,w+w/30,h+h/30);
shape.graphics.endFill();
shape.filters = [filter];
return shape;
}
//添加图片
private function addImage(id:String,obj:*):void
{
data[id] = obj;
}
//获取图片
private function getImage(id:String):*
{
return data[id];
}
//加载图片
private function loadImage(url:String):void
{
var loader:Loader = new Loader();
tempURL = url;
loader.load(new URLRequest(url))
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadImageComplete);
}
//显示图片
private function showImage(url:String):void
{
var contain:Sprite = getImage(url);
addChild(contain);
contain.x = stage.stageWidth / 2;
contain.y = stage.stageHeight / 2;
contain.scaleX = contain.scaleY = 0;
contain.alpha = 0;
TweenMax.to(contain, 0.5, { scaleX:1, scaleY:1,alpha:1 });
}
//加载图片-- 删除监听
private function onLoadImageComplete(event:Event):void
{
event.currentTarget.removeEventListener(Event.COMPLETE, onLoadImageComplete);
var bmp:Bitmap = Bitmap(event.currentTarget.content);
bmp.x = -bmp.width / 2;
bmp.y = -bmp.height / 2;
var contain:Sprite = drawBase(bmp, bmp.width, bmp.height);
contain.addEventListener(MouseEvent.CLICK, onBackHandler);
contain.addChild(bmp);
addChild(contain);
contain.x = stage.stageWidth / 2;
contain.y = stage.stageHeight / 2;
contain.scaleX = contain.scaleY = 0;
contain.alpha = 0;
TweenMax.to(contain, 0.5, { scaleX:1, scaleY:1, alpha:1 } );
addImage(tempURL, contain);
}
private function onBackHandler(event:MouseEvent):void
{
var mc:*= event.currentTarget;
TweenMax.to(mc, 0.5, { scaleX:0, scaleY:0, alpha:0, onComplete:removeContain } );
function removeContain():void
{
removeChild(mc);
}
}
private function render(event:Event):void
{
//距离检测
var dist:Number = ((stage.mouseX) - stage.stageWidth * 0.5) * 0.005;
var dist2:Number = ((stage.mouseY) - stage.height * 0.5) *0.01;
angle += dist;
//旋转镜头
view.camera.x =600*Math.cos(angle*Math.PI/180);
view.camera.z =600*Math.sin(angle*Math.PI/180);
view.camera.fov += dist2;
if (view.camera.fov>90)
{
view.camera.fov = 90;
}
else if( view.camera.fov<50)
{
view.camera.fov = 50;
}
view.singleRender();//渲染
}
}
}
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.core.proto.MaterialObject3D;
class Plane2D extends Plane
{
//继承plane类，增加一个url 属性
public var url:String;
public function Plane2D( material:MaterialObject3D=null, width:Number=0, height:Number=0, segmentsW:Number=0, segmentsH:Number=0 )
{
super(material, width, height, segmentsW, segmentsH);
}
}