"Uh, genius, billionaire, playboy philanthropist" Tony Starks says. He is the one who can build and afford such a marvelous lab in his house. In this project, I imitate some of the interface designs and actual scenes in Iron Man 2. The goal is to create an immersive experience just like watching movie. Hope you would enjoy it like I did.

*Best View using Chrome.

Wireframe of Ironman( with scanning disk and arm robots )

The suit is being scanned and repaired simultaneously. You can see the blue light reflection with the scanning disk move from top to down.

Giant Semi-Transparent Monitor ( view from car )

There is a scene which is about searching Anton Vanco on a giant monitor, but this time is the trailer of Iron Man 3. I used video tag as texture and converted the file to both mp4 and ogv which support major browsers except IE.

Giant Semi-Transparent Monitor ( view from the front )

Wardrobe of suits ( TOP View )

Each suit has a different light sources from arc generator. By clicking on a suit, you can bring forward the suit for finer examination.

Wardrobe of suits ( CLOSE View )

Global News

Every hero needs to know the latest news around the world. This 3D globe is a real-time news aggregator to visualize the most important events which happens right now (not yet implemented).

Periodic Table

There is also a scene which Tony Stark is simulating all possible combinations of known elements. We can select each element and the "Girl Jarvis", which is google translate API, will tell you the name of the elements. This part is tweaking for Mr.Doob's periodic example.


When using with CSS3DRenderer and WebGLRenderer simulatenously, I see a huge drop on fps. So I decided to render css3d scene on demand(when you want to see periodic table), which actually greatly increase the performance.

IRON MAN using three.js

WebGL using ThreeJS, HTML5/CSS3, Google Translate API
Firefox doesn't support mp3 audio which is for google translate api and handles css3 box-shadow incredibly slow