10 Stunning Open-Source Examples of Three.js In Action

It might seem crazy, but you can actually build 3D objects with JavaScript. Most web developers rely on libraries like Three.js to accomplish this.

But it’s such a detailed process that not everyone bothers to look into it. Now, if you’re curious about 3D JS stuff, the best way to learn is by studying others. That’s exactly why I made this gallery.

These are some of the best Three.js projects I could find hosted on CodePen. They feature a bunch of different styles and traits that’ll get your creative motor revving.

1. Low Poly Earth

With a single HTML element and a few dozen lines of CSS/JS, we have this low poly Earth by developer Sam Saccone.

It may not seem like a whole lot at first. But it’s one of the more prominent ideas I’ve seen and it even uses a custom animation effect. The landmasses even stick up off the Earth, giving it a much more realistic appearance.

Anyone who’s used Three.js before should know how awesome this is.

It’s certainly a jump ahead of similar projects – mostly for its smaller codebase.

2. Spheres

This strange planet-like project also uses Three.js with a pretty neat effect. Spheres runs on the Stylus preprocessor, which you can see imported into the CSS.

It also runs with no HTML – which really makes this a sight to behold. It’s all JS, all 3D and runs perfectly in every modern browser.

The smaller spheres glide over the larger orb using geometric functions from the JS library. Seems crazy that this is even possible, but it’s a testament to how far we’ve come with CSS.

3. Planet Rotation

Getting into further planetoid ideas, we’ve got this crazy rotating galaxy created by developer Bryan Jones.

It also uses nothing but Three.js and some basic CSS to style and organize the planets. I have to say, the 3D effects are surprising. I still can’t wrap my head around the fact that this stuff is possible in a typical web browser!

But there’s no denying that this CodePen snippet is a great study aide if you’re just starting out in Three.js territory.

4. Treehouse Logo in Three.js

The online learning resource Treehouse is just phenomenal – especially for newbies. One of their instructors, Nick Pettit, actually created a full Treehouse logo using Three.js.

And let me say that this thing is awesome! I’ve never seen a setup like this and I rarely see pens that have such detailed comments. Nick’s code makes it a lot easier to dig in, find functions you don’t understand and then hit Google for answers.

Everything about this 3D logo should prove that modern JS is far from obsolete.

Hint: try click+dragging over the screen to rotate the logo. Fun stuff!

5. Wooden Barrel

Here’s another crazy snippet developed by Nick Pettit using just pure JS code. No HTML, no CSS – everything is rendered through the JavaScript language.

Naturally this relies on the canvas element, which you can generate inside JavaScript. I’ve used it a bit myself – but never to this level. It goes to show just how much you can do with a solid 3D library.

And it also proves that Nick really knows how to teach. This is just one of many samples in his CodePen account – all of which have easy to read comments for learning as you go.

6. Three.js + TweenMax

Developer Martand Kashyap combined the TweenMax script along with Three.js to make this crazy thing.

It’s one of the more unique pens in this list, with some cool animation effects. The panels actually look like flat 2D surfaces, but the flipping animations create a natural 3D effect. It gets pretty crazy if you stare at it long enough.

This was actually based on a motion graphic project that Martand converted into JavaScript. I’m seeing this a lot more often and it’s pretty darn impressive.

7. Particle Star Field

The concept of motion on a 2D surface brings to mind all kinds of parallax designs. You’ll find these all over the web, many times using experimental features in JavaScript.

And this snippet from CodePen is beyond fantastic for gathering such ideas. It’s got a pretty crazy animation with different zooming speeds, sideways panning and a bunch of other related features.

Particles are generated dynamically and you can click anywhere on the page to zoom in. This feels like a never-ending void of space – much like the one we live in. But this one’s created with pure JS code.

8. Haml Cubes

For some more rotating geometry, check out these Three.js cubes. They run on the Haml templating language along with ~100 lines of JavaScript.

Perhaps the most impressive part of this design is the shading effect. You don’t see this very often, but it’s one of the best ways to create a realistic-looking 3D effect in the browser.

Thankfully, you can handle it all through Three.js – with the right snippets. And this one can work as a great template for that purpose.

9. Tesseract

Mike Fey developed this incredibly complex tesseract rendered in 3D space. It actually looks more like an unfolded cube organized into 3D space – sort of like a cube-within-a-cube.

But note this demo takes a lot of libraries to get it going. Mike has five different JS scripts with jQuery, jQuery UI, ThreeJS, TweenJS and a CubeJS script. The latter 3 are hosted on his personal site and should be free to access.

I can’t say that this project would prove valuable in the real world. But it’s one hell of a learning resource if you want to dive into 3D spatial geometry.

10. 3D Shards

Developer Tobias Dühr built these 3D Shards as a sample of what’s possible in ThreeJS. They work like the rotating cubes mentioned earlier, except the shapes are different and the shading is gone, too.

I’d consider this an easier intro to learn ThreeJS if you aren’t sure where to start. Granted, this isn’t a tutorial so it can’t teach you like other resources.

But, just by studying this code, you’ll walk away with some newfound ideas for your own work.

11. 3D Pythagoras Tree

This 3D Pythagoras Tree is simply stunning. Developer Josep Llodrà created this project with just 150 lines of JavaScript, alongside the Three.js library.

It’s actually based on this project, which I mentioned earlier. Basically, it structures those cubes into a single defined shape, and then organizes them based on size and position.

If you aren’t sure what you can do with Three.js, then I hope this gallery offers a little bit of inspiration. But you can always find more on CodePen if you’re willing to look around.