So you want to create an interactive WebGL liquid metal ball? Glad you asked, programming wizard Paul Lewis has got just the thing!

Making websites is tons of fun, but sometimes you need to break free and do something a bit unusual. That’s what we’ll be doing today. We’ll be using the excellent Three.js engine to create an interactive metallic ball. As you click and drag the ball distorts and then slowly settles back to its original shape.

To do this we’ll be covering spring physics, 3D vectors and ray casting (and a few other things besides) all in an effort to create a compelling and fun interactive experience. Let’s start by looking at what we’re going to make.

The thing about experiments like these is that on the surface they don’t look to have direct commercial applications. You’d be forgiven for thinking the same about this one as well, and perhaps you’re right. But my philosophy is that as a developer you learn techniques and solutions to problems in these experiments that can help you in your day-to-day work. There have been many times where this has proved true for me, and I’m certain it’ll work out for you as well. In any case this is going to be tons of fun, so let’s get started on creating our scene.

LEARN THE CODE:

via Create an interactive liquid metal ball with WebGL | Tutorial | .net magazine.