Three-JS Mesh visible on opposite side of model

问题:

So I'm using a custom model made in blender for ThreeJS. I exported it to a .obj file and used the Three-js conversion utility to make a json file. I have it set to rotate, and as it rotates, you can see the other side of the model. This is the code I'm using to load it:

  loader.load("pegnin.js", function(geometry, materials){
    material = new THREE.MeshPhongMaterial( {
      color: 0xff0000,
      polygonOffset: true,
      polygonOffsetFactor: 1, // positive value pushes polygon further away
      polygonOffsetUnits: 1
    });
    material.depthTest = true;
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
  });

Live Demo

回答1:

three.js assumes that front-faces have counter-clockwise winding order. Stated another way, the front-face in three.js is determined by the winding order of the face -- not the face normal.

It is likely that front-faces in your model have clockwise winding order.

A work-around that does not require you to change your model is to set:

mesh.material.side = THREE.DoubleSide;

three.js r.85