THREE.JS 圆形地板，看起来像阴影答案

【问题标题】：THREE.JS Circle floor which will look like shadowTHREE.JS 圆形地板，看起来像阴影
【发布时间】：2014-08-10 15:17:37
【问题描述】：

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

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

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);

任何人都可以帮助创建类似于径向渐变的材料吗？：/

【问题讨论】：

为什么不直接使用这样的东西：209.85.48.18/7059/133/0/p1015675/shadow.png 并将地图设置为透明？ :)
我不知道如何在three.js中映射纹理：/
然后查看纹理加载示例，了解如何执行此操作；）这很容易。加载图像并在您的材质“地图”参数中使用它。
我试过这个，我将类似的图像映射到这个圆圈，它可以工作:)。感谢您的帮助

标签： javascript three.js shadow

【解决方案1】：

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

1) 加载渐变图像并将其应用于材质，正如@GuyGood 在 cmets 中提到的那样

代码将是这样的：

    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) 我在这里要特别提到的另一种方法是，我们可以创建一个canvas 元素并在其上绘制任何东西（在您的情况下，它是一个带有渐变的圆圈，但是它可以是任何东西），并为其创建纹理并应用于材质。

代码会是这样的

 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);

JSfiddle for method 2

【讨论】：