(click anywhere to close)
OPEN MENU

[Three.js] An Advanced Guide

category: Games | course: Threejs | difficulty:

Now that you've read the beginners guide, you want more! And you get more. Learning how to create the very basics of a 3D scene is exciting, but not even close to enough to be able to create your game. In this advanced guide I'll walk you through everything you'll need to create an actual game. I will not cover everything that is possible, only the 'advanced basics' so to speak - how to create any object, how to make the whole set of objects in the scene look good, and how to make these extras work and do their tasks properly.

Purposeful Properties!

Every object in a Three.js world inherits from a certain master object called 'Object3D'. This object contains some very useful properties you'll have to use for pretty much everything. Specific objects add their own extra properties, but these are the ones you can use on anything:

//Updating or Reading the position, rotation and scale
someObject.position
someObject.rotation
someObject.scale

//Everything has the properties x,y,z to set them individually, like this:
someObject.position.x = 20;

//To set them all at once, use..
someObject.position.set(20,60,10);

And if you've created a mesh(like the cube from the previous tutorial), there are also these extra properties you might find useful:

//Get geometry of a mesh
someMesh.geometry

//This contains the vertices and faces
//Which are all stored in an array you can loop through
someMesh.geometry.vertices
someMesh.geometry.faces

Please Note

To save lots of resources, Three.js by default turns off any changes on anything. If you've changed the geometry of an object, you need to tell the system that you did so:

//Make the geometry dynamic, so it allows updates
someMesh.geometry.dynamic = true;

//You get the idea..
someMesh.geometry.verticesNeedUpdate = true;
someMesh.geometry.facesNeedUpdate = true;
someMesh.geometry.normalsNeedUpdate = true;

//As an alternative, you can set these flags on the object once at the beginning, to notify the system this will need constant updating..
someMesh.__dirtyVertices = true;
someMesh.__dirtyEdges = true;
someMesh.__dirtyFaces = true;

What I've just told you, isn't everything there is: there are more common properties, methods, etc. - but these ones are the most common and useful.

CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)