3D with Three.js

October 15, 2016

Preface

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.

Note - Challenges: I gave myself little challenges you are welcome to try if you want to recreate my own learning curve.

Note:3D is an advanced topic in programming,but mostly because there are a lot of terms and conventions, don't get discouraged if you feel a little lost at first, just look up the terms, additionally, some 2D animation experience and intermediate JS will help you.

Let's 3D

Challenge :Import three.js and create a basic implementation

See the Pen Three.js pt 1. by Eugenio - Keno - Leon (@k3no) on CodePen.

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…

Lights

Challenge :Figure out how to create a light, illuminate a scene and cast a shadow in three.js

See the Pen Three.js pt 2. by Eugenio - Keno - Leon (@k3no) on CodePen.

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.

Camera (Controls)

Challenge :Figure out how to control a camera in three.js

See the Pen Three.js pt. 3 by Eugenio - Keno - Leon (@k3no) on CodePen.

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.

Action

Challenge :Figure out how to animate our cube

See the Pen Three.js pt. 4 by Eugenio - Keno - Leon (@k3no) on CodePen.

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.

Materials

Challenge :Figure out how to apply a material to a cube in three.js and what types of materials there are.

See the Pen Three.js pt. 5 by Eugenio - Keno - Leon (@k3no) on CodePen.

There are more types of materials and complexity, just check out the docs.

Importing

Challenge :Figure out how to import 3d models into three.js

See the Pen Three.js pt.6 -Imports by Eugenio - Keno - Leon (@k3no) on CodePen.

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.

Challenge :Figure out how to interact with our cube or whale

See the Pen Three.js pt.7 - Interact by Eugenio - Keno - Leon (@k3no) on CodePen.

Further Challenges: These are just some basic building blocks, next challenges would depend on what is it that you are trying to build, you will also need to organize your code better, using objects with three.js and following a game pattern are good places to start, along with refinement of each of the above topics

Conclusion:

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.

TL;DR:

3D with Three.js Tough but rewarding.

Best,
Keno