How to export SketchUp models to three.js?

Question

I have created a model by google SketchUp, and I want to export it to three.js to save some time.Because I think to use SketchUp is easier than three.js.Then can someone tell me how to do this?Thank you very much!

Answer 1

You can export collada (.DAE) from SketcUp. Then use the Three.js ColladaLoader. I think the free version of SketchUp might not allow collada export, but in any case you can export to Google Earth (.KMZ), rename it to .ZIP, open it in any archive program, you should find a .DAE there.

It's not bulletproof but mostly works. Some tips:

• In export settings leave Triangulate faces on. Double-sided faces is usually best, but sometimes you may want to leave that off.

• You might need to resize texture files afterwards to non-power-of two dimensions (eg. 256x512)

• Exploding/ungrouping ALL your components and groups is advised to avoid ColladaLoader problems. Select all (Ctrl+A), explode from context menu. Repeat until there is nothing to explode. Or use a plugin for that, like http://www.smustard.com/script/Bomb SketchUp itself does have trouble exploding very complex models, and may appear to freeze. This is very unfortunate, and there is not much you can do, except remove the more complex parts from your model. Or wait, it can take anything between 1 second and days.

• On Three.js side you MAY want to traverse the imported object, and set materials to DoubleSide.

• SketchUp uses inch units when exporting (even when UI or project is set to metric scale), so you might want to scale the imported model accordingly. Three.js does not have such predefined scale, but for example if you consider 1.0 Three.js unit to be 1.0 meters, you need to set obj.scale.x = obj.scale.y = obj.scale.z = 0.02539999969303608;

Answer 2

in threejs if you want to place the object loaded from a file collada at a certain point, you have to convert the offset in units right, for example:

I want to place the object in (600, 1800, 0) mm, and the file is exported in inches

var dae; 
dae = collada.scene; 
... 
... 

var x = 600; 
var y = 1800; 
var z = 0; 

convertedX var = x * 0.0393700787 * dae.scale.x; 
convertedY var = y * 0.0393700787 * dae.scale.y; 
convertedZ var = z * 0.0393700787 * dae.scale.z; 

dae.position.set (convertedX, convertedY, convertedZ);