V for Vertex

Recently we were working on a new project with a prominent 3D element and played around with a few different interactions. Although this one didn't make the cut, we thought it was an interesting enough interaction that you don't see much in the world of 3D on the web. What better way to show case than in a lab!

As you can see in the demo above, your mouse cursor will cause the 3D object to grow and distort from its original position. The technical term for this is vertex displacement. 3D models are composed of small points connected together called vertices. Moving these groups of points in response to the mouse allow us to change and distort the object and create a fun, dynamic interaction.

However, figuring out how close or far away our mouse is to an individual vertex's position requires... math. We must translate our mouse's position on the computer screen into positions in the virtual 3D space. This is complicated. Or we could do the reverse- translate the 3D space onto our screen. Luckily, the 3D web pipeline does the latter for us, so we can simply intercept the point position in this pipeline and operate from there.

Next, we can tweak the strength of our effect, and how it becomes less powerful as our mouse moves farther and farther away from the object, and more powerful as it moves closer. Here, we are morphing the shape, but the use cases for an interaction like this are endless: we can distort the object, have the mouse "paint" it with a color, make it transparent... the list goes on!