2015-06-28 194 views
0

只要我将自己的顶点推到几何体上,几何图形就是纯色,而不是具有彩色阴影。对着色自定义几何体的平面着色


应用此代码到一个叫meshTHREE.PlaneGeometry给出了以下阴影:

var light = new THREE.DirectionalLight(0xffffff, 1); 
light.castShadow = true; 
light.shadowDarkness = 0.5; 
// .. 
THREE.MeshLambertMaterial({ color: 0x66e6b0, shading: THREE.FlatShading }); 
// ... 
mesh.receiveShadow = true; 
mesh.castShadow = true; 

然而,当我申请相同的代码到THREE.Geometry()定制的点和面 ,几何图形是纯黑的。我怎样才能给自定义的几何体和平面几何体一样的阴影?

  • 我可以使用THREE.MeshBasicMaterial,但是在面上不再有阴影。
  • 使用vertexColors: THREE.FaceColors并着色每个脸仍然是全黑的。
  • A THREE.AmbientLight给出颜色,但在脸上没有阴影。

这里是一个fiddle随机产生的面孔都是相同的颜色。相反,我希望它们具有不同的阴影,因为它们是不同的角度(如上图所示)。

+0

你能提供一个jsfiddle吗? – gaitat

+0

@gaitat jsfiddle新增 – interpolack

回答

0

出现全黑时会发生任何初始附加到几何形状的顶点坐标的几何形状的这个问题有一个未定义的值

即使如果显示的几何形状,动画,没有错误抛出,如果THREE.Vector3的初始坐标是不确定的,THREE.MeshLambertMaterial阴影将无法正常工作。

fiddle中演示了此问题,其中使用undefined_variable可防止彩色阴影,并且只产生纯色。

要处理此问题,请将所有顶点初始化为任意值,即new THREE.Vector3(0, 0, 0),然后使用animate()中的变量值。

1

这不是会产生这样的效果,而是一个z坐标的阴影。在你的jsfiddle中,所有的三角形都在xy平面上,所以它们都具有相同的法线。所以他们的照明将是一样的。所以,如果你作出这样的呼吁:

geometry.vertices.push(new THREE.Vector3(Math.random() * 100, Math.random() * 100, Math.random() * 100)); 

,也light.castShadow = false;,因为它无助于任何东西,那么你会得到你想要的变化。

+0

好点!这固定了小提琴,但问题仍然存在于我的代码中(我的错)。事实证明,几何图形全是黑色的,因为传递给附加Vector3的变量未定义。 – interpolack