There is only so much to write about with the Line, and LineSegments constructors in three.js, so to help keep this post from being to thin I will also be writing about LineLoop, Line3, and the Materials that can be used with Lines. There is also the Path constructor that can be used to make 2d shapes, making it similar to the 2d canvas drawing context. Speaking of canvas that to can be used as a way to generate 2d textures that can be used in materials as well.
So there is a great deal to know about when it comes to making lines in three.js for both 3d, and 2d. In this post I will be briefly covering all the options, and provide some examples.
You will want to know about the Vector3 constructor as that is what is used to define points in 2d space in three.js. You should be aware of Materials, Cameras, Renderer’s, and the Scene that are all needed to make a three.js project.
As I say in every three.js post of mine, three.js is a project where the version number matters big time. In this post I am using three.js 0.91.0 ( or just r91 for short )
If you are just making lines, and nothing that will compose a solid object or face, the it does not make sense to use a material that is designed to be used with something that is just a string of points in space.
So if you aim to just draw some lines, and not something that will compose a solid object there are two special materials in three.js that are intended to be used with just lines. LineBasicMaterial, and LineDashedMaterial
If you are trying to use the dashed line material rather than the basic material, but are scratching your head wondering why it is that it is not dashed, then changes are you have not called a
Certain properties such as the line Width might not work as expected on all platforms, as such it might be best to always expect a width of only 1, or at least be happy with how it looks when it is just 1.
One of the best ways to go about getting started with lines in three.js is to just use the Line constructor. There is also the LineSegments constructor that works pretty much the same way only it uses a different rendering method.
A basic example of one of these would be to just create a geometry, push vectors to its vertices array, and then use that geometry with a line material to create an instance of Line that can then be added to a scene.
As with any three.js example that is fully complete there must be a scene, camera, and renderer on top of the use of the Line constructor, geometry, and line materials.
I often place these examples just to have a complete copy and paste, functioning example, and also to cover some additional things that must be done with respect to the other components that make up a three.js project. Although in this case nothing special needs to be done compared to any other example this time around. Just the usual pitfalls to look out for such as making sure the camera is positioned away from, and looking at, what you are working with.
I will not be getting into the canvas 2d drawing api in detail here, but becuase it is another way of drawing lines in three.js it is sure worth mentioning to say the least.
Read my full post on using canvas to make a texture in three.js
If you are familiar with the 2d canvas drawing api that can be used to draw 2d lines by making a texture using a canvas element. I have written a post on this that covers how to do this in detail.
How it is done in a nut shell is to use the 2d canvas drawing context line methods to draw a line like normal, then pass the canvas to the Texture constructor, or better yet the CanvasTexture constructor that is put in place for this specific purpose. The texture can then be used with a material that is used in a Mesh. The Mesh can then use any geometry that will have one or more faces that will make use of the texture.