The last couple of materials that we're going to look at can only be used on one
specific geometry: the THREE.Line. As the name implies this is a single line that only consists of vertices and doesn't contain any faces. The Three.js library provides two different materials that you can use on a line, as follows:
• LineBasicMaterial: The basic material for a line that allows you to set the colors, line width, line cap, and line join properties
• LineDashedMaterial: Has the same properties as the LineBasicMaterial, but allows you to create a dashed effect by specifying the dash and spacing sizes We'll start with the basic variant, and after that we'll look at the dashed variant.
Working with the Three.js Materials
[ 122 ]
The LineBasicMaterial
The materials available for the THREE.Line geometry are very simple. The following table shows the properties available to this material:
Name Description
color This defines the color of the line. If you specify vertexColors, this property is ignored.
linewidth This property defines the width of the line.
LineCap This defines how the end of a line between the two vertices looks in the wireframe mode. Possible values are butt, round, and square.
The default is round. In practice, the results from changing this property are very difficult to see. This property isn't supported on the
WebGLRenderer.
LineJoin This defines how the line joins are visualized. Possible values are
round, bevel, and miter. The default is round. If you look very
closely, you can see this in the example by using a low opacity
and a very large linewidth. This property isn't supported on the WebGLRenderer.
vertexColors You can supply a specific color for each vertex by setting this property to the THREE.VertexColors value.
fog This defines whether the object is affected by the global fog property. Before we look at an example of the LineBasicMaterial, let's first have a quick look
at how we can create a THREE.Line mesh from a set of vertices, and combine it with a LineBasicMaterial to create the mesh, as shown in the following code snippet;
var points = gosper(4, 60); var lines = new THREE.Geometry(); var colors = [];
var i = 0;
points.forEach(function (e) {
lines.vertices.push(new THREE.Vector3(e.x, e.z, e.y)); colors[ i ] = new THREE.Color(0xffffff);
colors[ i ].setHSL(e.x / 100 + 0.5, ( e.y * 20 ) / 300, 0.8); i++;
});
lines.colors = colors;
var material = new THREE.LineBasicMaterial({ opacity: 1.0,
linewidth: 1,
vertexColors: THREE.VertexColors }); var line = new THREE.Line(lines, material);
Chapter 4
[ 123 ]
The first part of this code fragment, that is, var points = gosper(4, 60);, is used as an example to get a set of x and y coordinates. This function returns a Gosper curve (for more information, go to the following URL: http://en.wikipedia.org/wiki/ Gosper_curve), which is a simple algorithm that fills a 2D space. What we will do next
is create a THREE.Geometry instance, and for each coordinate we will create a new vertex, which we push into the line properties of this instance. For each coordinate, we will also calculate a color value that is used to set the colors property.
In this example we've set the color by using the setHSL() method. Instead of providing the values for red, green, and blue, with HSL we will provide the hue, saturation, and lightness. Using HSL is much more intuitive than RGB and it is much easier to create sets of matching colors. A very good explanation of HSL can be found
in the CSS3 specification at http://www.w3.org/TR/2003/CR- css3-color-20030514/#hsl-color
Now that we have our geometry, we can create a LineBasicMaterial and use this together with the geometry to create a THREE.Line mesh. You can see the result in example 09-line-material.html, as shown in the following screenshot:
Working with the Three.js Materials
[ 124 ]
The next and last material that we will discuss in this chapter is only slightly different from the LineBasicMaterial. With the LineDashedMaterial, we can color lines, and also add a dash effect.
The LineDashedMaterial
This material has the same properties as the LineBasicMaterial, and two
additional ones that you can use to define the dash width and the width of
the gaps between the dashes are as follows:
Name Description
scale This scales the dashSize and gapSize. If the scale is smaller than 1, the dashSize and gapSize will increase; if the scale is larger than 1, the dashSize and gapSize will decrease.
dashSize This defines the size of the dash.
gapSize This indicates the size of the gap.
This material works in almost the same way as the LineBasicMaterial, as shown:
lines.computeLineDistances();
var material = new THREE.LineDashedMaterial({ vertexColors: true, color: 0xffffff, dashSize: 10, gapSize: 1, scale: 0.1 });
The only difference here is that you have to call the computeDistances() method. If you don't do this, the gaps won't be shown. An example of this material can be found in 10-line-material-dashed.html and looks like the following screenshot:
Chapter 4
[ 125 ]
Summary
The Three.js library gives you a lot of materials that you can use to skin your geometries. The materials range from the very simple MeshBasicMaterial to the complex ShaderMaterial, where you can provide your own vertex and fragment shaders. The most important subjects that were discussed in the chapter are as follows:
• The materials share a lot of basic properties. If you know how to use a single material, you'll probably also know how to use the other materials.
• Not all materials respond to the lights in your scene. If you want a material that takes lighting into effect, use the MeshPhongMaterial or MeshLambertMaterial.
• When you want to create a transparent material, it isn't enough to just set the opacity property, you also have to set the transparent property to true.
• Most of the properties of a material can be modified at runtime. Some,
though, for example, side, can't be modified at runtime. If you change such
a value, you need to set the needsUpdate property to true. For a complete overview of what can and cannot be changed at runtime, see the following page: https://github.com/mrdoob/three.js/wiki/Updates
• You can assign multiple materials to a single geometry. Remember, though, that this will create copies of the same geometry and result in multiple meshes.
• The THREE.Line geometry can't be skinned with normal materials. For this, you have to use either the THREE.LineBasicMaterial or the THREE. LineDashedMaterial.
• If you want a shiny object, use the MeshPhongMaterial; if you want a non-shiny object, use the MeshLambertMaterial.
• Use a dat.GUI approach to experiment with the properties of a material. It's very hard to guess the correct values of the material during development. In this and the previous chapters, we've already talked about geometries. We've used them in our examples and already explored a couple. In the next chapter, you'll learn everything about geometries and how you can work with them.