10 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
See the Pen low poly earth by Sam Saccone (@s) on CodePen.
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 land masses 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
See the Pen Spheres by Olle Werme (@werme) on CodePen.
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
See the Pen Planet Rotation by Bryan Jones (@bartuc) on CodePen.
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
See the Pen Treehouse Logo in three.js by Nick Pettit (@nickpettit) on CodePen.
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
See the Pen Wooden Barrel in three.js (iOS 8 Version) by Nick Pettit (@nickpettit) on CodePen.
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
See the Pen Three.js + TweenMax (Experiment) by Martand Kashyap (@MartandKashyap) on CodePen.
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
See the Pen 3D Particle Star Field w Back by Mylock (@mylock) on CodePen.
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
See the Pen Three.js Cubes by prisme (@prisme) on CodePen.
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
See the Pen Tesseract by Mike Fey (@mikefey) on CodePen.
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
See the Pen 3D Shards by Tobias Dühr (@saibotd) on CodePen.
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
See the Pen 3D Pythagoras tree II by Josep Llodrà (@jllodra) on CodePen.
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.
The post 10 Open Source Examples of Three.js In Action appeared first on Speckyboy Web Design Magazine.