Graphics Reference
In-Depth Information
With the menu in the top-right section, you can change two properties of this geo-
metry. With the
changeColors
button, you can set the colors of each individual face
to a random color, and with
changeVertices
, you change the position of each vertex
of this cube. To apply these changes, you have to push the
setUpdateColors
button
or the
setUpdateVertices
button, respectively.
How to do it...
There are a number of properties where you have to explicitly tell Three.js about the
update. This recipe will show you how to inform Three.js about all possible changes.
Depending on the change you're making, you can jump in at any step of the recipe:
1. Firstly, if you want to add vertices or change the values of an individual
vertex of a geometry, you can use the
geometry.vertices
property.
Once you've added or changed an element, you need to set the
geo-
metry.verticesNeedUpdate
property to
true
.
2. Following this, you might want the face definition within a geometry to be
cached as well, which will require you to use the
geometry.faces
property.
This means that when you add
THREE.Face
or update one of the existing
properties, you need to set
geometry.elementsNeedUpdate
to
true
.
3. You might then want to morph targets that can be used to create animations,
where one set of vertices morph into another set of vertices. This will require
the
geometry.morphTargets
property. To do this, when you add a new
morph target or update an existing one, you need to set
geo-
metry.morphTargetsNeedUpdate
to
true
.
4. Then, the next step would be to add
geometry.faceVertexUvs
. With
this property, you define how textures are mapped onto the geometry. If
you add or change elements in this array, you need to set the
geo-
metry.uvsNeedUpdate
property to
true
.
5. You might also want to change the vertices or faces' normals by changing the
geometry.faces[i].normal
and
geometry.vertices[i].normal
properties. When you do this, you have to set
geo-
metry.normalsNeedUpdate
to
true
to inform Three.js about this.
Besides the normal, there is also a
geometry.vertices[i].tangent
property. This property is used to calculate shadows and also calculate when
textures are rendered. If you make manual changes, you have to set
geo-
metry.tangentsNeedUpdate
to
true
.
