We've already learned that, in order to create a mesh, we need a geometry and one or more materials. Once we have a mesh, we can add it to the scene, and it is rendered. There are a couple of properties that you can use to change where and how this mesh
appears in the scene. In the first example, we'll look at the following set of properties
and functions:
Function/Property Description
position Determines the position of this object relative to the position of its parent. Most often the parent of an object is a THREE. Scene() object.
rotation With this property you can set the rotation of an object around any of its axes.
scale This property allows you to scale the object around its x, y, and z axes.
translateX(amount) Moves the object through the specified amount over the x axis.
translateY(amount) Moves the object through the specified amount over the y axis.
Chapter 2
[ 53 ]
As always, we have an example ready for you that'll allow you to play around with these properties. If you open up the 06-mesh-properties.html example in your browser, you will get a drop-down menu where you can alter all these properties and directly see the result, as shown in the following screenshot:
Let me walk you through them; I'll start with the position property. We've already seen this property a couple of times, so let's quickly address it. With this property you can set the x, y, and z coordinates of the object. The position of an object is relative to its parent object, which usually is the scene that you have added the object to. We'll get back to this in Chapter 5, Learning to Work with Geometries, when we will look at grouping objects. We can set an object's position property in three different ways; each coordinate can be set directly as follows:
cube.position.x=10; cube.position.y=3; cube.position.z=1;
Working with the Basic Components That Make Up a Three.js Scene
[ 54 ] But we can also set all of them at once:
cube.position.set(10,3,1);
There is also a third option. The position property is a THREE.Vector3 object. This means that we can also do the following to set this object:
cube.postion=new THREE.Vector3(10,3,1)
I want to make a quick sidestep before looking at the other properties of this mesh. I had mentioned that this position is set relative to the position of its parent. In the previous section on THREE.Geometry, we made use of the THREE.SceneUtils. createMultiMaterialObject object to create a multimaterial object. I had explained that this doesn't really return a single mesh, but a group that contains a mesh based on the same geometry for each material. In our case, it is a group that contains two meshes. If we change the position of one of the meshes that is created, you can clearly see that there really are two distinct objects. However, if we now move the created group around, the offset will remain the same. These two meshes are shown in the following screenshot:
Chapter 2
[ 55 ]
In Chapter 8, Creating and Loading Advanced Meshes and Geometries, we will look deeper into the parent-child relations and how grouping affects transformation, such as scaling, rotation, and translation. Ok, the next one on the list is the rotation property. You've already seen this property being used a couple of times in this as well as the previous chapter. With this property, you can set the rotation of the object around one of its axes. You can set this value in the same manner as we did the for the position property. A complete rotation, as you might remember from math
class, is two pi. The following code snippet shows how to configure this:
cube.rotation.x=0.5*Math.PI;
cube.rotation.set(0.5*Math.PI,0,0);
cube.rotation = new THREE.Vector3(0.5*Math.PI,0,0);
You can play around with this property by using the 06-mesh-properties.html example.
The next property on our list is one that we haven't talked about: scale. The name pretty much sums up what you can do with this property. You can scale the object
along a specific axis. If you set the scale to values smaller than one, the object will
Working with the Basic Components That Make Up a Three.js Scene
[ 56 ]
When you use values larger than one, the object will become larger as shown in the screenshot that follows:
The last part of the mesh that we'll look at in this chapter is the translate functionality. With translate, you can also change the position of an object, but instead of defining the absolute position of where you want the object to be, you will define where
the object should move to, relative to its current position. For instance, we've got a sphere object that is added to a scene and its position has been set to (1,2,3). Next, we will translate the object along its x axis by translateX(4). Its position will now be (5,2,3). If we want to restore the object to its original position we will set it to translateX(-4). In the 06-mesh-properties.html example, there is a menu tab called translate. From there you can experiment with this functionality. Just set the translate values for the x, y, and z axes, and click on the translate button. You'll see that the object is being moved to a new position based on these three values. For more information on meshes, geometries, and what you can do with these objects, look at Chapter 5, Learning to Work with Geometries, and Chapter 7, Particles and the Particle System.
Chapter 2
[ 57 ]