Skip to main content

“The joining or merging of elements to form one mass or whole.” – A study of generative movement, options, and user interface, using Three.js.

Marking the next chapter in my ongoing study of Three.js, ‘Coalescence’ includes a few key elements that I have been wanting to learn how to do, and experiment with, for a while now.

Firstly, I wanted to try implementing a basic light / dark mode functionality. Mostly, just to see what this looked and felt like for potential use in future projects, not just for light and dark mode but also for general colour options etc. In this case because I wanted to achieve a smooth transition between a gradient based background this wasn’t straightforward. I also ended up learning how to transition the colour and opacity of materials and shadows.

I also wanted to try including at least some basic options that could be easily accessible via the user interface. In all cases I have used localStorage to retain and reapply these types of options. If you’re interested in this you can see it in action by closing and reopening the browser window. You can also try opening it up in multiple windows and the options at least, should update in each.

And lastly, something that I have really wanted to do for a while now is figure out how to create animation sequences that loop and cycle between different, randomly generated values. – I’m attracted to the way this creates sequences and combinations that feel less linear and more organic. Lately I’ve been working on some projects that are very much running with this basic foundation which I’m really looking forward to sharing shortly.

Filed under:
Featured, 3D, Animation, Digital Art, Three.js

Similar :

Artefact 007

Artefact 007

Generative interactive 3D artwork created using Three.js.

The Partition

The Partition

A study of movement, materials, and lighting using Three.js.

Lustrous

Lustrous

3D digital artwork / animation created with three.js.

All Projects

About Me

Hi, I'm Henry Egloff - a multimedia artist, designer, and coder, based in Byron Bay Australia. I create digital art, design and code apps, write articles, and develop tutorials.

I specialise in designing and building dynamic and interactive media with languages like HTML, CSS, PHP, and Javascript, and using tools like Three.js, Blender, Adobe, and Unity.

I love working creatively and helping people learn.

I'm currently available for freelance / contract projects and online tuition roles. Learn more about me or say hello at contact@henryegloff.com.

Henry Egloff
Twitter Twitter 2 Facebook Linked In Instagram Codepen Behance Youtube Opensea Heart Dark Mode Light Mode