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.

Recent Features

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

  • By
    5 Awesome New Mozilla Technologies You&#8217;ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • By
    Input Incrementer and Decrementer with MooTools

    Chris Coyier's CSS-Tricks blog is everything mine isn't. Chris' blog is rock star popular, mine is not. Chris prefers jQuery, I prefer MooTools. Chris does posts with practical solutions, I do posts about stupid video-game like effects. If I...

  • By
    jQuery Chosen Plugin

    Without a doubt, my least favorite form element is the SELECT element.  The element is almost unstylable, looks different across platforms, has had inconsistent value access, and disaster that is the result of multiple=true is, well, a disaster.  Needless to say, whenever a developer goes...

Discussion

  1. 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. 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. 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. 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. Terrain Dynamic – 3 minutes in, and Chrome went “Oh, Snap. Something went wrong” :)
    I very much enjoyed it though!

  7. 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. 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!