Three.js seems to be the most popular 3D library at the moment (late 2016) , let’s check out the state of 3d on the web with a few code samples.
It might seem like a lot of code, but if you’ve ever worked with 3D, this is pretty normal, go through the code comments for a step by step of building a scene.
So we have a scene and a rotating cube, where to go next ? well…
It’s not perfect, but it’s a start, let’s look at how to control a camera next so we can interact with the scene.
As you might eventually find out, Three.js is loosely documented, or rather it is code documented, which means that in order to learn Three.js, you have to go through the examples and read the code, with the occasional visit to stackOverflow or other blog posts like this one.
I bring this up because in order to add camera controls, you need to figure out on your own that it is a) a different library some cool folks made, and b) it is documented in the comments, well now you know, but you see my point.
Look at it go!
There are of course more and more complex ways to animate things in Three.js, you can start by simply modifying the scene and geometry within your render loop,you can add a tweening engine, or import a physics library, I’ll leave that to you or other future posts, for now, let’s go back to basics and figuring out how to add custom materials to our 3d cube.
There are more types of materials and complexity, just check out the docs.
Interacting with the scene
To round and complete this introduction to Three.js, let’s learn how to interact with the objects in the 3D scene since that will probably come in handy.
Whoaa ! To be honest I had no idea if I was going to be able to finish a post on 3D basics with Three.js, it is a bit on the complicated side, but then again 3D is that kind of thing, I can now comfortably add some 3D to my projects and I hope these few code samples set you in the right 3D path.
3D with Three.js Tough but rewarding.