Question

我知道使用webgl渲染器，我可以在材质上使用vertexColors来创建线性渐变。根据文档，这不适用于画布渲染器。如何回退到画布渲染器并仍然具有渐变？我希望它受到环境光的影响，所以我不能依赖图像纹理。

Answer 1

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

带有画布渲染器的three.js渐变

1 个答案: