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渐变与画布渲染器

回答

相关问题