Collada Model Faces Not Displaying Correctly In Three.js

After importing a collada model into three.js, some of the model's faces are only visible from the inside of the model and not from the outside. How can I fix the problem with the

Solution 1:

The reason it doesn't work properly is because your file has this double_sided flag set:

<effectid="material_3_4_0-effect"name="material_3_4_0-effect"><profile_COMMON>
      ...
      <extra><techniqueprofile="GOOGLEEARTH"><double_sided>1</double_sided></technique></extra></profile_COMMON></effect>

The three.js ColladaLoader doesn't look for this flag and set doubleSided on the material like it should. I've filed a bug for the issue.

Solution 2:

To fix the faces being oriented incorrectly, load the model into a 3D modeling program like Blender and flip the normals of the faces that aren't displaying correctly.

Three.js meshes have a doublesided property you can set which will usually allow you to display the model with the faces visible from both sides.

Here's a short example of how to load a collada mesh and enable double-sided rendering.

var loader = new THREE.ColladaLoader();
loader.load('path/to/mesh.dae', loadModel);

function loadModel(geom) {
    var mesh = new THREE.Mesh(geom, new THREE.MeshBasicMaterial());
    mesh.doublesided = true;
    scene.add(mesh);
}

And a live example: http://jsfiddle.net/r7Yq2/