Three.js learning about vertices, vectors and matrices

Question

I am pretty familiar with the Three.js 3D JavaScript library, I know how to add objects, lights, textures, group them and move them around a little bit and maybe play around with the camera.

What I want to know is how to take it to the next level by learning about the inner workings. I have already had a good look around for information on things like matrices, but all I find is complex mathematical examples.

I would like to know if anyone can point me to any sites or books which would help me to learn how to do more complex things in three.js, like adding an object to a specific vertex on an object, or how to find the edge of a sphere and get another sphere to roll around it.

Then with vectors, can I learn how to get objects to move in specific ways? I am willing to put in the effort but I don't know what I should be reading and what would be relative for this type of library.

Answer 1

Look into linear algebra for computer graphics. There are plenty of resources to choose from. Try to find something closer to your background. If maths isn't part of your background, no problem, steer to more game dev related territories.

Personally I recommend 3D Math Primer as it's written by experienced game developers in an easy to understand way. Working with numbers starts in 1D counting sheep, it's that easy! The book explains in details the maths (linear algebra, geometry) and code behind concepts like vectors, matrices, quaternions. The book uses C++, but it will be fairly simple to understand the syntax if you're familiar with javascript already. The main point would it be to get familiar with the concepts, because three.js already implements vectors,matrices,quaternions, etc. It's a matter of understanding what they do and especially how you can use them.

If it helps, you can also check out the Khan Academy resources on Linear Algebra (e.g. Vectors, matrices, etc. but the focus in the math side more and less on the computer graphics side. The Mathematics tutorials from Game Institute are great, but unfortunately not free.

Start with basics: what is a vector, what are typical vector operations (get the perpendicular between 2 vectors using the cross product, get the angle between two vectors using the dot product, etc.) and see find your own pace from there. Matrices may seem scary, but after you've understood vectors they'll make a lot more sense.

Since three.js already already provides a lot of functionality, you can read about the maths and try it straight in three.js - learning by doing.

Just to add, mr.doob added a link to a really cool (and free) course on Interactive 3D Graphics taught in three.js that covers vectors and matrices. I warmly recommend it, it's really nicely explained and so easy to follow.