papervision3d学习笔记:螺旋效果

 

很久之前就想实现螺旋的旋转效果，没想到看了外国的一篇博文，已经把他实现了。我把他的代码改了一个简单的方式，实现了旋转的效果：

 

 这种效果，涉及到圆的知识，以及螺旋梯形原理。把他切开平面图可以看到，圆柱的底形是一个圆，我们可以将这个圆分割成10份，每一份36度。然后，随着高度的上升，相应的z 轴高度也相应增加。这样就可以实现以上的效果了

 

 {

   x：平面x

   y：平面y

   z： 涉及到高度

}

 

package { import flash.display.Sprite; import flash.events.*; import org.papervision3d.cameras.Camera3D; import org.papervision3d.scenes.Scene3D; import org.papervision3d.materials.*; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.view.Viewport3D; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.objects.primitives.*; import org.papervision3d.materials.utils.MaterialsList; public class Example extends Sprite { private var viewport:Viewport3D=new Viewport3D(800,600);//创建窗口 private var renderer:BasicRenderEngine= new BasicRenderEngine();//渲染引擎 private var camera:Camera3D = new Camera3D();//´摄影机 private var pc:Plane = new Plane(); private var scene:Scene3D = new Scene3D();//创建一个三维场景 private var angle:Number = 0;//角度 public function Example() { init3D();//初始化3d模型 } private function init3D():void { addChild(viewport);//添加显示窗口 camera.z =400; camera.target = pc; var num:int = 100; var numOfRotations:Number = 5; var anglePer:Number = ((Math.PI*2) * numOfRotations) / num; var yPos:Number = 0; // Create the planes //var pa:Array = new Array(); //创建平面，并且赋予贴图 for (var i:uint=0; i<100; i++) { var cm:BitmapAssetMaterial = new BitmapAssetMaterial("air"); cm.oneSide = false; var p:Plane = new Plane(cm, 100, 100); p.x = Math.cos(i * anglePer) * 500; p.z = Math.sin(i * anglePer) * 500; p.y = yPos += 50;//实现螺旋一个地方 p.rotationY = (-i*anglePer) * (180/Math.PI) + 270; scene.addChild(p); } addEventListener(Event.ENTER_FRAME, Run); } private function Run(event:Event):void { var dist:Number = ((stage.mouseY) - stage.stageHeight * 0.5) * -0.1; var dist2:Number = ((stage.mouseX) - stage.stageWidth * 0.5) * 0.0005; angle += dist2; camera.x = Math.cos(angle) * 1000; camera.z = Math.sin(angle) * 1000; camera.y += dist; if (camera.y < 369) { camera.y = 369; } if (camera.y > 4755) { camera.y = 4755; } pc.y = camera.y; renderer.renderScene(scene, camera, viewport);//渲染图形 } } }

 

 

 

如果你有兴趣修改

    p.x = Math.cos(i * anglePer) * 500;
    p.z = Math.sin(i * anglePer) * 500;
    p.y = yPos += 50;//实现螺旋一个地方

 

变成：

    p.x = Math.cos(i * anglePer) * 500;
    p.y = Math.sin(i * anglePer) * 500;
    p.z = yPos += 50;//实现螺旋一个地方

 

你会发现又有一 个不同的效果出现。

 

这个地方主要涉及到就是一个坐标的巧妙应用。结合三维的引擎强大功能实现炫的效果。

大概介绍是这样，顺便将这篇文章作者发一下：http://theflashblog.com 有兴趣可以到这里看看。

注意：由于作者使用的版本是旧版本，所以编译的时候会出错，注意版本，这个编译的版本是pv3d 2.8的版本。

 

 

下面是网络上的一个源文件：原理大概和上面相同，采取xml+图片的技术 进行外部图片加载，并且对plane对象进行贴图。 同样为了增加一下交互性，效果可以看起来更加cool，可以进行鼠标监听监听。看起来效果更加酷：

 

 基本用到的技术：flash+xml配搭 +鼠标交互应用。总的来讲pv3d封装了这些类让实现效果变得更加容易。