Blender to three.js with COLLADA files

Given this phrase in the Wikipedia definition of COLLADA files – “… for exchanging digital assets among various graphics software applications …” – it should come as no surprise that I found the COLLADA format the most effective for exchanging digital assets between Blender and three.js

One running gag on this blog is my repeated attempts at getting the content in my old VRML files on the open web and rendering in a browser again – and this time, without the use of plugins.

I’ve tried importing old VRML directly into three.js – with somewhat less than satisfactory results. I’ve discovered that those old file load nicely into Blender – and I’ve tried any number of way of exporting them from Blender again, with the hopes of loading those formats into three.js.

collada-bannerFor me, the winner by far, was COLLADA files.

Here’s a fairly simple VRML file, created with 3DSmax and a text editor (emacs) in 1998. It has been imported into Blender – exported as a COLLADA file – and then loaded into three.js to be displayed here:

You can drag your mouse on that to move it around – each button gives you a different motion when you drag.

It ain’t much of a VRML world – but it is neat to see it in a browser again. (Her name is “Cookie”, by the way.)

COLLADA sounds like a very corporate, proprietary format – but it is anything but.

From Wikipedia:

“COLLADA (COLLAborative Design Activity) is an interchange file format for interactive 3D applications. It is managed by the nonprofit technology consortium, the Khronos Group, and has been adopted by ISO as a publicly available specification, ISO/PAS 17506.[1]

COLLADA defines an open standard XML schema for exchanging digital assets among various graphics software applications that might otherwise store their assets in incompatible file formats. COLLADA documents that describe digital assets are XML files, usually identified with a .dae (digital asset exchange) filename extension.”

 


 

Of all the things I tried, the COLLADA files managed to get the most “stuff” from the original VRML file through to the JavaScript for rendering. Colours – lights – shading – all of the meshes on the stage – compared to all the other formats I tried to export from Blender, and then import into three.js – COLLADA files worked the best.



And given this line in the definition – “for exchanging digital assets among various graphics software applications” – it should come as no surprise that I found it most effective for exchanging digital assets between Blender and three.js

Of course, there’s more than one way to skin a cat.

I couldn’t get the VRML to open in three.js. But I could get it to open in Blender. So I used Blender to turn it into something that I could open in three.js. And after trying many options, there it is. The content from an old VRML file, in your browser, no plugins.

But like I say – there’s more than one way to skin a cat.

Once I have the old file open in Blender – maybe there’s ways I can get it to render in your browser, that don’t involve three.js?

And that will be the topic of my next post.

 

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 @ 3dspace.com

3 thoughts on “Blender to three.js with COLLADA files”

Leave a Reply

Your email address will not be published.