Carousel with proper rotation and reflection
I’m going to go out on a limb and say that this post will be popular
package { import flash.display.Bitmap; import flash.events.Event; import flash.filters.BlurFilter; import org.papervision3d.core.effects.view.ReflectionView; import org.papervision3d.core.math.Quaternion; import org.papervision3d.events.InteractiveScene3DEvent; import org.papervision3d.materials.BitmapMaterial; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.objects.primitives.Plane; [SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")] public class ClickThenRotateCarousel extends ReflectionView { [Embed(source="assets/pic.jpg")] private var picAsset:Class; private const RADIUS:Number = 400; private const NUM_OF_PLANES:int = 9; private var carousel:DisplayObject3D = new DisplayObject3D(); private var currentQuat:Quaternion = new Quaternion(); private var targetQuat:Quaternion = new Quaternion(); private var slerp:Number = 0; public function ClickThenRotateCarousel() { viewportReflection.filters = [new BlurFilter(3,3,3)]; viewport.interactive = true; surfaceHeight = -100; camera.z = 800; //move camera to the front var pic:Bitmap = Bitmap(new picAsset()); for(var i:int = 0; i < NUM_OF_PLANES; i++) { var material:BitmapMaterial = new BitmapMaterial(pic.bitmapData, true); material.doubleSided = true; material.interactive = true; var plane:Plane = new Plane(material, 100, 100); plane.rotationY = 360 / NUM_OF_PLANES * i; plane.moveForward(RADIUS); plane.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, objectOverHandler); plane.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, objectOutHandler); plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, objectClickHandler); carousel.addChild(plane); } scene.addChild(carousel); addEventListener(Event.ENTER_FRAME, enterFrameHandler); } private function objectOverHandler(event:InteractiveScene3DEvent):void { viewport.buttonMode = true; } private function objectOutHandler(event:InteractiveScene3DEvent):void { viewport.buttonMode = false; } private function objectClickHandler(event:InteractiveScene3DEvent):void { var radians:Number = (carousel.rotationY - event.displayObject3D.rotationY) * Quaternion.DEGTORAD; slerp = 0; currentQuat = Quaternion.createFromMatrix(carousel.transform); targetQuat = Quaternion.createFromAxisAngle(0, 1, 0, radians); } private function enterFrameHandler(event:Event):void { slerp += (1 - slerp) * .05; var quat:Quaternion = Quaternion.slerp(currentQuat, targetQuat, slerp); carousel.transform = quat.matrix; singleRender(); } } }
6 Comments to Carousel with proper rotation and reflection
Pretty nice but I would recommend the carousels at http://www.gotoandlearn.com/ unless you need the full Papervision3D api.
They should perform a bit better and be easier to implement.
December 1, 2008
@Allan - This post shows a full 3D Carousel in Flash Player 9 that rotates in the proper direction when clicked and has a simple reflection.
Lee’s tutorials offer solutions for simpler carousels.
@Allan I am not 100% convinced that FP10 built in 3D performs so much better than PV3D. During my experiments I found out the performance is mainly dependent on how a tool is used and not which tool you choose. In this case, the above example seems to run much smoother that the carousel on gotoandlearn.
The usability is much better here too. This has, of course, nothing to do with which 3d engine was used, but adds a lot to the final effect.
@Allan - if you have the time to spare to get to grips with PV3D, then it will offer you a world of possibilities that the FP10 3D classes do not offer.
December 17, 2008
Hi,
Thanks for the reflection code. I used in my project the same,where i got the actual plane image turned up-side down. Could anyone tell me the suggestion?
Thanks in advance.
Bas.S
December 19, 2008
Hi,
I’ve noticed that using an enter frame event with singleRender() can really slow down performance. Is there are way to use ReflectionView with startRendering()?
Leave a comment
Search
Subscribe
Recent Posts
- Looking around the inside of a Sphere
- Tweening the Camera and Tweening lookAt()
- Cube Inside Faces and Outside Faces
- Happy New Year!
- Slerp Explorer
- Quaternion Explorer
- Click then Tween Camera to Plane
- Switching a MovieMaterial on the face of a Cube - replaceMaterialByName
- Merry Christmas!
- Flint Pixels 2 - Random Drift and Rotate Emitter
- Papervision3D with Box2DFlash Part 4 - Distance Joint
- Flint Pixels
- Papervision3D with AS3Dmod Hello World Example
- .swc and .zip updated to revision 851
- Cube with different sides - MaterialsList
Recent Comments
- psych on requests
- Ruby on requests
- Holland Risley on Papervision3D with AS3Dmod Hello World Example
- Siroko on requests
- camden_kid on Adding a BasicView to a Flex UIComponent

December 1, 2008