Discovering Papervision3D: Best Design Practices and Tutorials

Advertisement

Papervision3D1 (PV3D) is a popular open source 3D engine for Flash. It enables to create advanced three-dimensional objects displayed real time right in the web browser. With Papervision3D designers bring an impressive visual experience and user interaction to the web visitors. Interactive environment captivates and gives an opportunity to enjoy navigation and content exploring process. PV3D provides great solutions for product showcasing websites, advertising campaigns and portfolio designs.

Below you can find a collection of impressive Papervision3D websites and tutorials that hopefully will inspire you and give you an idea about how this technique can be used in your projects. It is important to remember that being based on Flash, Papervision3D often has similar issues in usability and is not recommended to be used in developing websites where simplicity and accessibility are essential.

Creative Papervision3D Websites

Portfolios

X-PRIME2
A stylish and unobtrusive portfolio design featured with a nifty Papervision3D image gallery which can be displayed in a few ways.

X-PRIME3

Hatica 20094
This website reminds of a little fairy-tale world floating in shining light space. Navigation is quite easy and enjoyable.

Hatica 20095

HOOK6
Hook’s portfolio is a picture of a truly creative and beautiful design. Everything here is about brilliant individuality and attention to details.

HOOK7

Lab98
It’s a great example of clean and neat Papervision3D interface.

Lab99

SapientNitro10
This digital styled website performs awesome transitions, typography visualization and sound effects.

SapientNitro11

Zara Media Design Group12
Nice and minimalist PV3D-powered website. Open a three-dimensional book to meet Zara Media Design Group.

Zara Media Design Group13

Oval Design14
Portfolio of Oval Design Studio provides an amazing interaction experience. Website represents the whole universe you can explore on a controllable spacecraft.

Oval Design15

13flo16
Florian Bernard’s portfolio is done in a sleek cyber-punk style and offers a wonderful 3D performance. The thumbnail displaying mechanism implies the 360-degree rotation and can be transformed in several ways.

13flo17

Dasai18
Nice and amusing website with a good use of space and easy navigation. You can find the information about Spanish web agency Dasai exploring a small green planet of the same name.

Dasai19

TBC20
Portfolio of Baltimore-based advertising and public relations company TBC features original and usable content presentation. All the information can be browsed without leaving the home page.

TBC21

Scalena Agency22
Chic website. Both in style and technical execution.

Scalena Agency23

Barcinski&Jeanjean24
Barcinski&Jeanjean studio offers so much interaction in their portfolio. Website has a special option – wear 3D-glasses and enjoy all the fascination of three-dimensional environment. You can also play ping-pong while the site is loading. Excellent work!

Barcinski&Jeanjean25

Freedom+Partners26
Totally original website with a top-class PV3D realization and innovative navigation. It keeps up with usability as well – turn off 3D mode for quicker access to content.

Freedom+Partners27

WHITEvoid28
Elegant minimalist design and handy navigation structure provide a remarkable visual experience. It proves that usable Flash websites do exist.

WHITEvoid29

Advertising & Social Campaigns

Air Jordan 200930
Clean and fresh design of this site is not less inspiring than personal stories of famous sportsmen collected in a 3D video gallery.

Air Jordan 200931

Coors Light Project Cold32
3D beer can model creates a cool tactile effect. Cans seem to be good containers not only for beer but for content as well.

Coors Light Project Cold33

Bankers’ stories34
This promo website of the French bank Societe Generale shows how PV3D may come in handy to create social, communication-oriented mediums.

Bankers’ stories35

Panasonic: Everything matters36
The statement “Everything matters” reflects the design guideline of this website ideally. Flash version of the site provides a creative and dynamic product presentation with cool transition effects and colorful animations. HTML version is also available for viewing.

Panasonic: Everything matters37

Pepsi Music Challenge38
Fantastic Papervision3D website. Pepsi Music Challenge project delivers an exciting interaction experience by allowing visitors to play a funny music related game. GuitarHero fans will love it!

Pepsi Music Challenge39

The Baileys Lounge40
Another creative idea realized by means of Papervision3D – dive into the Baileys Lounge while turning over the pages of virtual folding book.

The Baileys Lounge41

The Economist: Thinking Space42
The main purpose of The Economist’s research project “Thinking Space” is to learn where people get their ideas and inspiration. You can submit your own thinking space and get a section in the massive 3D construction on the main page.

The Economist: Thinking Space43

SpringHill Suits44
It is a nice and clean website providing interesting visual effects and interaction. A good idea for an online hotel tour.

SpringHill Suits45

The Cigarette Is Dead46
Now comes a dark-styled website using PV3D for displaying timeline. The overall horror-movie style can probably leave a bad aftertaste, it is a powerful solution for anti-smoking campaign though.

The Cigarette Is Dead47

The Wrong Door48
Official website of BBC comedy sketch show is a successful mix of beautiful graphics, funny animations (sometimes containing adult and toilet humor) and lively 3D surroundings.

The Wrong Door49

UFC 10050
This is the second PV3D-based website for Ultimate Fighting Championship official web presentations. (UFC8451 was the first one) Excellent usage of this technique can be observed in both cases.

UFC 10052

Summerfestival 200953
Burst of colors, psychedelic balloons and original navigation form a quite imaginative website.

Summerfestival 200954

FOXTEL: I’m Unique55
IamuniQue project lets you build an interactive 3D portrait of yourself and share it with other users. New fun for social networking enthusiasts.

FOXTEL: I’m Unique56

Watchmen Motion Comic57
Wonderful presentation of Watchmen Motion Comic features superb interactivity, great dynamics and transparent navigation.

Watchmen Motion Comic58

Foot Locker59
Another example of fabulous PV3D effects and unique creativity in product presentation.

Foot Locker60

Absolut61
“Doing things differently leads to something exceptional”. The following website contains exceptional videos and beautiful minimalist 3D gallery.

Absolut62

Concave Scream: Soundtrack For A Book63
Dancing particles and dreamy music will take you far away from your desktop. It is probably the most unusual website from our collection.

Concave Scream: Soundtrack For A Book64

Papervision3D.org

Official site65
The home page of Papervision3D official site is nothing but a three-dimensional underwater world visualization. The work shines for itself.

Official site66

carlosulloa.com67
Website of Papervision3D founder Carlos Ulloa is done in minimalist style. Controllable 3D car model and good use of thumbnail lighting give it a subtle flavor.

carlosulloa.com68

HelloEnjoy69
This is a new home of carlosulloa.com. It features PV3D engine powerful capabilities enabling to play around with 3-dimensional text.

HelloEnjoy70

Tutorials

Papervision3D Flash Gallery71
Three-dimensional image gallery is a good way to enrich your website with interactivity and visual attractiveness. This is a very detailed and informative tutorial on how to create a Papervision3D Flash gallery.

Papervision3D Flash Gallery72

Introduction to Augmented Reality73
Augmented reality is an ActionScript library used in combination with Papervision3D. With Lee Brimelow’s video tutorial you will learn the basics of how to get stated with this new trendy effect.

Papervision3D For Beginners74
This is a collection of video tutorials covering some basics of Papervision3D. A good introductory set for beginner users.

Papervision3D For Beginners75

Papervision3D Collada Basics76
This video guide describes how to create and import 3D textured models for use in PV3D.

Build A Wiimote Controlled Lightsaber Using WiiFlash and Papervision3D77
Learn how to use a Wiimote within Flash and how to blend it with Papervision3D to get an interactive lightsaber.

Interactive 3D Cube78
Another great tutorial from Lee Brimelow shows you how to use Papervision3D 2.0 to create an interactive cube navigator.

Geocoding in Papervision3D with Yahoo Maps79
This article shows how to use PV3D and Yahoo mapping API to display any location you enter on a 3D globe of the world. You can also watch a video presentation80 of the PV3D Geocoding application

Geocoding in Papervision3D with Yahoo Maps81

Footnotes

  1. 1 http://blog.papervision3d.org/
  2. 2 http://www.x-prime.com/
  3. 3 http://www.x-prime.com/
  4. 4 http://www.hatica.com/lab/3d/escena/
  5. 5 http://www.hatica.com/lab/3d/escena/
  6. 6 http://www.hookusa.com/
  7. 7 http://www.hookusa.com/
  8. 8 http://www.lab9.fr/
  9. 9 http://www.lab9.fr/
  10. 10 http://www.nitrogroup.com/
  11. 11 http://www.nitrogroup.com/
  12. 12 http://www.zaramedia.com/
  13. 13 http://www.zaramedia.com/
  14. 14 http://www.ovaldesign.com.hk/
  15. 15 http://www.ovaldesign.com.hk/
  16. 16 http://13flo.com/
  17. 17 http://13flo.com/
  18. 18 http://www.dasai.es/
  19. 19 http://www.dasai.es/
  20. 20 http://www.tbc.us/
  21. 21 http://www.tbc.us/
  22. 22 http://www.scalena.com/
  23. 23 http://www.scalena.com/
  24. 24 http://www.barcinski-jeanjean.com/
  25. 25 http://www.barcinski-jeanjean.com/
  26. 26 http://www.freedomandpartners.com/
  27. 27 http://www.freedomandpartners.com/
  28. 28 http://www.whitevoid.com/portfolio.html
  29. 29 http://www.whitevoid.com/portfolio.html
  30. 30 http://www.nike.com/jumpman23/aj2009/
  31. 31 http://www.nike.com/jumpman23/aj2009/
  32. 32 http://www.coorslight.com/projectcold/
  33. 33 http://www.coorslight.com/projectcold/
  34. 34 http://www.bankersstories.com/
  35. 35 http://www.bankersstories.com/
  36. 36 http://www.panasonic.eu/everythingmatters/en-gb/
  37. 37 http://www.panasonic.eu/everythingmatters/en-gb/
  38. 38 http://www.pepsi.se/2009/
  39. 39 http://www.pepsi.se/2009/
  40. 40 http://www.thebaileyslounge.co.uk/Pages/Home.aspx
  41. 41 http://www.thebaileyslounge.co.uk/Pages/Home.aspx
  42. 42 http://thinkingspace.economist.com/
  43. 43 http://thinkingspace.economist.com/
  44. 44 http://www.spacetoinspire.com/
  45. 45 http://www.spacetoinspire.com/
  46. 46 http://www.thecigaretteisdeadtimeline.com/
  47. 47 http://www.thecigaretteisdeadtimeline.com/
  48. 48 http://www.bbc.co.uk/wrongdoor/
  49. 49 http://www.bbc.co.uk/wrongdoor/
  50. 50 http://100.ufc.com/
  51. 51 http://84.ufc.com/
  52. 52 http://100.ufc.com/
  53. 53 http://www.summerfestival.be/
  54. 54 http://www.summerfestival.be/
  55. 55 http://www.iamunique.com.au/
  56. 56 http://www.iamunique.com.au/
  57. 57 http://watchmenmotioncomic.com/
  58. 58 http://watchmenmotioncomic.com/
  59. 59 http://www.footlocker.eu/evolve/#/en/
  60. 60 http://www.footlocker.eu/evolve/#/en/
  61. 61 http://www.absolut.com/us
  62. 62 http://www.absolut.com/us
  63. 63 http://www.concavescream.com/main.html
  64. 64 http://www.concavescream.com/main.html
  65. 65 http://www.papervision3d.org/
  66. 66 http://www.papervision3d.org/
  67. 67 http://www.carlosulloa.com/
  68. 68 http://www.carlosulloa.com/
  69. 69 http://www.helloenjoy.com/
  70. 70 http://www.helloenjoy.com/
  71. 71 http://www.flashmoto.com/blog/flash-galleries/papervision-3d-flash-gallery/
  72. 72 http://www.flashmoto.com/blog/flash-galleries/papervision-3d-flash-gallery/
  73. 73 http://gotoandlearn.com/play?id=105
  74. 74 http://content.madvertices.com/articles/PV3DTraining/default.htm#
  75. 75 http://content.madvertices.com/articles/PV3DTraining/default.htm#
  76. 76 http://www.gotoandlearn.com/play?id=106
  77. 77 http://flash.tutsplus.com/tutorials/games/build-a-wiimote-controlled-lightsaber-using-wiiflash-and-papervision3d/
  78. 78 http://www.gotoandlearn.com/play?id=68
  79. 79 http://www.adobe.com/newsletters/edge/june2008/articles/article2/?trackingid=DEKYF
  80. 80 http://www.youtube.com/watch?v=9e-0ECqsfTU
  81. 81 http://www.adobe.com/newsletters/edge/june2008/articles/article2/?trackingid=DEKYF

