Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Amazing 3D Animation with three.js

By  on  

The hottest topic for client-side developers seems to be animation. Whether it be from CSS transformations, keyframe animations, or animations managed with JavaScript APIs, it seems like each day we come across another demo that shows us how can we've come outside of Flash. The latest shocker comes from the three.js project. The creators of three.js explains the project best:

The aim of the project is to create a lightweight 3D engine with a very low level of complexity; in other words, for dummies. The engine can render using <canvas>, <svg> and WebGL.

The three.js engine allows developers to create mindblowing 2D and 3D animations with Canvas and WebGL, from basic cubes to advanced animations so smooth you'll wet yourself.

Favorite three.js Demos

The three.js repository comes with several dozens examples of the engine's capabilities. Here are a few of my favorites:

You can see all of the examples here: http://mrdoob.github.com/three.js/

Mind status: blown. three.js is an incredible project that allows developers to achieve amazing animations efficiently and without Flash. Mr.Doob: take a bow -- three.js is ahead of its time.

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • By
    Save Web Form Content Using Control + S

    We've all used word processing applications like Microsoft Word and if there's one thing they've taught you it's that you need to save every few seconds in anticipation of the inevitable crash. WordPress has mimicked this functionality within their WYSIWYG editor and I use it...

  • By
    MooTools HTML Police: dwMarkupMarine

    We've all inherited rubbish websites from webmasters that couldn't master valid HTML. You know the horrid markup: paragraph tags with align attributes and body tags with background attributes. It's almost a sin what they do. That's where dwMarkupMarine comes in.

Discussion

  1. Clinton Montague

    I love Three.js – it’s great fun just to play with even if you don’t have a client project to work on. One of my favourite demos using it is Anaemia by Litewerx: http://litewerx.dk/anaemia/demo/demo.html?s=maxAnaemia

    A great writeup of how all of the different parts (camera, scene, renderer, etc) fit together: http://www.12devsofxmas.co.uk/2012/01/webgl-and-three-js/

  2. Joe Zim

    Dang, I wish I was into 3d animation! Maybe I should get my brother (video game developer) to just start making browser based games… though he doesn’t really like JavaScript

  3. Alex

    There are additional examples at chromeexperiments.com that are DOPE!
    Make sure you check the tags of each example to find out if the experiment is using the three.js library!

  4. Ashley Ford

    I was looking in to three.js a few weeks back and found this amazing example of a 3D F1 car which you can even drive around the screen using your keyboard.

    http://helloracer.com/webgl/

  5. Bgreater

    It looks like api for three.js and Away3D are structured similarly… Anyone seen a scripted fallback to Away3D so you could code once and deploy to support the broadest audience?

  6. Miro Hristov

    Terrain Dynamic – 3 minutes in, and Chrome went “Oh, Snap. Something went wrong” :)
    I very much enjoyed it though!

  7. Benjamin Bathen

    I love three.js and I’ve been using it quite a bit to show my 3D models.

    you can check them out here:

    http://www.benbathen.com

    Best viewed in Firefox or Chrome IE and Safari don’t fully support WebGL.

  8. Faizan Atiq

    Loved the demos. I really loved what developers of the hobbit did with exploring the map of middle earth.

    http://middle-earth.thehobbit.com/

  9. Fisnik

    hello I would love to download the code for this project for education purpose can anyone provide me that? Thanks in before
    http://mrdoob.github.com/three.js/examples/webgl_shading_physical.html

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!