Three.js自定义objLoader几何照明

Question

我有这个对象我正在加载THREE.objLoader,然后像这样创建一个网格:

mesh = new THREE.SceneUtils.createMultiMaterialObject(
  geometry,
  [
    new THREE.MeshBasicMaterial({color: 0xFEC1EA}),
    new THREE.MeshBasicMaterial({
      color: 0x999999,
      wireframe: true,
      transparent: true,
      opacity: 0.85
    })
  ]
);

在我的场景中,我然后添加一个DirectionalLight,它可以工作,我可以看到我的对象,但它就像DirectionalLight是一个环境光.没有脸变得更暗或更浅.

对象用颜色填充,但不对其应用光照.如果有人可以帮助我,那将非常感激:)

我能错过什么？

Jsfiddle在这里:http://jsfiddle.net/5hcDs/

Answer 1

演示: 简单的立方体,OBJ文件中包含的法线,无需计算任何东西

演示2:更复杂的形状,OBJ中没有包含法线,需要计算它们并翻转它们

在那些演示中,我添加了箭头来帮助实现法线

好的伙计们,多亏了NilsaonMaël和doob先生,我能够理解我所缺少的一些东西,就像我所说的总3d菜鸟...我相信人们开始进入3D可能会发现一些有用的回顾:

基本的3d概念

• 3d 面由一些点(顶点)和一个称为法线的矢量组成,表示面的方向(哪一侧是前方,哪一侧是后侧).

• 没有法线可能非常糟糕,因为默认情况下仅在前侧应用光照.因此,当尝试应用LambertMaterial或PhongMaterial时,黑色模型.

• OBJ文件是一种描述3D信息的方法.想要了解更多信息吗？阅读此维基百科文章(en).此外,法语页面提供了一个可用于测试的多维数据集示例.

Three.js提示和技巧

• 当不存在法线时,无法应用光照,因此渲染黑色模型.Three.js实际上可以使用geometry.computeVertexNormals()和/或geometry.computeFaceNormals()来计算顶点和面法线,具体取决于缺少的内容

• 当你这样做时,有可能Three.js的正常计算是错误的,你的法线将被翻转,为了解决这个问题,你可以简单地循环遍历几何体的面数组,如下所示:

  /* Compute normals */
  geometry.computeFaceNormals();
  geometry.computeVertexNormals();
  
  /* Next 3 lines seems not to be mandatory */
  mesh.geometry.dynamic = true
  mesh.geometry.__dirtyVertices = true;
  mesh.geometry.__dirtyNormals = true;
  
  mesh.flipSided = true;
  mesh.doubleSided = true;
  
  /* Flip normals*/               
  for(var i = 0; i<mesh.geometry.faces.length; i++) {
    mesh.geometry.faces[i].normal.x = -1*mesh.geometry.faces[i].normal.x;
    mesh.geometry.faces[i].normal.y = -1*mesh.geometry.faces[i].normal.y;
    mesh.geometry.faces[i].normal.z = -1*mesh.geometry.faces[i].normal.z;
  }