three.js照明似乎不工作，因爲我期待

我有這個小提琴http://jsfiddle.net/9XCWc/1/這是從PHP生成的地形的HTML/JS。three.js照明似乎不工作，因爲我期待

問題是，它不會像我期望的那樣渲染陰影等。

這是我的照明設置。

var ambientLight = new THREE.AmbientLight(0xffffff); 
    scene.add(ambientLight); 

    // directional lighting 
    var directionalLight = new THREE.DirectionalLight(0xffffff); 
    directionalLight.position.set(400, 200, 3000).normalize(); 
    scene.add(directionalLight);

來源

2013-11-25 Matt Bridges

你試圖得到什麼樣的效果？

您正在使用MeshBasicMaterial。該文件說明了這一點：

MeshBasicMaterial 
A material for drawing geometries in a simple shaded (flat or wireframe) way.

您應該檢查this example。它顯示了您可以獲得的不同材料以及它們的外觀。

例如this fiddle比較MeshBasicMaterial和MeshLambertMaterial。

希望這有助於

UPDATE

您正在創建每個頂點網格頂點，但你永遠不創建法線。然而，如果想這樣的陰影效應，一個MeshLambertMaterial需要計算法線來計算光變化：

反射通過取表面的正常矢量，N的點積計算，並且歸一化的光 - 方向矢量L，從表面指向光源（wikipedia））。

有一個geometry.computeFaceNormals();函數來幫助你。您可以看看this fiddle。

另外，你應該檢查JS array objects +使用一些for loop。

希望這有助於

來源

2013-11-26 10:35:18 ThisIsSparta

我期待對相機面向看起來更亮的部分和背對部分出現較深 - 出現像一個實際的terrain.I've更新了小提琴的材料轉爲蘭伯特但它看起來像一個沒有定義的白色區域。 –

已經更新的答案。 – ThisIsSparta

謝謝 - 考慮照明和麪部法線似乎工作。由於從php動態生成，jsfiddle不是用簡潔的js編寫的。 –

three.js照明似乎不工作，因爲我期待

回答

相關問題