2015-06-28 146 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