THREE.js具有渐变纹理的不规则多面体

Question

我有一个不规则的多面体。我想制作顶部/底部渐变。

使用框几何，我实现它。

//渐变cavas

var canvas = $("#canvasTest")[0];
var context = canvas.getContext( '2d' );
context.rect( 0, 0, canvas.width, canvas.height );
var gradient = context.createLinearGradient( 0, 0, canvas.width, 0);
gradient.addColorStop( 0, 'red');
gradient.addColorStop( 0.25, 'green');
gradient.addColorStop( 0.5, 'yellow');
gradient.addColorStop( 0.75, 'pink');
gradient.addColorStop( 1, 'black');
context.fillStyle = gradient;
context.fill();

//材料

var materials = [new THREE.MeshBasicMaterial( {
                        color:'#6092c1',
                        // map:shadowTexture,
                        shading: THREE.FlatShading,
                        transparent: true,
                        opacity: 0.5,
                        side: THREE.DoubleSide,
                      } ),
       new THREE.MeshBasicMaterial( {
                        color:'#6092c1',
                        // map:shadowTexture,
                        shading: THREE.FlatShading,
                        transparent: true,
                        opacity: 0.5,
                        side: THREE.DoubleSide,
                      } ), 
       new THREE.MeshBasicMaterial( {
                        color:'#ffffff',
                        map:shadowTexture,
                        shading: THREE.FlatShading,
                        transparent: true,
                        opacity: 0.5,
                        side: THREE.DoubleSide,
                        overdraw:true,
                      } ),
       new THREE.MeshBasicMaterial( {
                        color:'#ffffff',
                        map:shadowTexture,
                        shading: THREE.FlatShading,
                        transparent: true,
                        opacity: 0.5,
                        side: THREE.DoubleSide,
                        overdraw:true,
                      } ),
       new THREE.MeshBasicMaterial( {
                        color:'#6092c1',
                        // map:shadowTexture,
                        shading: THREE.FlatShading,
                        transparent: true,
                        opacity: 0.5,
                        side: THREE.DoubleSide,
                      } ), 
       new THREE.MeshBasicMaterial( {
                        color:'#6092c1',
                        // map:shadowTexture,
                        shading: THREE.FlatShading,
                        transparent: true,
                        opacity: 0.5,
                        side: THREE.DoubleSide,
                      } )
    ];
var faceMaterial = new THREE.MeshFaceMaterial(materials);

// box geometry

var geometry = new THREE.BoxGeometry(1000, 100, 1000, 20, 1, 20);
var box = new THREE.Mesh(geometry, faceMaterial);

最后是这样的： the box geometry result

然后使用上面的代码，不规则多面体不起作用。

var floor = new THREE.Mesh(firstFloorGeometry, faceMaterial); //faceMaterial same to above 
        floor.name = "Floor";
        floor.position.y = 215;
        floor.position.x = -137;
        floor.position.z = 47;
        floor.receiveShadow = true;
        floor.scale.set(500, 500, 500);
        world.add(floor);

结果是： the irregular polyhedron geometry result

那么有人可以帮助我吗？非常感谢。