↑ Back to topShare on Twitter

Julia May is a freelance writer now working with FlashMint, the top-class provider of Flash templates.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    There are some really nice examples here.

  2. 2

    Makes me want to learn Flash

  3. 3

    Wow! I have seen this used before but had no idea what it was called or how else it could be used, very cool examples too.

  4. 4

    Only a handful of these seem unique… floating/roatating navigations can be a little annoying. Concave scream was rather interesting… but I had difficulty using it effectively.

    It’s cool technology that needs to be refined more for the web.

  5. 5

    Very nice article
    I’d like to learn flash but this seems kind of complicated
    could you please write a post about the best flash tutorials

    Keep up the good work

  6. 6

    Hi Guys,

    Another great article. I just wanted to let you know about the Official Papervision Showcase site, over at:

    http://www.papervisionshowcase.com

    Dedicated the showcasing the very best Papervision 3D Projects daily.

  7. 7

    Seriously I didn’t even think that they are exist. Cool job!

  8. 8

    James Ryan Dulay

    August 10, 2009 6:14 pm

    I’ve seen this before a pretty impressed with how they render this in flash.

  9. 9

    wow nice..im excited to view example sites here..but our connection here is very slow…

  10. 10

    Sweet showcase!
    Glad I’m on a beasty machine

  11. 11

    Check out the Official Papervision Showcase .

  12. 12

    Great list!

    Our class web site at Hyper Island uses Papervision3D. Check it out: http://www.spaceisthelimit.com

  13. 13

    crazy stuff just wow I need to learn grphic design beside my flash experience

  14. 14

    These website are awesome.

    makes me think my web skills need a major upgrade

  15. 15

    Eye candy

  16. 16

    Wahooo…
    Amazing examples !

  17. 17

    Wow, nice examples! I came across an interesting creation just the other day as well – http://www.easy.nl/

  18. 18

    Some more papervision eye candy; http://www.goodlifediner.com.

  19. 19

    Awesome

  20. 20

    Stunning Collection!
    Featured at Flashscope.com – flash components and developers community

  21. 21

    Papervision3D provides really great unlimited solutions for Flash designers and developers!

  22. 22

    Amazing websites!

    I have seen one more website http://www.rubenpapian.com and has really interesting 3D…

  23. 23

    The site Air Jordan 2009 isn`t load…

    But thanks SM for the article! Amazing fx here!!

  24. 24
  25. 25

    Awesome

  26. 26

    Superb Collection…Helps me a lot…

  27. 27

    I have never tried Papervision. This really makes me want to give it a go.

  28. 28

    I like the look of Papervision but after going to the X-Prime site showcased here I am rather disappointed as I couldn’t click on any of the screenshots to see more about their work.

    Made me think the designers were more concerned with being clever than actually offering the site’s visitors any useful information.

  29. 29

    I’m only half way through the list and I’ve closed most of them before getting past the first page because they take ages to load. My connection isn’t super-fast, but it isn’t dial-up either.

    We’ve still got a long way to go. They LOOK nice though.

  30. 30

    @Tracey
    Hello, I’m from the X-PRIME flash team.
    I didn’t realy understand what is your problems with the screenshot.
    When you click on any screenshots forme the home page you go to the project page with one video or one slideshow of the site.
    To see the site you’ve go a button in the left down corner “+ Voir le site”.

    Thanks to S-M for the article, we are pround to be in!

  31. 31

    Great List
    Hows about one for Unity3D and FreeSpin3D?

  32. 32

    Some of these sites indeed look nice, but I find all of them completely unusable. Even as a showcases or portfolios. I don’t say that this kind of interface is impossible to develop, but it has a long way to go. As long as common user triggered events (back, forward, scrolling, navigation through form elements) are not handled within Flash (or other plugin) it is only annoying.

    Is this what I visit any site for? Wait until it loads, watch intro and then struggle with unfriendly interface? Imagine news site, weather report or smashing magazine site using it ;) Definitely it needs lots of improvements before anyone should use it for anything else than showing it’s capabilities.

  33. 33

    where are the tutorials?

  34. 34

    @samuil

    I understand your concern when you say that these sites are “unfriendly”. When working with non-conventional navigation systems it makes sense to offer two methods by which to navigate the site. One that is exploratory/fun and one that is more conventional and familiar to the user. This ensures that everyone can have a pleasant experience.

    However, I believe that you lost credibility when you wrote in bold that “all of them” are unusable. Clearly this isn’t true – some may be more difficult to navigate, some may require user exploration … but surely you can’t feel that they are all unusable. I’d respond to your 4th sentence if I could understand it. I don’t recall seeing too many “intros” either.

    @SmashingMag

    Great list and great article. PV3D is in its infancy but you can already see how it is opening doors to a whole new world of design and development. It would be great to see a list of PV3D / Augmented Reality apps. Some insane examples out there.

  35. 35

    It is really great this time SM posted about PV3D and Flash. :) You may also enjoy best flash websites here koflash.com. Have fun!

  36. 36
  37. 37

    @Ju, thank you for your response. I went to the X-Prime site again and did manage to find some information when I clicked on a screenshot (last time nothing happened). However, it was still guesswork for me to click on the red shapes in the beginning (I don’t read French so perhaps there were instructions as it loaded??)

    Anyway, well done on a really attractive interface. In order to innovate we must take risks and push the boundaries. I admire you for your work.

  38. 38

    This simply madness

  39. 39

    @ukla

    Fourth sentence. What I mean by user triggered actions is clicking the “back” or “reload” button in browser. These actions are poorly handled by most of AJAX sites, and (as far as I know) cannot be handled by plug-in content. Flash links cannot be middle-clicked to be opened in new tab/window (or whatever action user wants middle-click to trigger), nor easily bookmarked with context menu.

    As long as such simple things does not work, I consider these technologies inappropriate to use in serious applications.

    I like to call myself poweruser and find these small inconveniences very annoying. When I watch typical users encountering them, they struggle without ability to understand what are they doing wrong.

  40. 40

    great post, nice collection you should see

  41. 41

    great post, nice collection you should see this one too

    mr. admin please delete my above comment, it’s missing the link
    sory, my mistake
    0(^_^)v

  42. 42

    @samuil

    I guess I don’t know what a “middle-click” is.

    Regarding “forward”, “back” and “reload” browser buttons … Flash can easily handle these calls via SWFObject / SWFAddress. I use this technique on every Flash site I create. Allows users to bookmark any section of a Flash site (deeplinking) and use the standard browser buttons.

  43. 43

    great. flash is a necessary for more fun

  44. 44

    Papervision still uses the ‘old’ Flash CS3 based engine. Papervision X, the project which was intended to include the Flash CS4 ‘3d’ classes into Papervision, is plain dead. Ralph Hauwert et al. developed the code and kept it more or less private so far (which i fully understand, because its his baby). Ralph left the Papervision community. There will be no Papervision which uses Flash 10 and no Papervision X etc..
    If you want to use an engine which uses Flash 10 and beyond, do not use Papervision!
    Sad but true!

  45. 45

    I think your tutorials are extremely well done and your choice of language makes them even more interesting. An occasional bit of irony or an elegant twist in the phrase is a welcome relief.

  46. 46

    Makes me want to destroy Flash even more. Seriously, these are cool, BUT they take a long time to load and eat up huge amounts of memory. Not worth it to the visitor. Just as Flash was not worth it 10 years ago.

  47. 47

    This is a collection of cool Papervision3D websites and tutorials.

  48. 48

    Hello,
    What do you think about my papervision web application.
    http://www.adoxa-bois.fr/
    I’m looking for Papervision’s Blog to Promote my work. I’m ready to give you the entire sources to make
    attractive and useful content.

    Tks and sorry for my english

  49. 49

    I think flash has its limitations but it’s still a really powerful tool. the key is combining it effectively with other scripts and engines

  50. 50

    Very nice examples, nice. I especially like the example of that Hook, I saw that portfolio and it is gooooood. Wish they were situated in Holland :)

    Grtz from Holland
    John

↑ Back to top