threo.js > Hello World Sample Programs

All code on this page available on GitHub at hello-world

Hello World Very Basic
This is Three.js at its simplest most basic level - just a cube on a white background angled so you can see it is a 3D object. This is the same code as the Cube primitive sample code with most the comments taken out.

Hello World View
This sample adds one feature: the ability to rotate the cube using the pointing device. It's actually quite a significant feature in that it adds animation. Have a look at the setInterval that calls the loop function which in turn rotates the camera. Also look for the capture of the mouse events.

Hello World View Zoom
The extra feature in this file is the ability to zoom using the scrolling ofthe mouse or touchpad. All it takes is adding another addEventListener and a two line function. This is easy!

Hello World View Zoom Lights
The animation is nice, but what we're looking at is pretty boring. Let's lighten up a bit. We'll add a light - and animate it as well. Here's the thing: adding lights can become a really tricky and time consuming business. Here's a useful tip: Add a light that moves with the camera. That way you'll never be in the dark. ;-)

*** Hello World Extreme *** Extra Bonus Feature!!!
How small is the smallest possible three.js file that clearly show a 3D object? Believe it or not, the answer is 369 characters small. It's so small it almost fits into our tiny brain.

We dare and challenge you to do better! Please link to the same souce file. Also the camera position should be non-orthogonal - so everybody can see the object is 3D.

Oh, by the way, if you try to use a shorter variable than "scene" the cube will not display. This looks like a possible bug - unless it's a feature we don't know about.

If you do come up with a sweeter solution please post a link on reddit.com/r/threejs

2011-02-02