Colored gradient wireframe model in Three.js

While Wireframe Geometry is supercool helper tool to see your mesh, let’s take a little bit different approach to achieve some fun results.

TL;DR

MeshStandardMaterial has a property wireframe, which let’s you display the edges instead of solid coverage of the object. It still preserves the material properties like colors, reflectivity, etc…

Let’s look at example

Sample sphere code

Sample sphere

Above you can see a basic Three.js code snippet creating an orange sphere on canvas. Nothing fancy. The sphere is made from a basic material which does not respond to light, therefore we can see the model as is.

Sphere wireframe

Setting the material property wireframe to true set the mesh construction visible on the model. I decreased a little bit number of divisions of the sphere so you can see the difference.

Lighting the wireframe

Don’t you love gradients? I know I do.

Let’s tweak this model up a little bit. To create gradient transitions of colors on the wireframe model we need to play with the lightning.

In line 7 we need to change the material type to standard material, as it has be be affected by lightning.

In line 14 we create a hemisphere light around our scene. Hemisphere light takes two color properties: sky color and ground color. If you set one to darker shade than wireframe color and other to lighter, you will get a nice gradient light on the model like so:

Gradient wireframe

More depth

Apart from general sky color affecting the model let’s set a directional light to create more depth on the wireframe.

var frontLight = new THREE.DirectionalLight(0xffffff, 1);

More depth on the wireframe

The effect is subtle in this colors, but let’s add a contrasting background and some movement to it:

In line 6 we add some color to the renderer.

In line 25 we declare an animating function. Let’s rotate the sphere:

Moving wireframe

Wrapping up

There you go. There is no need to play with setting wireframe model lines to different colors if you can just approach the model as a whole.

Now you have another tool to create awesome stuff with.

Coming up next

Moving terrain from The Coding Train in Three.js:

Moving terrain in gradient light

Stay tuned! And feel free to ask any questions :)