Through the Interface: Embedding a 123D Catch scene in an HTML page

May 2015

Sun Mon Tue Wed Thu Fri Sat
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30


« Dunroamin | Main | Updated set of Leap Motion samples available »

June 12, 2013

Embedding a 123D Catch scene in an HTML page

A little over a year ago I first saw the HTML version of 123D Catch. My first thought was “that’s cool!” and my second was “I wonder whether you can embed the WebGL control to host a 123D Catch scene in an external web-page?”. Basically allowing bloggers – or people posting to forums, perhaps – to embed 3D content captured using 123D Catch in their pages, much as you would do with a YouTube video.

At the recent technical conference in Boston, I asked someone about the feature. Sure enough it had been added some time ago (probably around the time I was thinking about it, originally) and I was provided with instructions on how to make use of it.

Firstly – and logically enough – you need to publish a scene to the 123D Catch gallery. I went ahead and created a really quick scene (I’m working on something more complex, but it’s taking longer than I’d hoped to get right, so it’ll be for another day) and published it to the gallery:

Publishing to the gallery

On balance my choice of a ZX Spectrum – which has semi-reflective patches of plastic and lots of uniform area – probably wasn’t the best, but this is really about the process of embedding, not about capturing a model.

Once up there, it was pretty straightforward to log into the 123D Catch website and find it in my list of recent work.

The scene in the 123D Gallery

Clicking on the embed icon to the right brought up the options to customize the HTML fragment and copy it into your page:

The embed code

And here is the end result (although of a slightly cleaner model than the one shown above), which needs a WebGL-capable browser (Chrome, Firefox or Safari) for the 3D mode to work. You'll also need to remember to click on "3D view" in the filmstrip at the bottom to bring up that view.

blog comments powered by Disqus


10 Random Posts