importing google sketchup objects into threejs -- textures not being rendered

Question

I'm creating a disc golf game for the browser. A friend of mine is assisting me by creating objects in Trimble Sketchup, so that I can import them into the game. He has exported a .dae file and the textures, and I have imported them using the ColladaLoader.js. The textures and object load, and the object is rendered, but the object is black, and, sometimes, the javascript console says some textures cannot be rendered.

Here is some code :

   var loader = new THREE.ColladaLoader();
   var dae;
   loader.options.convertUpAxis = true;

   loader.load( '/discgolf/static/models/BelmontDreamCourse.dae', function ( collada ) {

       dae = collada.scene;

       dae.scale.x = dae.scale.y = dae.scale.z = 2.0;

       dae.position.set( 5, 5, 5 ); 

       scene.add( dae );
   } );

What else do I need to do? I will be happy to provide more information.

Answer 1

Without more information it's quite a quesswork, but I'd check three things first:

• Make sure the texture path is correct (check Firebug Net panel or such for which path it's trying to load the textures). You might need to search & replace the texture path in the DAE, if I remember correctly SU can sometimes put absolute paths there.

• Do you have lights in the scene? If I remember correctly, ColladaLoader converts the SU DAE materials to MeshPhongMaterial, which does need some lights to show up unlike MeshBasicMaterial.

• Do you have an animation loop, so that the thing is constantly rendered? If not so, make sure that you re-render the scene not only after the model is loaded, but after the textures are loaded too (they are lazy loaded after the model).

• Make sure to resize the texture files to power-of-two dimensions (256x512, 256x256,1024x1024 and so on). WebGL does not like arbitrarily sized textures.