It is often desirable to set a material into a wire frame mode so that just the basic form of the object is apparent without any faces rendered. Many materials in threejs such as the Basic material have a wire frame property that when set to true will render the mesh in as a wire frame. The built in wire frame mode will work okay for the most part, but many might not care for the look of it, so there is a need to look for additional ways to create a wire frame such as using the line material with a custom geometry. This alternative to the wire frame mode of materials will work fine most of the time, but still there might end up being problems with rendering. One major problem has to do with line width not working on certain platforms. So then another solution might involve creating custom textures using canvas elements or data textures that can then be applied to another property of a material such as the map property.
This post will be on the wire frame mode of various materials in threejs, the basic use of the property typically just involves setting a boolean value to true. Sense setting a material into wire frame mode just involves setting a boolean to true, many of the examples here will have to do with various related topics that might come up. I could also take a moment to get into some more complex solutions that will take a bit more to get working. These alternatives to the wire frame mode of materials will result in a similar effect, but with some kind of added benefit when it comes to creating some kind of style when making a final product with a wire frame kind of look.
The wire frame option is one of many options of various materials that support a wire frame mode. If you have not gone over the various options with materials then that is something that you should take a moment to look over when you get a moment. For most of my examples that I make for my various posts on threejs I often like to go with the standard material as it is a good all around material for most use cases. However as far as the built in wire frame mode is concerned a material option that does not respond to light, such as the basic material of normal material will work just fine.
Still looking into the other options is very much called for depending on a rage of factors such as making the choice of using a light source or not. When it comes to the subject of light with wire frame mode it will matter if I am using a material that responds to light or not. Also with some of the alternative solutions that have to do with making textures it will matter if I go with the map property and the standard material. There will me more on this in later sections in this post.
The source code examples that I am writing about here can also be found in my test threejs repository on Github. This is also where I park the source code examples for my many other blog posts on threejs as well.
When I first wrote this post I was using r111 of threejs, and the last time I cam around to do a little editing of this content I was testing things out and updated the code to my r146 style rules. Code breaking changes are introduced to threejs all the time, so I need to repeat this in every threejs post regardless of what the post might be on. When it comes to just using the wire frame mode boolean of a material I can not say that has changed much, but other aspects of these examples might break in future versions of three.js.
In this section I will be starting out with just a few basic examples of wire frame mode, with mesh object materials. For the most part one will just need to set a boolean value to true and that will be the end of it. However there are a number of things that might come up when it comes to getting into this sort of thing. So I will want to have a few simple examples here before getting into any more advanced examples and alternatives with wire frames.
Like many of my other three.js posts I like to start off with a very basic example of something, and get that out of the way before moving on to more complex examples, of just simply other ways of doing more or less the same thing. The easiest way to get started with wire frames is to just set the wire frame property of a material like that of the basic material to true, and that will just about wrap it up.
Some people might not like the outcome of this though when it comes to having a wire frame type mode though. Also in this example I am using the basic material, there are maybe a few things to cover when it comes to materials that respond to a light source such as with the standard material. However before I get into anything with light maybe it would be best to look at a few more basic examples, and maybe some not so basic examples of also getting a kind of wire frame like effect for a mesh object.
There is a wire frame line width option, but this feature will not work on all platforms. There is also a simular problem when it comes to using lines in general also. This is then one of the major reasons why it might be better to create a custom shader material, or exploring other options to get a kind of look that is desired.
There is also adding a color attribute to a geometry that is then used with a mesh and a material set into wireframe mode. When doing so there is not just simply setting the vertex color Boolean of the material to true as well, but rather what I will end up doing when it comes to some logic for stetting the color channel data for each vertex of interest.
The main reason why I bring this up is because wireframe mode is often used as a way to get a good idea os what is going on with the state of a geometry. However often I have found that I can not just simply use wireframe mode alone as a way to debug what is going on. Vertex colors are then another way to go about styling the lines of the wireframe, and with the right logic can also help to do things like add depth to the lines, or highlight a given area of the geometry and so forth.
Another option is to convert a geometry to an instance of THREE.EdgesGeomerty and then use that to create an instance of THREE.LineSegments with a Line Material such as THREE.LineBasicMaterial. This will result in a look that differs from what the usual is when just setting a material into wire frame mode that I tend to like better. The result of this is lines draw in a way in which it is just the sides of a cube and not all the triangles that make up the cube.
However there are still some drawbacks with this when it comes to how things look and that is not being able to set the line width to something other than 1.
In this section I will be going over some helper methods that create cubes that make use of materials that are in wireframe mode, or create a wireframe like effect using textures and various material properties.
Here I have a basic create wire cube helper method. This helper returns a new mesh that uses a simple box geometry and a basic material that is in wire frame mode. To set a basic material in write frame mode I just need to set the wire frame property to true when passing an options object to the Mesh Basic Material constructor.
Here I have a create canvas texture helper method that will return a texture using a canvas element by creating the canvas element, drawing to the 2d drawing context, and then used the THREE.Texture constructor to create and return a texture. When doing so all I need to do is pass the canvas element to the THREE.Texture constructor it as the first argument, save the resulting texture to a variable, and be sure to set the needs update boolean to true.
This subject of canvas textures in three.js course deserves a whole post on its own, and I have done so if you would like to read up more on this sort of thing. For now this will work just fine for what I have in mind here, I just need an additional helper method that will create and return a mesh using this method.
Now I can make a more advanced canvas powered helper that creates a cube that uses a material with a texture for the map property that results in a wire frame like effect. The process involves more than just simply creating a texture where I am drawing lines at the corners of the texture. I need to make sure the texture is transparent, and I also want to draw the texture on both sides of a face.
So now to test out what I put together for this section. I start out by creating a scene, camera, and renderer like always. However I now just call my create basic write cube, and create canvas wire cube helpers to created cubes that make use of the wire frame solutions. I then add them to the scene with the add method of the scene instance.
This results in two cubes that both have a write frame like look.
When using a materials like that of the standard material for a mesh, setting the material into wire frame mode will not change the situation when it comes to lighting. If I set the emissive color of the material to that of the background color, and I do not currently have a light source then the material will not show up. So when working with a materials that will respond to light sources I am still going to want to make sure that there is one or more light sources, and I am still going to want to set the color and emissve color properties of the material to appropriate values so that things show up.
When working with light I have found that it is often a good idea to have more than one light source. Typically I will add an ambient light source, and then a light source like of the point light that I used in this example.
5 - Using the override material scene object property to set all mesh objects into a wire frame mode
I think I should take a moment to write about the material override property of the scene object at this point that can be used to set a materials that will be applied to all mesh objects. This scene object property can be used to set all mesh object to a single material that is set in wire frame mode, and then everything can be set back again by just stetting the value of the property back to the default value of null.