The collada model looks strange (three.js)

Question

The collada model looks strange in three.js. A screenshot:

police

The code is very simple, nothing special:

loader.load( 'models/police_car.dae', function ( collada ) {
  dae = collada.scene;

  init();
});

I downloaded the model from google sketchup warehouse. [link]

I have no idea what is the problem, because I'm new in three.js. Should I call a function to fix it?

Thanks in advance,

jterrace jterrace · Accepted Answer · 2012-07-18T15:44:58

I think this is happening because the back faces are not being rendered. COLLADA has no way to specify whether a face should be double sided or not. Google Earth uses this method to export this information:

<extra>
  <technique profile="GOOGLEEARTH">
    <double_sided>1</double_sided>
  </technique>
</extra>

Three.js uses an attribute on an object called doubleSided to indicate if the face is double sided, but the ColladaLoader.js does not look for the <extra> tag to set the property. You should file a bug with three.js to add support for it.

EDIT: This appears to be fixed on the dev branch. Here's what I get loading this model:

enter image description here

You can clearly see the dashboard of the car inside through the partially-transparent window.

The collada model looks strange (three.js)

1 Answers