3D Graphics are becoming more and more popular on the internet. They are becoming very easy to make and there is now a wider variety of libraries that people can use to make them.

Some people are taking this to the next step and rather than just having one or two elements of 3D in their websites, they are making their sites completely from these libraries. This allows developers to break away from conventional web development practices to make a complete interactive experience for their visitors.

What it takes to make 3D Graphics

There are many 3D libraries available that are completely free and open source. One of the more popular and well established libraries is Three.js. The library has a vast array of functionality and is very well documented with examples of every function.

The library is completely JavaScript based so it is compatible across all major browsers. No prior graphics knowledge is required either, everything can be made using code.

Examples

Here are a few examples of sites with a high level of interactivity that have been made using the Three.js library.

Roberta Di Camerino

Roberta Di Camerino is an Italian handbag designer and manufacturer. His website homepage takes you on a journey through how they designed their latest collection and the inspirations they drew from.

They make good use of a parallax effect using 3D graphics (parallax is when you scroll down a page and see different sections of an image) with 3D objects incorporated. You can also see the objects from different angles that you wouldn’t be able to with a 2D parallax.

One of the more impressive sections of the site is the latter part where you can scroll through the canals of Venice and see a hand drawn building rendered in 3D.

Hennessy

Hennessy are a cognac producer and use their website to take you through a journey of how they use their vineyards to make their cognac. They use a combination of 3D scenes with videos.

The 3D scenes are designed using particles, like a digital take on Pointillism. The particles are massed together to form solid objects. This works very well with the added interactivity through mouse clicks and drags. They have also used a good combination of 3D scenes and videos to break up content delivery.

A short journey

A Short Journey is a website that takes you on an adventure with a man going on holiday. You get to experience packing in the city and then various activities on the coast. You are prompted to complete various actions to transition from scene to scene and every scene has something different happening with varying elements that you can interact with. At the end you can sign a postcard of your holiday and share it on social media.