Virtual Silver Maple Keys

I’ve always loved it when maple keys come showering down from the trees.

So this is what I chose for my first “cross-technology” bit of eye candy. I made a model of a key in Blender. I exported it as a .JSON file, and imported it into three.js. Once there, I created hundreds of it, and wrote some hackey code to make them drift lazily down from the trees right where the camera is pointed. And then I added a 360 degree background image.

As I started to get this working, I realized – this is certainly the closest I’ve come to creating anything that could be called “virtual reality” on the open web. Sure it’s crude, and doesn’t look real at all – but it does re-create an actual real-world phenomenon, interactive and rendered in your browser without a plugin. Nice.

So, what’s this about navigable? This has “orbit controls” on it – you can rotate the scene by dragging with your mouse – or zoom in and out with your middle button. Looking up – to see them showering straight down on you – is pretty sweet.

And because this uses the little hack from my post about using 360 degree background images – you can back right out of the background, and look back in at the inside-out sphere that the photo is mapped on to. Kinda fun, really. But obviously not compatible with a robust, navigable virtual world…

But still, this is a relevant technology demo – and a good learning experience – I’ve modeled a thing using open-source software (Blender), and I’ve manipulated it programmatically to my heart’s content – and the whole thing can be experienced in any web-enabled device, and rendered in real time, without a plugin.

That’s what I set out to do – and I think it looks pretty cool, to boot.



I came back to look at this a little later in the evening – and I couldn’t help but be reminded of this cartoon:

Cartoon why I draw

Once I got the idea for this “shower of virtual silver maple keys” thing in my head, I was a bit like the dude in the left panel of the cartoon. I’d fiddle a few minutes here with a Blender model, and a few minutes there with some three.js, when I got a moment away from work, the family, and ranting about the death of plugins – over the course of 9 days – the dude in the middle panel. And having just set this thing free on the open web – I do feel uncannily like the dude in the right panel there…

Tweet about this on TwitterShare on Google+Share on LinkedInShare on FacebookEmail this to someone

Author: Pete

Editor-in-Chief, Lead Software Developer and Artistic Director @

2 thoughts on “Virtual Silver Maple Keys”

Leave a Reply

Your email address will not be published.