{{announcement.body}}
{{announcement.title}}

3D Programming Was Never So Accessible

DZone 's Guide to

3D Programming Was Never So Accessible

Are you a web developer interested in making 3D animations? Then read on for a dev's view of how the Three.js library can help.

· Web Dev Zone ·
Free Resource

I was always attracted to 3D programming and graphics. The way we can create real-looking models of the world with two-dimensional screens always hypnotized me.

When I studied at university for my first degree in computer science I took a course in computer 3D graphics, but back then it was a totally different world. All graphics were made in C or C++ and you had to do most of the math and physics by yourself. And there’s a lot of math there, I mean, really a lot. Vectors, geometry, trigonometry, and so on, you had to be really good at that in order to write 3D graphics. Not to mention the high demands in memory and CPU those programs tend to consume, what made them unfitting to the standard computer.

Well, those days are over. A lot happened in the computing world, huge things, and an advance in 3D programming is one of them. Not long ago I’ve encountered the JavaScript library called Three.js, and my life had changed (well at least in one perspective).

What is Three.js? It’s a JavaScript library that supplies functions and objects for creating and programming three-dimensional graphics. The library’s code works on the WebGL library and offers more or less the same functionality. But here's the good news – Three.js’s goal is to enable 3D graphics programming without the complexity that usually characterizes such projects. It does so by omitting most of the complex mathematics and physics. Sure, you still have to know the basics, a little bit of geometry and trigonometry is a must have, but, other than that, you can count on the Three.js engine to make the computations for you.

For me, this was a real blessing. I love to program, I love to think of solutions to problems, and using Three.js enabled me to do just that. Thanks to Three.js, every crazy idea I had, every animation, graphic, game, you name it, was transformed into an algorithmic problem rather than a math course. Three.js let me do what I love – to program, to find nice solutions, and not to be a mathematician.

The other advantage of Three.js (and maybe it surprises me because I’m old enough to remember other methods) is that it all runs on the browser. No special hardware is needed, no special installations or software. Just your plain browser and your standard computer. For me, it was almost too good to be true, but it works. Even relatively complex computations are done fast enough to go unnoticed. I guess much of the praise is owed to the modern computers and browsers that are incomparable in their powers to the computers of only a decade ago. But part of the good stuff is owed to Three.js as a library. Its creators did a really good work on crafting a useful, clean, and efficient library that actually makes our life (at least our life as programmers) better.

The library’s 3D model is pretty much the same as any other’s – it based on a scene on which the 3D objects are located, a camera that provides the point of view, and the renderer that puts everything on the viewport (in Three.js’s case – the browser).

Most of the common 3D objects such as cubes, spheres, cones, and so on, are represented as pre-defined objects, so we can use them out of the box (again – simplicity is the keyword). Other elements like shadows or sprite motions may be more sophisticated to manipulate. But, all in all, I think that you can get up and running with 3D graphics in much less time with Three.js than any other library I’ve seen.

So, what do you need? First of all, you have to know how to program in JavaScript. You don’t have to be a professional, but more than novice knowledge is required if you want to do something useful. Besides that, as I said, some basic math is needed. Beyond that, you only need a browser and a text editor. Simple as that.

I know that for me Three.js library was the right tool that made me start writing awesome three-dimensional animations, and it let my creativity out. I was finally able to concentrate on programming, thinking about code, and was able to put my ideas into action with my abilities.

If you love to program, and 3D animation and graphics make your brain yield endless ideas, you may want to check it out. You’d love it!

Topics:
three.js ,web dev ,javascript libraries ,libraries

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}