Smashing Magazine - we smash you with the information that will make your life easier. really.
Discovering Papervision3D: Best Design Practices and Tutorials
Papervision3D (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-PRIME
A stylish and unobtrusive portfolio design featured with a nifty Papervision3D image gallery which can be displayed in a few ways.
Hatica 2009
This website reminds of a little fairy-tale world floating in shining light space. Navigation is quite easy and enjoyable.
HOOK
Hook’s portfolio is a picture of a truly creative and beautiful design. Everything here is about brilliant individuality and attention to details.
Lab9
It’s a great example of clean and neat Papervision3D interface.
SapientNitro
This digital styled website performs awesome transitions, typography visualization and sound effects.
Zara Media Design Group
Nice and minimalist PV3D-powered website. Open a three-dimensional book to meet Zara Media Design Group.
Oval Design
Portfolio of Oval Design Studio provides an amazing interaction experience. Website represents the whole universe you can explore on a controllable spacecraft.
13flo
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.
Dasai
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.
TBC
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.
Scalena Agency
Chic website. Both in style and technical execution.
Barcinski&Jeanjean
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!
Freedom+Partners
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.
WHITEvoid
Elegant minimalist design and handy navigation structure provide a remarkable visual experience. It proves that usable Flash websites do exist.
Advertising & Social Campaigns
Air Jordan 2009
Clean and fresh design of this site is not less inspiring than personal stories of famous sportsmen collected in a 3D video gallery.
Coors Light Project Cold
3D beer can model creates a cool tactile effect. Cans seem to be good containers not only for beer but for content as well.
Bankers’ stories
This promo website of the French bank Societe Generale shows how PV3D may come in handy to create social, communication-oriented mediums.
Panasonic: Everything matters
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.
Pepsi Music Challenge
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!
The Baileys Lounge
Another creative idea realized by means of Papervision3D – dive into the Baileys Lounge while turning over the pages of virtual folding book.
The Economist: Thinking Space
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.
SpringHill Suits
It is a nice and clean website providing interesting visual effects and interaction. A good idea for an online hotel tour.
The Cigarette Is Dead
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 Wrong Door
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.
UFC 100
This is the second PV3D-based website for Ultimate Fighting Championship official web presentations. (UFC84 was the first one) Excellent usage of this technique can be observed in both cases.
Summerfestival 2009
Burst of colors, psychedelic balloons and original navigation form a quite imaginative website.
FOXTEL: I’m Unique
IamuniQue project lets you build an interactive 3D portrait of yourself and share it with other users. New fun for social networking enthusiasts.
Watchmen Motion Comic
Wonderful presentation of Watchmen Motion Comic features superb interactivity, great dynamics and transparent navigation.
Foot Locker
Another example of fabulous PV3D effects and unique creativity in product presentation.
Absolut
“Doing things differently leads to something exceptional”. The following website contains exceptional videos and beautiful minimalist 3D gallery.
Concave Scream: Soundtrack For A Book
Dancing particles and dreamy music will take you far away from your desktop. It is probably the most unusual website from our collection.
Papervision3D.org
Official site
The home page of Papervision3D official site is nothing but a three-dimensional underwater world visualization. The work shines for itself.
carlosulloa.com
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.
HelloEnjoy
This is a new home of carlosulloa.com. It features PV3D engine powerful capabilities enabling to play around with 3-dimensional text.
Tutorials
Papervision3D Flash Gallery
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.
Introduction to Augmented Reality
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 Beginners
This is a collection of video tutorials covering some basics of Papervision3D. A good introductory set for beginner users.
Papervision3D Collada Basics
This video guide describes how to create and import 3D textured models for use in PV3D.
Build A Wiimote Controlled Lightsaber Using WiiFlash and Papervision3D
Learn how to use a Wiimote within Flash and how to blend it with Papervision3D to get an interactive lightsaber.
Interactive 3D Cube
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 Maps
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 presentation of the PV3D Geocoding application
Julia May is a freelance writer now working with FlashMint, the top-class provider of Flash websites.
(1 votes, average: 5.00 out of 5)
Loading ...- 46 Comments
- 1
- 2August 10th, 2009 4:53 pm
Makes me want to learn Flash
- 3August 10th, 2009 5:09 pm
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.
- 4August 10th, 2009 5:12 pm
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.
- 5August 10th, 2009 5:24 pm
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 tutorialsKeep up the good work
- 6August 10th, 2009 5:28 pm
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.
- 7August 10th, 2009 6:04 pm
Seriously I didn’t even think that they are exist. Cool job!
- 8August 10th, 2009 6:14 pm
I’ve seen this before a pretty impressed with how they render this in flash.
- 9August 10th, 2009 6:17 pm
wow nice..im excited to view example sites here..but our connection here is very slow…
- 10August 10th, 2009 6:36 pm
Sweet showcase!
Glad I’m on a beasty machine - 11
- 12August 10th, 2009 9:35 pm
Great list!
Our class web site at Hyper Island uses Papervision3D. Check it out: http://www.spaceisthelimit.com
- 13August 10th, 2009 9:44 pm
crazy stuff just wow I need to learn grphic design beside my flash experience
- 14August 10th, 2009 10:55 pm
These website are awesome.
makes me think my web skills need a major upgrade
- 15August 10th, 2009 11:20 pm
Eye candy
- 16August 11th, 2009 12:08 am
Wahooo…
Amazing examples ! - 17August 11th, 2009 12:11 am
Wow, nice examples! I came across an interesting creation just the other day as well – http://www.easy.nl/
- 18
- 19August 11th, 2009 1:21 am
Awesome
- 20August 11th, 2009 1:23 am
Stunning Collection!
Featured at Flashscope.com – flash components and developers community - 21August 11th, 2009 1:25 am
Papervision3D provides really great unlimited solutions for Flash designers and developers!
- 22August 11th, 2009 4:29 am
Amazing websites!
I have seen one more website http://www.rubenpapian.com and has really interesting 3D…
- 23August 11th, 2009 6:19 am
The site Air Jordan 2009 isn`t load…
But thanks SM for the article! Amazing fx here!!
- 24August 11th, 2009 7:00 am
Very nice!
- 25August 11th, 2009 7:05 am
Awesome
- 26August 11th, 2009 8:05 am
Superb Collection…Helps me a lot…
- 27August 11th, 2009 12:03 pm
I have never tried Papervision. This really makes me want to give it a go.
- 28August 11th, 2009 4:23 pm
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.
- 29August 11th, 2009 9:04 pm
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.
- 30August 12th, 2009 2:19 am
@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!
- 31August 12th, 2009 2:44 am
Great List
Hows about one for Unity3D and FreeSpin3D? - 32August 13th, 2009 2:30 am
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.
- 33August 13th, 2009 5:33 am
where are the tutorials?
- 34August 13th, 2009 9:10 am
@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.
- 35August 13th, 2009 8:19 pm
It is really great this time SM posted about PV3D and Flash. :) You may also enjoy best flash websites here koflash.com. Have fun!
- 36August 14th, 2009 4:53 am
the best pv3d I’ve ever seen is . it has inspired the whole pv3d community, even some of those sites mentioned above :)
- 37August 16th, 2009 3:03 am
@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.
- 38August 20th, 2009 1:20 pm
This simply madness
- 39August 26th, 2009 3:14 am
@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
- 41September 4th, 2009 12:42 am
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 - 42September 4th, 2009 10:29 am
@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.
- 43September 4th, 2009 11:00 am
great. flash is a necessary for more fun
- 44October 13th, 2009 4:48 am
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! - 45October 15th, 2009 3:23 am
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.
- 46November 10th, 2009 1:04 pm
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.
- 00
There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
Interact
Popular
- 100 Wordpress Themes
- Photoshop Tutorials
- Fantastic Wallpapers
- 40+ Excellent Freefonts
- Dual-Screen Wallpapers
- Wordpress Themes for 2009
- Illustrator Tutorials
- Incredible Free Icon Sets
- High-Quality Free Fonts
- 30 Scripts For Galleries
- Photoshop Text Effects
- Useful Icon Sets
- Web Design Trends
- iPhone Wallpapers
- Before Launching a Website
- CSS Layouts And Templates
- Photoshop Actions
- Stunning Pictures and Photos
- Fantastic HDR Pictures
- Logo Design Tutorials
- Free Design Templates
- 10 Mistakes In Logo Design
- Photoshop Custom Shapes
- 40 Creative Design Layouts
- 8 Layout Solutions
- 53 CSS Techniques
- Photography Techniques
- Black & White Photography
- Styling Design Elements
- CSS-Based Forms
- 50 jQuery Techniques
- 50 Portfolio Websites
- 50 CSS Techniques
- Creative Logo Designs
- Desktop Wallpapers
- 25 Open Source Mac Apps
- 50 Free Icon Sets
- The Big Showcase Of Online T-Shirt Stores - http://bit.ly/5Tq8uA
- @ilmv oh ok then ;)
- @ilmv no, the SM Book will not be out of date :) We made sure it contains universal design, usability and marketing principles.
- Apple ad bombing Windows 7 on Google - http://bit.ly/28ctPq
- Atatonic - a fresh CSS framework - http://bit.ly/4oOV2w (via @umutm)
- @HrvojeKC yes, that's an interesting idea. Maybe when the waiting is over, we'll write a detailed post about it.
There are some really nice examples here.