2013-11-09 80 views
0

我知道,使用webgl渲染器我可以在材質上使用vertexColors來創建線性漸變。根據文檔,這不適用於畫布渲染器。我怎樣才能回到畫布渲染器上,仍然有漸變?我希望它受環境照明的影響,所以我不能依賴於圖像紋理。three.js漸變與畫布渲染器

+1

你的意思是你寫的東西 - 只有環境?如果是這樣,您可以使用'Mesh.BasicMaterial',用紋理表示漸變,並在環境光線變暗時使紋理變暗。 – WestLangley

+0

爲了說明問題,我爲場景改變亮度提供了一個環境光線。使用webgl渲染器時,圖像紋理會受到該亮度的影響。當它回落在cavas渲染器上時,它們不是。我認爲這是某種畫布渲染器的限制。 除了環境光以外,我如何在飛行中使其變暗?當你說紋理我假設一個圖像 - 我是Three.Js 新來的基本上我想要一個線性漸變的材質,可以受到兩個渲染器的光照影響。 – g3k0

+0

另外,只要我可以保持與周圍光線(這是補間)同步,我就可以以某種方式進行手動操作。 – g3k0

回答

3

是的,CanvasRenderer不支持MeshLambertMaterial和散佈紋理的組合。

如果您只關心環境光線,那麼您可以使用具有紋理的MeshBasicMaterial,並將紋理即時變暗以模擬環境陰影。 (其實,你可以用這種方式來模擬任何照明。)

注意,這真是一個黑客。

創建基於環境光照修改紋理的功能。 (image是在你的情況下,無陰影漸變。)

function applyAmbient(mesh, image, ambientFactor) { // 1.0 = lightest; 0.0 = darkest 

    var canvas = mesh.material.map.image; 

    var size = canvas.width; 
    var size = canvas.height; 

    // get context 
    var context = canvas.getContext('2d'); 

    // copy image 
    context.drawImage(image, 0, 0); 

    // apply ambient factor 
    context.fillStyle = "rgba(0, 0, 0, " + (1 - ambientFactor) + ")"; 
    context.fillRect(0, 0, size, size); 

    return canvas; 

} 

然後,在渲染循環,更新紋理

applyAmbient(mesh, textureImage, ambientFactor); 
mesh.material.map.needsUpdate = true; // important! 

的jsfiddle:http://jsfiddle.net/mkP7q/

three.js所r.62

+0

這看起來像我想要的,但它在getContext上產生錯誤。 「TypeError:Object# has no method'getContext'」 此外,我假設圖像參數是圖像src的字符串?通過查看這個,我假設我可以傳遞材質而不是網格,並且可以從material.map.image.src中獲取src。我有很多使用材料的地方。 – g3k0

+0

我的評論有點模棱兩可。我得到錯誤傳遞一個網格,imageSrc,環境。之後的部分是關於改變功能,一旦我得到它的工作。 – g3k0

+1

我添加了一個小提琴來演示一種方法。我會讓你弄清楚你的實現細節:-) – WestLangley