three.js - three.js 渐变与画布渲染器

Question

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

Answer 1

是的，CanvasRenderer不支持MeshLambertMaterial和漫反射纹理组合。

如果您只关心环境光，那么您可以使用MeshBasicMaterial纹理，并将纹理即时变暗以模拟环境阴影。（实际上，您可以通过这种方式模拟任何光照。）

请注意，这确实是一个 hack。

创建一个函数来根据环境光照修改纹理。（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/

三.js r.62