Papervision3D: understanding Plane object – part 3
In this 3rd part we’ll discover two interesting features:
1) How to add a bitmap texture to a plane
2) How to set the camera to make Papervision3D units match pixels
Let’s start… the “units Vs pixels” issue can be a problem when we want a plane (or whatever) to have a precise size in pixels.
Settings the camera properly can solve the problem… this is the same script used in Papervision3D: understanding Plane object – part 2 with a couple of modifications:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | package { import flash.display.Sprite; import flash.events.Event; import org.papervision3d.cameras.Camera3D; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.scenes.Scene3D; import org.papervision3d.view.Viewport3D; import org.papervision3d.objects.primitives.Plane; import org.papervision3d.materials.ColorMaterial; import org.papervision3d.materials.BitmapFileMaterial; public class papervision extends Sprite { public var viewport:Viewport3D = new Viewport3D(); public var scene:Scene3D = new Scene3D(); public var camera:Camera3D = new Camera3D(); public var renderer:BasicRenderEngine = new BasicRenderEngine(); public var bitmap_material:BitmapFileMaterial = new BitmapFileMaterial("http://www.google.com/intl/en_ALL/images/logo.gif"); public var red_material:ColorMaterial=new ColorMaterial(0xff0000); public var frontplane:Plane=new Plane(red_material,200,300,4,5); public var backplane:Plane=new Plane(bitmap_material,200,300,4,5); public function papervision() { addChild(viewport); camera.focus=100; camera.zoom=10; backplane.rotationY=180; scene.addChild(frontplane); scene.addChild(backplane); addEventListener(Event.ENTER_FRAME, render); } public function render(e:Event) { frontplane.yaw(1); backplane.yaw(1); renderer.renderScene(scene, camera, viewport); } } } |
At lines 22-23 I am setting the camera in a way the 200 and 300 “units” defining the plane size at lines 18-19 are equivalent to pixels.
Our planes now are 200×300 pixels sized.
Then I introduced a new material, the BitmapFileMaterial one… imported at line 10, declared at line 16 (look how do I import the image… passing the URL) at assigned at line 19
And that’s all… look at the double sided plane with the Google logo on its back…
Next time, we’ll add some interaction. To test this example, just copy/paste the code in the file you can download at Papervision3D for the absolute beginners.
They can be easily customized to meet the unique requirements of your project.
9 Responses to “Papervision3D: understanding Plane object – part 3”
Leave a Reply
Trackbacks
-
Weekly Shared Items - 3. June, 2009 | TOXIN LABS - weblog of a german design student from wuerzburg on
June 3rd, 2009 6:33 am
[...] Papervision3D: understanding Plane object – part 3 [...]
- Get up to $100,000 for your next Flash game with Mochi GAME Developer Fund
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines – 17 lines version
- Sell sitelocked version of your Flash games and even .fla sources to Free Online Games
- Protect your work from ActionScript code theft with SWF Protector
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines
- Understanding Box2D’s one-way platforms, aka CLOUDS
- Triqui MochiAds Arcade plugin for WordPress upgraded to 1.2
- Box2D Flash game creation tutorial – part 2
- 11 Flash isometric engines you can use in your games
- Monetize your Flash games with GamesChart
- Create a Lightbox effect only with CSS - no javascript needed
- Flash game creation tutorial - part 1
- Create a Flash Racing Game Tutorial
- Flash game creation tutorial - part 2
- Make a Flash game like Flash Element Tower Defense - Part 2
- Flash game creation tutorial - part 3
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash draw game like Line Rider or others - part 1
- Triqui MochiAds Arcade plugin for WordPress official page
- Create a flash artillery game - step 1
- Flash game creation tutorial – part 5.2 (4.88/5)
- Create a flash artillery game – step 1 (4.79/5)
- Create a Flash Racing Game Tutorial (4.76/5)
- Create a flash artillery game – step 2 (4.74/5)
- Create a survival horror game in Flash tutorial – part 1 (4.73/5)
- Creation of a Flash arcade site using WordPress – step 2 (4.73/5)
- Flash game creation tutorial – part 2 (4.71/5)
- Flash game creation tutorial – part 1 (4.70/5)
- Create a flash draw game like Line Rider or others – part 1 (4.69/5)
- Creation of a platform game with Flash – step 2 (4.68/5)


(4 votes, average: 3.50 out of 5)





“And that’s all… look at the double sided plane with the Google logo on its back…”
You mean red and black plane?
Emmanuel – you have to remember that the Flash Player doesn’t let you load information from arbitrary URLs unless there’s a CrossDomainPolicy in place. Simple solution is to host the swf and image on the same server and use a relative URL. :)
With debug flash player enabled I get this error:
SecurityError: Error #2122: Security sandbox violation: Loader.content: http://www.emanueleferonato.com/downloads/papervision4.swf cannot access http://www.google.com/intl/en_ALL/images/logo.gif. A policy file is required, but the checkPolicyFile flag was not set when this media was loaded.
at flash.display::Loader/get content()
at org.papervision3d.materials::BitmapFileMaterial/loadBitmapCompleteHandler()
That said, this is a very useful tutorial. :)
(oops, sorry for spelling your name wrong)
Well that’s nice.
How do you make it so the units automatically become pixels ?
@Monkios – Pixel precision formula is:
do3d.z = (camera.zoom * camera.focus) – Math.abs(camera.z)
Front side is red, back side is black. That’s it. No Google logo. No magic. Mac OS 10.4.x FF 3.0.10 Flash player 10.
About the SecurityError you can also access the image with a little php magic
http://kb2.adobe.com/cps/165/tn_16520.html
take care!
oh sorry