Blender导出到OBJ并加载Three.js，网格法线和面错

Question

我将我的blender模型导出到OBJ并将其加载到Three.js。

• 对于车轮，法线似乎朝向内侧。
• 对于轨道，仅显示网格，但似乎没有正确映射。

我在搅拌机中重新导入OBJ，它似乎正确显示，所以它似乎是Three.js中的一个问题。

Image in blender showing the normals of the wheels are correct, and the track appears correctly.

Codepen of the Three.js code, and OBJ model is here

var material = new THREE.MeshLambertMaterial({ color: 0xcc8729 });

//Loader for the model
var loader = new THREE.OBJLoader();
var geometry = loader.parse(getObjFileAsString());
geometry.position.set(0, 0, 0);
geometry.castShadow = true;
geometry.receiveShadow = true;
geometry.traverse(child => {
  if (child instanceof THREE.Mesh) {
    child.material = material;
  }
});
scene.add(geometry);

我是否需要改造车轮和轨道？或者有没有办法在Three.js中修复它？

Answer 1

问题是为什么导出obj翻转面部正常？

我唯一的猜测是你的物体上有一个负刻度。因此，您必须应用缩放和旋转shift-a快捷方式。然后你应该仔细检查你的法线是否仍然面向外。请参阅我的回答here。

<\ n>在Three.js中，您还可以通过使用material.side值来解决翻转法线 有双面，背面和正面。 source

node.material.side = THREE.DoubleSide;