Create an interactive liquid metal ball with WebGL

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.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

TOPICS

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq. 

Latest in 3D Software
An image of someone using Da Vinci Eye Apple Vision Pro app
This Apple Vision Pro art app revolutionises learning to draw
Reallusion Live capture screenshot
How to make the most of AccuFace Facial Mocap
ZBrush, everything you need to know; digital sculpting and painting of elephant in ZBrush and Photoshop by Rob Brunette
ZBrush: everything you need to know
RailClone 6 review; a designer home next to a river
RailClone 6 review: makes CG scenes easy
Cinema 4D, everything you need to know; a render created with Cinema 4D by Forrest White
Cinema 4D: everything you need to know
3ds Max 2024 review; a render of a house and trees in a 3d app
3ds Max 2024 review: a surprisingly fresh annual release
Latest in How to
Venusaur art
How to paint Pokémon's Venusaur in Photoshop
Gesture drawing: all you need to know plus ways to practise in 2 and 5 minutes
How to draw a male figure
drawing of a naked woman with someone drawing it
How to draw a female figure
GIMP in pro work
Making GIMP 3.0 work for pro results: is it possible?
Pejman Rajabi 3D tutorial of Super Mario fan art
“One of the best creative experiences of my life, working with such an amazing artistic crew” – how VFX artist Pejman Rajabi and friends created a heartfelt tribute to Super Mario