three.js漸變與畫布渲染器

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

來源

2013-11-09 g3k0

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

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

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

是的，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

來源

2013-11-11 03:11:48 WestLangley

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

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

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

three.js漸變與畫布渲染器

回答

相關問題