John Dyer

Technology and web development in curly bracket languages {Javascript, C#, ActionScript}

Papervision3D Bookshelf

by John Dyer 21. August 2008 03:02

I recently completed a website that catalogs books and in the development I wanted to make something really new. The backend is all ASP.NET, implementing UrlRewriter.NET and AJAX.NET libraries. The frontend uses several JavaScript libraries including Prototype, Scriptaculous, and Tablesort.

The one really unique feature of the site is the 3D bookshelf built using Papervision3D. Just yesterday it was featured in blog Daily PV3D as Papervision showcase.

You can check out the book shelf here:

http://www.bestcommentaries.com/category/proverbs/

Screenshots

Plain bookshelf:

image

Mouse over the third book from the left:

image 

Book clicked:

image

How it works

Using Papervision, it's relatively easy to make a 6 sided polygon (cube) and then wrap images around it. I use the physical dimensions of the actual book to size the cube. Then, for the cover, I use an image of the book and wrap the last pixel around the side since I don't have spin images. I tried using System.Drawing code to write the author's name on the spine, but I could never get it to look just right, so I left it out. The only real catch was that I needed to place the shelf on a different Papervision scene to prevent clipping problems. The bookshelf also interacts with an HTML table down below via Flash's JavaScript ExternalInterface.

Since developing this 3D bookshelf, I found one site that does something somewhat similar, but they have the spine images which I can't afford to find for 1000s of books. Also, I think that the JavaScript interaction on mine might give it an edge.

Comments

8/23/2008 9:48:17 PM # Dan Dan United States | Reply
Wow.

Just WOW.

Terrific work there John.
8/26/2008 12:18:56 AM # Patrick Cheatham Patrick Cheatham United States | Reply
Hi John:

(clicking the 'bold' button caused the page to refresh; apologies if double posted)

Just wanted to say hello & thanks for the nice image of Chichen Itza; brought back memories of my visits there in the 80s/90s.

Also, AFAIK, "Flash Panorama Player" is not Papervision based... Though my open source viewer is. Smile See link below & enjoy!

Cheers,

Patrick

flashpanos.com/.../panosalado-open-source-flash-panorama-player


9/30/2008 2:26:54 AM # Alp Çoker Alp Çoker Turkey | Reply
Brilliant project..But I can zoom in bookshelf with mouse scroll but also pages scrolls ?
Alp Çoker's last post: feedproxy.google.com/.../post.aspx" rel="nofollow">NedirTV?com – Yeni Versiyonu Yayına Başladı
2/14/2009 6:42:46 AM # potty potty United States | Reply
Interesting project. Thanks for sharing!
8/12/2010 10:18:08 AM # Replica Watche Replica Watche People's Republic of China | Reply
Our shop offers many famous Chopard Replica Watches. for example:Chopard Mille Miglia Replica Watches,Chopard Grand Prix de Monaco Historique 2008 Chronograph, They are all wrist watches and you can buy one for your father to show your love ,moreover. no one could know it a replica one.
8/26/2010 12:09:02 PM # Dissertation writing Dissertation writing United Kingdom | Reply
Extremely useful and informative article. I wish i can do all of that in a short period of time. But for sure doing those will produce results. I will try to spread your words through my blog and link it back to you. Thanks a lot for those tips.

Add comment


(Will show your Gravatar icon)

  Country flag

biuquote
  • Comment
  • Preview
Loading



Web Statistics