This is a simple papervision3d tutorial it is only purpose is to show you how easy it is to import a 3d model from sketchup (free Version) and render it for the web utilizing Papervision3d and flash. This tutorial was developed using the Flash Develop IDE.
Things you will need for the tutorial:
SketchUp
Papervision3d
FlashDevelop
Project Berlin Code
What you will learn:
- How to import a Collada (DAE File)
- How to import a Google Earth Model
- How to convert a .kmz to a .dae (colloda)
- How to control the camera with Keyboard Commands
Click on this image and the project will load it takes a few seconds and I have not added a loader yet so be patient:
ActionScript Code
package { import flash.events.Event; import flash.events.KeyboardEvent; import flash.events.MouseEvent; import flash.display.DisplayObject; import org.papervision3d.events.FileLoadEvent; import org.papervision3d.lights.PointLight3D; import org.papervision3d.materials.BitmapMaterial; import org.papervision3d.materials.MovieMaterial; import org.papervision3d.materials.utils.MaterialsList; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.objects.parsers.Collada; import org.papervision3d.objects.parsers.DAE; import org.papervision3d.objects.parsers.KMZ; import org.papervision3d.view.BasicView; public class main extends BasicView { private var light:PointLight3D; private var doRotation:Boolean = false; private var lastMouseX:int; private var lastMouseY:int; private var cameraPitch:Number = -90; private var cameraYaw:Number = 60; public function main() { super(0, 0, true, true); // Initialise Papervision3D init3D(); // Create the 3D objects createScene(); // Listen to mouse up and down events on the stage stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown); stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp); stage.addEventListener(KeyboardEvent.KEY_DOWN, onCameraMove); // Start rendering the scene startRendering(); } private function init3D():void { // position the camera camera.z = -700; /*camera.x = -700; camera.y = -700;*/ //camera.moveRight(90); camera.moveForward(370); //camera.moveLeft(90); camera.fov =70; camera.orbit(cameraPitch, cameraYaw); } private function createScene():void { // create a new 3D object from a 3D google earth object file and perform actions when loaded var gdrCheckpoint:KMZ = new KMZ(); gdrCheckpoint.addEventListener(FileLoadEvent.LOAD_COMPLETE, function onLoad(event:Event):void { gdrCheckpoint.scale = 20; //kmz.moveLeft(300); gdrCheckpoint.moveForward(100); gdrCheckpoint.moveDown(50); scene.addChild(gdrCheckpoint); }); gdrCheckpoint.load("gdrCheckPointl.kmz"); var berlinwall:DAE = new DAE(true); berlinwall.addEventListener(FileLoadEvent.LOAD_COMPLETE, function onLoad(event:Event):void { berlinwall.scale = 40; berlinwall.moveForward(180); berlinwall.moveDown(50); berlinwall.moveRight(100); scene.addChild(berlinwall); }); // load the DAE from a specific URL berlinwall.load("berlinwall/files/berlinwall.dae"); } override protected function onRenderTick(event:Event=null):void { // update camera position updateCamera(); // call the renderer super.onRenderTick(event); } private function updateCamera():void { // If the mouse button has been clicked then update the camera position if (doRotation) { // convert the change in mouse position into a change in camera angle var dPitch:Number = (mouseY - lastMouseY) / 20; var dYaw:Number = (mouseX - lastMouseX) / 20; // update the camera angles cameraPitch -= dPitch; cameraYaw -= dYaw; // limit the pitch of the camera if (cameraPitch <= 0) { cameraPitch = 0.1; } else if (cameraPitch >= 180) { cameraPitch = 179.9; } // reset the last mouse position //lastMouseX = mouseX; lastMouseY = mouseY; // reposition the camera camera.orbit(cameraPitch, cameraYaw); } } // called when the keyboard is pressed private function onCameraMove(event:KeyboardEvent):void { //trace("keyHandlerfunction: " + event.keyCode); if (event.keyCode == 39) { camera.x = camera.x + 15; } if (event.keyCode == 37) { camera.x = camera.x - 15; } if (event.keyCode == 38) { camera.z = camera.z + 25; } if (event.keyCode == 40) { camera.z = camera.z - 25; } } // called when mouse down on stage private function onMouseDown(event:MouseEvent):void { doRotation = true; lastMouseX = event.stageX; lastMouseY = event.stageY; } // called when mouse up on stage private function onMouseUp(event:MouseEvent):void { doRotation = false; } } }
Collada .DAE File
Google SketchUp 6
2009-03-09T23:19:30Z
2009-03-09T23:19:30Z
Z_UP
../images/texture0.jpg
../images/texture1.jpg
../images/texture2.jpg
../images/texture3.jpg
../images/texture4.jpg
../images/texture5.jpg
../images/texture6.jpg
../images/texture7.jpg
../images/texture8.jpg
../images/texture9.jpg
../images/texture10.jpg
../images/texture11.jpg
../images/texture12.jpg
../images/texture13.jpg
../images/texture14.jpg
../images/texture15.jpg
../images/texture16.jpg
../images/texture17.jpg
../images/texture18.jpg
../images/texture19.jpg
material0-image
material0-image-surface
0.000000 0.000000 0.000000 1
0.000000 0.000000 0.000000 1
0.330000 0.330000 0.330000 1
20.000000
0.100000
1 1 1 1
0.000000
1
material1-image
material1-image-surface
0.000000 0.000000 0.000000 1
0.000000 0.000000 0.000000 1
0.330000 0.330000 0.330000 1
20.000000
0.100000
1 1 1 1
0.000000
1
material2-image
material2-image-surface
0.000000 0.000000 0.000000 1
0.000000 0.000000 0.000000 1
0.330000 0.330000 0.330000 1
20.000000
0.100000
1 1 1 1
0.000000
1
material3-image
material3-image-surface
0.000000 0.000000 0.000000 1
0.000000 0.000000 0.000000 1
0.330000 0.330000 0.330000 1
20.000000
0.100000
1 1 1 1
0.000000
1
material4-image
material4-image-surface
0.000000 0.000000 0.000000 1
0.000000 0.000000 0.000000 1
0.330000 0.330000 0.330000 1
20.000000
0.100000
1 1 1 1
0.000000
1
material5-image
material5-image-surface
0.000000 0.000000 0.000000 1
0.000000 0.000000 0.000000 1
0.330000 0.330000 0.330000 1
20.000000
0.100000
1 1 1 1
0.000000
1
material6-image
material6-image-surface
0.000000 0.000000 0.000000 1
0.000000 0.000000 0.000000 1
0.330000 0.330000 0.330000 1
20.000000
0.100000
1 1 1 1
0.000000
1
material7-image
material7-image-surface
0.000000 0.000000 0.000000 1
0.000000 0.000000 0.000000 1
0.330000 0.330000 0.330000 1
20.000000
0.100000
1 1 1 1
0.000000
1
material8-image
material8-image-surface
0.000000 0.000000 0.000000 1
0.000000 0.000000 0.000000 1
0.330000 0.330000 0.330000 1
20.000000
0.100000
1 1 1 1
0.000000
1
material9-image
material9-image-surface
0.000000 0.000000 0.000000 1
0.000000 0.000000 0.000000 1
0.330000 0.330000 0.330000 1
20.000000
0.100000
1 1 1 1
0.000000
1
material10-image
material10-image-surface
0.000000 0.000000 0.000000 1
0.000000 0.000000 0.000000 1
0.330000 0.330000 0.330000 1
20.000000
0.100000
1 1 1 1
0.000000
1
material11-image
material11-image-surface
0.000000 0.000000 0.000000 1
0.000000 0.000000 0.000000 1
0.330000 0.330000 0.330000 1
20.000000
0.100000
1 1 1 1
0.000000
1
0.000000 0.000000 0.000000 1
0.000000 0.000000 0.000000 1
1.000000 1.000000 1.000000 1
0.330000 0.330000 0.330000 1
20.000000
0.100000
1 1 1 1
0.000000
1
material12-image
material12-image-surface
0.000000 0.000000 0.000000 1
0.000000 0.000000 0.000000 1
0.330000 0.330000 0.330000 1
20.000000
0.100000
1 1 1 1
0.000000
1
material13-image
material13-image-surface
0.000000 0.000000 0.000000 1
0.000000 0.000000 0.000000 1
0.330000 0.330000 0.330000 1
20.000000
0.100000
1 1 1 1
0.000000
1
material14-image
material14-image-surface
0.000000 0.000000 0.000000 1
0.000000 0.000000 0.000000 1
0.330000 0.330000 0.330000 1
20.000000
0.100000
1 1 1 1
0.000000
1
material15-image
material15-image-surface
0.000000 0.000000 0.000000 1
0.000000 0.000000 0.000000 1
0.330000 0.330000 0.330000 1
20.000000
0.100000
1 1 1 1
0.000000
1
material16-image
material16-image-surface
0.000000 0.000000 0.000000 1
0.000000 0.000000 0.000000 1
0.330000 0.330000 0.330000 1
20.000000
0.100000
1 1 1 1
0.000000
1
material17-image
material17-image-surface
0.000000 0.000000 0.000000 1
0.000000 0.000000 0.000000 1
0.330000 0.330000 0.330000 1
20.000000
0.100000
1 1 1 1
0.000000
1
material18-image
material18-image-surface
0.000000 0.000000 0.000000 1
0.000000 0.000000 0.000000 1
0.330000 0.330000 0.330000 1
20.000000
0.100000
1 1 1 1
0.000000
1
material19-image
material19-image-surface
0.000000 0.000000 0.000000 1
0.000000 0.000000 0.000000 1
0.330000 0.330000 0.330000 1
20.000000
0.100000
1 1 1 1
0.000000
1
11.777808 -9.215656 2.252115 9.482217 -7.548469 -0.384197 11.728244 -9.179660 -0.447191 9.531781 -7.584465 2.315108 21.062660 -15.696405 1.995207 7.285754 -5.953275 2.378101 5.039726 -4.322084 2.441094 2.793699 -2.690894 2.504087 0.547672 -1.059703 2.567080 -1.698355 0.571488 2.630074 -3.944383 2.202678 2.693067 -6.190410 3.833869 2.756060 -8.436437 5.465059 2.819053 -10.682464 7.096250 2.882046 -12.928492 8.727440 2.945039 -15.174519 10.358631 3.008033 -17.420546 11.989822 3.071026 -19.538602 13.790502 3.133929 -19.666573 13.621012 3.134019 -19.716137 13.657008 0.434714 -19.588166 13.826497 0.434624 21.013096 -15.660409 -0.704098 20.934688 -15.865894 1.995296 20.885125 -15.829898 -0.704009 20.712353 -15.704422 -0.699163 20.761917 -15.740418 2.000142 18.515890 -14.109228 2.063135 16.269863 -12.478037 2.126128 14.023835 -10.846846 2.189121 13.974272 -10.810850 -0.510184 7.236190 -5.917279 -0.321204 4.990163 -4.286088 -0.258211 2.744135 -2.654898 -0.195218 0.498108 -1.023707 -0.132225 -1.747919 0.607484 -0.069232 -3.993946 2.238674 -0.006238 -6.239974 3.869865 0.056755 -8.486001 5.501055 0.119748 -10.732028 7.132246 0.182741 -12.978055 8.763436 0.245734 -15.224083 10.394627 0.308727 -17.470110 12.025818 0.371721 16.220299 -12.442041 -0.573177 18.466326 -14.073232 -0.636170
-0.602572 -0.798065 0.000422 0.018357 -0.013332 0.999743 -0.808919 0.587482 0.022687 0.602572 0.798065 -0.000422 0.808919 -0.587482 -0.022687 -0.602572 -0.798065 0.000422 -0.602572 -0.798065 0.000422 -0.018357 0.013332 -0.999743 -0.602572 -0.798065 0.000422 -0.602572 -0.798065 0.000422 -0.602572 -0.798065 0.000422 -0.602572 -0.798065 0.000422 -0.602572 -0.798065 0.000422 -0.602572 -0.798065 0.000422 -0.602572 -0.798065 0.000422 -0.602572 -0.798065 0.000422 -0.602572 -0.798065 0.000422 -0.602572 -0.798065 0.000422 -0.602572 -0.798065 0.000422 -0.602572 -0.798065 0.000422 -0.602572 -0.798065 0.000422 -0.602572 -0.798065 0.000422 -0.602572 -0.798065 0.000422 -0.602572 -0.798065 0.000422
5.000000 1.000000 4.000000 0.000000 5.000000 -0.000000 4.000000 1.000000 5.076910 0.050000 -0.000001 0.000000 0.999998 0.000000 -1.000000 0.000000 -2.000000 0.000000 -3.000001 0.000000 -4.000002 0.000000 -5.000004 0.000000 -6.000006 0.000000 -7.000009 0.000000 -8.000013 0.000000 -9.000017 0.000000 -10.000022 0.000000 -11.000027 0.000000 -12.000033 0.000000 -13.000040 0.050000 -13.000040 0.000000 0.000000 0.750000 0.076923 0.000000 0.076923 0.750000 0.000000 0.000000 -9.000000 0.000000 9.076921 -0.750000 9.076921 0.000000 -9.000000 -0.750000 -1.000000 0.000000 -0.923077 -0.750000 -0.923077 0.000000 -1.000000 -0.750000 116.000000 1.000000 115.000000 0.000000 116.000000 -0.000000 115.000000 1.000000 4.999987 -0.000000 5.076910 0.000000 3.999991 -0.000000 2.999994 0.000000 1.999996 0.000000 5.000000 -0.000000 6.000000 1.000000 5.000000 1.000000 6.000000 -0.000000 -1151.680156 248.352604 -1491.745440 6.327913 -1233.943024 187.435927 -1069.417288 309.269280 -987.154419 370.185956 -904.891551 431.102633 -822.628683 492.019309 -740.365814 552.935986 -658.102946 613.852662 -575.840078 674.769338 -493.577210 735.686015 -411.314341 796.602691 -329.051473 857.519367 -246.788605 918.436044 -164.525737 979.352720 -82.262868 1040.269396 -4.685898 1107.513986 0.000000 1101.186073 -8.000000 1.000000 -9.000000 0.000000 -8.000000 -0.000000 -9.000000 1.000000 -8.000000 0.000000 -7.000000 1.000000 -8.000000 1.000000 -7.000000 -0.000000 -7.000000 0.000000 -6.000000 1.000000 -7.000000 1.000000 -6.000000 -0.000000 -6.000119 0.005376 -5.000119 1.005376 -6.000119 1.005376 -5.000119 0.005376 -5.000000 0.000000 -4.000000 1.000000 -5.000000 1.000000 -4.000000 -0.000000 -4.000000 -0.000000 -3.000000 1.000000 -4.000000 1.000000 -3.000000 -0.000000 -3.000000 0.000000 -2.000000 1.000000 -3.000000 1.000000 -2.000000 -0.000000 -2.000000 0.000000 -1.000000 1.000000 -2.000000 1.000000 -1.000000 -0.000000 -1.000000 0.000000 0.000000 1.000000 -1.000000 1.000000 0.000000 -0.000000 0.000000 -0.000000 1.000000 1.000000 1.000000 -0.000000 2.000000 0.000000 1.000000 1.000000 1.000000 0.000000 2.000000 1.000000 2.000000 -0.000000 3.000000 1.000000 2.000000 1.000000 3.000000 -0.000000 3.000000 0.000000 4.000000 1.000000 3.000000 1.000000 4.000000 -0.000000 -1316.205892 126.519251 -1398.468761 65.602575 -1480.731629 4.685898 -1487.059542 -0.000000 9.000000 1.000000 8.000000 0.000000 9.000000 -0.000000 8.000000 1.000000 8.000000 1.000000 7.000000 0.000000 8.000000 -0.000000 7.000000 1.000000 7.000000 1.000000 6.000000 0.000000 7.000000 -0.000000 6.000000 1.000000
0 0 0 1 0 1 2 0 2 1 0 1 0 0 0 3 0 3
4 1 4 3 1 5 0 1 6 4 1 4 5 1 7 3 1 5 4 1 4 6 1 8 5 1 7 4 1 4 7 1 9 6 1 8 4 1 4 8 1 10 7 1 9 4 1 4 9 1 11 8 1 10 4 1 4 10 1 12 9 1 11 4 1 4 11 1 13 10 1 12 4 1 4 12 1 14 11 1 13 4 1 4 13 1 15 12 1 14 4 1 4 14 1 16 13 1 15 4 1 4 15 1 17 14 1 16 4 1 4 16 1 18 15 1 17 17 1 19 16 1 18 4 1 4 16 1 18 17 1 19 18 1 20 17 2 21 19 2 22 18 2 23 19 2 22 17 2 21 20 2 24 4 3 25 20 3 26 17 3 27 20 3 26 4 3 25 21 3 28 22 4 29 21 4 30 4 4 31 21 4 30 22 4 29 23 4 32 4 1 4 25 1 37 22 1 38 4 1 4 26 1 39 25 1 37 4 1 4 27 1 40 26 1 39 4 1 4 28 1 41 27 1 40 4 1 4 0 1 6 28 1 41
22 5 33 24 5 34 23 5 35 24 5 34 22 5 33 25 5 36
2 6 42 28 6 43 0 6 44 28 6 43 2 6 42 29 6 45
2 7 46 21 7 47 29 7 48 1 7 49 21 7 47 2 7 46 30 7 50 21 7 47 1 7 49 31 7 51 21 7 47 30 7 50 32 7 52 21 7 47 31 7 51 33 7 53 21 7 47 32 7 52 34 7 54 21 7 47 33 7 53 35 7 55 21 7 47 34 7 54 36 7 56 21 7 47 35 7 55 37 7 57 21 7 47 36 7 56 38 7 58 21 7 47 37 7 57 39 7 59 21 7 47 38 7 58 40 7 60 21 7 47 39 7 59 41 7 61 21 7 47 40 7 60 41 7 61 20 7 62 21 7 47 20 7 62 41 7 61 19 7 63 29 7 48 21 7 47 42 7 115 42 7 115 21 7 47 43 7 116 43 7 116 21 7 47 24 7 117 24 7 117 21 7 47 23 7 118
16 8 64 19 8 65 41 8 66 19 8 65 16 8 64 18 8 67
41 9 68 15 9 69 16 9 70 15 9 69 41 9 68 40 9 71
40 10 72 14 10 73 15 10 74 14 10 73 40 10 72 39 10 75
39 11 76 13 11 77 14 11 78 13 11 77 39 11 76 38 11 79
38 12 80 12 12 81 13 12 82 12 12 81 38 12 80 37 12 83
37 13 84 11 13 85 12 13 86 11 13 85 37 13 84 36 13 87
36 14 88 10 14 89 11 14 90 10 14 89 36 14 88 35 14 91
35 15 92 9 15 93 10 15 94 9 15 93 35 15 92 34 15 95
34 16 96 8 16 97 9 16 98 8 16 97 34 16 96 33 16 99
33 17 100 7 17 101 8 17 97 7 17 101 33 17 100 32 17 102
31 18 103 7 18 104 32 18 105 7 18 104 31 18 103 6 18 106
31 19 107 5 19 108 6 19 109 5 19 108 31 19 107 30 19 110
30 20 111 3 20 112 5 20 113 3 20 112 30 20 111 1 20 114
25 21 119 43 21 120 24 21 121 43 21 120 25 21 119 26 21 122
26 22 123 42 22 124 43 22 125 42 22 124 26 22 123 27 22 126
27 23 127 29 23 128 42 23 129 29 23 128 27 23 127 28 23 130
If you don’t already have a copy download sketchUp from google. The free version is all you need for this tutorial. Once you download it you will notice that sketchUp allows you to search the google 3d warehouse. The warehouse house numerous models that you can use in your projects it is easy to import the files into sketchUp the warehouse browser allows you to save your files as colloda or google earth files. You can also model your files in sketchUp. To convert a model from a .kmz file to a colloda file is easy all you have to do is export the file as a .KMZ file or the native format for google earth. Once you have exported the file to your desktop you can right click on it rename the extension from .kmz to .zip the kmz or google earth file is a zip file once you open it you will see your model files and the colloda or .dae file this file is really a simple .xml file that describes your model. When importing numerous models from google for a scene you will need to edit this file to make sure your models don’t have the same texture names to do this just open the file in a text editor rename the .jpg or .png files to be different from the models you previously exported that it. Papervision3d makes 3d content a breeze! PaperVision3d also allows you to add interactive materials in your model like .swf movies or youtube videos. When working with papervision3d you might also want to download vizualpv3d.
Flash News Links:
Flash will now allow developers to Publish to the iPhone
Push Button Engine – Cool Game Framework
Hype Framework (Generative Art / Animation) is now out!
vizualpv3d
Unity 3D Indie Version is now Free!
Related posts:
Recent Comments