Three.js 自定义 objLoader 几何光照 [英] Three.js custom objLoader geometry lighting

问题描述

我用 THREE.objLoader 加载了这个对象，然后用它创建一个网格，如下所示:

I have this object I'm loading with THREE.objLoader and then create a mesh with it like so:

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 是一个环境光.没有一张脸像它应该的那样变黑或变亮.

In my scene I then add a DirectionalLight, it works and I can see my object, however it's like the DirectionalLight was an ambient one. No face is getting darker or lighter as it should be.

对象填充了颜色，但没有对其应用照明.如果有人可以帮助我，我将不胜感激:)

The object is filled with the color, but no lighting is applied to it. If someone can help me with that it would be much appreciated :)

我会错过什么?

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

Jsfiddle here: http://jsfiddle.net/5hcDs/

推荐答案

好的，感谢 Maël Nison 和 Mr doob，我能够理解我遗漏的一些东西，我是一个完全的 3d 菜鸟......我相信开始进入 3d 的人们可能会发现一些有用的回顾:

Ok folks, thanks to Maël Nison and mr doob I was able to understand the few things I was missing, being the total 3d noob that I am... I believe people starting to get into the 3d may find useful a little recap:

• 一个 3d Face 由一些点(顶点)和一个称为法线的向量组成，表示方向脸(哪一边是正面，哪一边是背面).

• A 3d Face is made of some points (Vertex), and a vector called a normal, indicating the direction of the face (which side is the front and which one is the backside).

没有法线可能真的很糟糕，因为默认情况下仅在正面应用照明.因此，尝试应用 LambertMaterial 或 PhongMaterial 时会出现黑色模型.

Not having normals can be really bad, because lighting is applied on the frontside only by default. Hence the black model when trying to apply a LambertMaterial or PhongMaterial.

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

An OBJ file is a way to describe 3D information. Want more info on this? Read this wikipedia article (en). Also, the french page provides a cube example which can be useful for testing.

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

• When normals are not present, the lighting can't be applied, hence the black model render. Three.js can actually compute vertex and face normals with geometry.computeVertexNormals() and/or geometry.computeFaceNormals() depending on what's missing

这样做时，Three.js 的法线计算可能会出错并且法线会翻转，要解决此问题，您可以简单地循环遍历几何体的面数组，如下所示:

When you do so, there's a chance Three.js' normal calculation will be wrong and your normals will be flipped, to fix this you can simply loop through your geometry's faces array like so:

/* 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;
}

这篇关于Three.js 自定义 objLoader 几何光照的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！