4

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?

Nimphious
  • 4,889
  • 1
  • 17
  • 17
user1565123
  • 89
  • 1
  • 5
  • Can you put your code on jsfiddle instead of a rar? – jterrace Aug 02 '12 at 02:08
  • @jterrace http://jsfiddle.net/cvj157/AdLc9/8/ This is my source.But it can't run for I don't know how to add resource to jsfiddle.The original model image can be seen from http://images.cnblogs.com/cnblogs_com/e-life/401048/r_original.JPG and the collada showing image is http://images.cnblogs.com/cnblogs_com/e-life/401048/r_showing.JPG – user1565123 Aug 02 '12 at 03:35
  • This looks more like a normals problem. Did you check to ensure that the normals on the faces of that cylinder are not flipped? – Nimphious Aug 02 '12 at 16:05
  • @Nimphious Not sure! Sorry for not knowing what you meant. The model was downloaded from http://sketchup.google.com/3dwarehouse/details?mid=fc02c9ad26a5cea7afb63e633b6a86a5 – user1565123 Aug 02 '12 at 17:00
  • Can you see the missing part if you place the camera inside the model looking outward? Every polygon in a mesh has what's called a normal, which is a vector describing the direction the polygon is facing. If this is flipped around the wrong way you won't be able to see the polygon, but you will be able to see it from the inside. – Nimphious Aug 02 '12 at 17:17
  • If this is the case, you will need to open up the model in a 3D modeling program such as Blender and flip the polygon normals to face the correct direction. – Nimphious Aug 02 '12 at 17:18
  • @Nimphious Year，It can be seen from inside.Thanks! Maybe it's what you said. But if I export model texture using color material instead of texture image, it shows all right. – user1565123 Aug 02 '12 at 17:35
  • ColorMaterial must be two-sided. You're going to need to flip the normals in a 3D modeling program like I suggested. – Nimphious Aug 03 '12 at 05:06
  • @Nimphious When I flipped it around, it turned out just the opposite that it could be seen from outside while not from inside.I found that When I added colors to the both sides closed to the cylinder,it seemed all right. The screenshot can be seen from http://images.cnblogs.com/cnblogs_com/e-life/401048/r_colored.JPG – user1565123 Aug 03 '12 at 09:05
  • ...you want to also be able to see the exterior from inside? – Nimphious Aug 03 '12 at 11:57
  • @Nimphious Yeah,I did.By the way,Do you know how to detect collada models using ray.intersect in Three.js? I searched on the Internet,but it seems that there's no effective methods to detect collada model in Three.js except adding external geometry. – user1565123 Aug 03 '12 at 15:08
  • You should ask that as a seperate question, especially since I have no idea. Also, materials have a two-sided setting, you should look that up and use it if you want to be able to see both sides of a mesh, however I'd suggest modelling interiors for buildings, since seeing the exterior on the inside looks far more odd than seeing nothing. – Nimphious Aug 03 '12 at 16:32

2 Answers2

2

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.

jterrace
  • 64,866
  • 22
  • 157
  • 202
1

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/

Nimphious
  • 4,889
  • 1
  • 17
  • 17
  • 2
    apparently it has changed in r50: it should now be set on the material: material.side = THREE.DoubleSide; (it took me a while to find out !) – Damien Aug 23 '12 at 12:11