CODEWITHSUNDEEP
javascriptthree.jscollada
user1565123
user1565123

Reputation: 89

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 faces in question?

Is it possible to have the model's faces visible from both sides?

Upvotes: 4

Views: 2319

Answers (2)

jterrace
jterrace

Reputation: 67073

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

<effect id="material_3_4_0-effect" name="material_3_4_0-effect">
   <profile_COMMON>
      ...
      <extra>
         <technique profile="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.

Upvotes: 2

Nimphious
Nimphious

Reputation: 5039

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/

Upvotes: 1

Related Questions