Javascript 3.JS圆形地板，看起来像阴影

我需要用渐变材质或其他东西创建一个圆形网格，看起来像阴影，所以：中间是黑色，边缘几乎是白色

目前，我可以创建一个圆并将其移动到应该的位置：

var floorGeometry = new THREE.CircleGeometry((Math.max(loadedObjectRotatedLength.x, loadedObjectRotatedLength.y)/2) + 15, 32);
var floorMaterial = new THREE.MeshBasicMaterial({color: 0xf0f0f0});

var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position = new THREE.Vector3((loadedObjectBoundingBox.min.x + loadedObjectBoundingBox.max.x)/2, (loadedObjectBoundingBox.min.y + loadedObjectBoundingBox.max.y)/2, loadedObjectBoundingBox.min.z);

---

任何人都可以帮助创建类似径向梯度的材质：/

有几种方法可以做到这一点

1加载渐变图像并将其应用于材料，如@GuyGood评论中所述

代码如下所示：

    var circleGeometry = new THREE.CircleGeometry(200, 200, 32);
    var texture = THREE.ImageUtils.loadTexture('image/shadow.png');// replace with appropriate URL
    texture.anisotropy = renderer.getMaxAnisotropy();
    var material = new THREE.MeshBasicMaterial({
        map: texture,
        color:0xFFFFFF
    });
    mesh = new THREE.Mesh(circleGeometry, material);
    scene.add(mesh); 

2我在这里特别提到的另一种方法是，我们可以创建画布元素并在其上绘制任何东西在您的情况下，它是一个带有渐变的圆，但它可以是任何东西，并创建其纹理并应用于材质

代码是这样的

 var circleGeometry = new THREE.CircleGeometry(100, 100, 100);
    // create a texture on canvas and apply it on material
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');

    var x = 150,
        y = 75,
        // Radii of the black glow.
        innerRadius = 0,
        outerRadius = 200,
        // Radius of the entire circle.
        radius = 200;

    var gradient = ctx.createRadialGradient(x, y, innerRadius, x, y, outerRadius);
    gradient.addColorStop(0, 'black');
    gradient.addColorStop(1, 'white');

    ctx.arc(x, y, radius, 0, 2 * Math.PI);

    ctx.fillStyle = gradient;
    ctx.fill();

    var shadowTexture = new THREE.Texture(canvas);
    shadowTexture.needsUpdate = true;

    var material = new THREE.MeshBasicMaterial({
        map: shadowTexture,
        side: THREE.DoubleSide
    });

    mesh = new THREE.Mesh(circleGeometry, material);
    scene.add(mesh); 

---

为什么不使用这样的方法：并将贴图设置为透明我不知道如何在three.js中映射纹理：/n然后查看如何进行纹理加载的示例；这很容易。加载一个图像并在材质贴图参数中使用它。我尝试了这个，并将类似的图像映射到这个圆圈，它可以工作：。谢谢你的帮助