Click then Tween Camera to Plane
I posted a similar example in the archive over a year ago now that turned out to be quite popular. Since that’s now outdated, here’s a quick n’ dirty updated version:
All images come from dryicons.com/
package { import flash.display.Bitmap; import flash.display.Sprite; import flash.events.MouseEvent; import gs.TweenMax; import gs.easing.Cubic; 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; import org.papervision3d.view.BasicView; [SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")] public class TweenToSpatialPlanes extends BasicView { [Embed(source="assets/1.jpg")] private var oneAsset:Class; [Embed(source="assets/2.jpg")] private var twoAsset:Class; [Embed(source="assets/3.jpg")] private var threeAsset:Class; [Embed(source="assets/4.jpg")] private var fourAsset:Class; [Embed(source="assets/5.jpg")] private var fiveAsset:Class; [Embed(source="assets/6.jpg")] private var sixAsset:Class; private var assets:Array = [oneAsset, twoAsset, threeAsset, fourAsset, fiveAsset, sixAsset]; private static const NUM_PLANES:int = 40; private static const TWEEN_TIME:Number = 2; private static const DISTANCE_FROM_PLANE:Number = 500; private var cameraWithSlerp:CameraWithSlerp = new CameraWithSlerp(); private var cameraStart:DisplayObject3D = new DisplayObject3D(); private var cameraTarget:DisplayObject3D = new DisplayObject3D(); private var startQuaternion:Quaternion = null; private var endQuaternion:Quaternion = null; private var currentQuaternion:Quaternion = null; public function TweenToSpatialPlanes() { setupPapervision3D(); setupBackground(); setupPlanes(); singleRender(); } private function setupPapervision3D():void { viewport.interactive = true; cameraWithSlerp.target = null; cameraWithSlerp.slerp = 0; cameraStart.z = -1000; scene.addChild(cameraStart); } private function setupBackground():void { //the background is for the "click outside" events var backgroundSprite:Sprite = new Sprite(); backgroundSprite.graphics.beginFill(0x000000); backgroundSprite.graphics.drawRect(0, 0, width, height); backgroundSprite.graphics.endFill(); addChildAt(backgroundSprite, getChildIndex(viewport)); backgroundSprite.addEventListener(MouseEvent.CLICK, backgroundSprite_clickHandler); } private function setupPlanes():void { for(var i:int = 0; i < NUM_PLANES; i++) { var bitmapMaterial:BitmapMaterial = createRandomBitmapMaterial(); bitmapMaterial.interactive = true; bitmapMaterial.doubleSided = true; bitmapMaterial.precise = true; var plane:Plane = new Plane(bitmapMaterial); plane.x = Math.random() * 5000 - 2500; plane.y = Math.random() * 5000 - 2500; plane.z = Math.random() * 2500; plane.rotationX = Math.random() * 180 -90; plane.rotationY = Math.random() * 180 -90; plane.rotationZ = Math.random() * 180 -90; scene.addChild(plane); plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, plane_objectClickHandler); } } private function createRandomBitmapMaterial():BitmapMaterial { //grab a bitmapAsset from the array (this is very ugly, but not important to the concept :) ) var bitmap:Bitmap = Bitmap(new assets[Math.floor(Math.random() * assets.length)]); var bitmapMaterial:BitmapMaterial = new BitmapMaterial(bitmap.bitmapData); return bitmapMaterial; } private function plane_objectClickHandler(event:InteractiveScene3DEvent):void { var plane:Plane = Plane(event.target); //put the target behind the plane cameraTarget.copyTransform(plane); cameraTarget.moveBackward(DISTANCE_FROM_PLANE); createTween(cameraTarget); } private function backgroundSprite_clickHandler(event:MouseEvent):void { createTween(cameraStart); } private function createTween(displayObject3d:DisplayObject3D):void { //when "slerping", this value is a range from 0 to 1 //0 being the starting total rotation (AKA transformation) //1 being the ending total rotation cameraWithSlerp.slerp = 0; var tweenObject:Object = {}; tweenObject.x = displayObject3d.x; tweenObject.y = displayObject3d.y; tweenObject.z = displayObject3d.z; tweenObject.bezierThrough = [{x:0, y:0, z:0, slerp:.1}]; tweenObject.ease = Cubic.easeInOut; tweenObject.slerp = 1; tweenObject.onUpdate = camera_updateCallback; startQuaternion = Quaternion.createFromMatrix(cameraWithSlerp.transform); endQuaternion = Quaternion.createFromMatrix(displayObject3d.transform); TweenMax.to(cameraWithSlerp, TWEEN_TIME, tweenObject); } private function camera_updateCallback():void { currentQuaternion = Quaternion.slerp(startQuaternion, endQuaternion, cameraWithSlerp.slerp); cameraWithSlerp.transform.copy3x3(currentQuaternion.matrix); singleRender(); } override public function singleRender():void { renderer.renderScene(scene, cameraWithSlerp, viewport); } } } //a helper class whose sole purpose is to add the slerp property //I use this for the sake of brevity, but for production code //you would move this into a new ActionScript file import org.papervision3d.cameras.Camera3D; class CameraWithSlerp extends Camera3D { public var slerp:Number = 0; }
-
Max
-
Marcos
-
Tony
-
Tony
-
yogi
-
Andrew
-
Andrew
-
benjamin
-
benjamin
-
Umm
-
digitalsi
-
Matt
-
alex_ex
-
alex_ex
-
armitage case
-
Giulio
-
David Buchan
-
sandro ieva
-
Giulio
-
David Buchan
-
Giulio
-
David Buchan
-
sandro ieva
-
mark mun
-
Giulio
-
mark mun
-
John Lindquist
-
Giulio
-
Mark Mun
-
Sameer Gupta
-
Guy Anderson
-
Mark Mun
-
Rafael Lima
Search
Recommended Books
Speaking at FITC Toronto
Recent Posts
- haXe Tutorial
- AS3 Signals Tutorial
- Preferred Video Tutorial Resolution?
- TweenMax – Tweening a timeline (Advanced Tweening)
- Robotlegs + Flight + Union Platform
- Back in the saddle
- Eclipse Theme Designer Preview
- RobotLegs Hello World Video Tutorial
- 10 Things Every Senior Flash Developer Should Know
- Efflex – 3D Effects for Flex
- MorphController – Mighty Morphing Papervision3D
- End dump
- Test if a plane is within the view of the camera (aka testing if culled)
- Materials Reference
- Perlin Blob
Recent Comments
- BAM5 on haXe Tutorial
- AlexG on Finding 2D Coordinates of a DisplayObject3D
- Josh on ActionScript 3 – Model View Controller (MVC)
- martin everett on requests
- martin everett on requests
- lillacska on Dragging Spheres
- Guy Ritchie on MXML without the Flex framework
- Pedro on ActionScript 3 – Namespaces
- daveevolve on AS3DMod Perlin Noise
- sebomoto on haXe Tutorial
Categories
Archives
Preferred Video Tutorial Resolution
- 1024x768 (53%, 85 Votes)
- 1280x1024 (15%, 24 Votes)
- 1920x1080 (15%, 24 Votes)
- 800x600 (13%, 20 Votes)
- 480x320 (4%, 6 Votes)
- 640x480 (0%, 2 Votes)
Total Voters: 160


