3D objects in HTML

3D objects in HTML

You know when you search around trying to find out how to achieve a particular task and you stumble on something¬† that is so unique…

I was looking for a way to have two layers moving acorss each other very slowly – Sky Sports TV adverts used it about a year ago – the effect is like creating a 3D moving scene from a 2D image. I found a jQuery technique called parallax scrolling. Parallax is a term I haven’t seen since the days of Commodore64 computer games. The jquery worked, although the smoothness of the animation was more akin to the movement of a space invader on the Atari 2600!

I then got to thinking that what I needed was an 3D animation package. Seeming as I don’t do Flash, it left me with Blender, an amazing Open Source 3D animation package, a bit like 3D Studio Max. Whilst looking through some examples I found a technique called 3D camera mapping and an excellent example video

So, I can create a parallax effect in Blender, but how do I get it into a HTML page? I could export from Blender straight to Flash flv files but that seemed like using a sledgehammer to crack a nut.

So, it seems you can actually embed blender animations directly into a HTML page, for an example see here.

Oliver Partridge

Building websites since 2000, I have a wealth of experience in eMarketing, SEO, e-mail marketing and social media marketing. Google+ and Twitter

Leave a Reply

  • Exclude categories from WordPress feed

    Website Design & Development Wordpress

    When you are using MagpieRSS to parse WordPress RSS feeds onto non-Wordpress pages and at the same time want to exclude a category from the

  • 4 column wordpress theme4 column wordpress theme

    4 column wordpress theme

    Templates & Themes Website Design & Development Wordpress

    So you’ve got your WordPress blog up and running and have started to think about the look of it and themes? In this series we’ll

  • CSS Framework: The 960px grid system

    Templates & Themes Website Design & Development

    CSS frameworks, pre-built templates to make site development easier and quicker, have been around for a while now. One of the most useful out there