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

THREE.JS Circle floor which will look like shadow

本文关键字：看起来 阴影 JS THREE      更新时间：2023-09-26

我需要创建一个渐变材质的圆网格，看起来像它的阴影，所以:黑色在中心，几乎是白色的边缘。

目前我可以创建一个圆圈并将它移动到它应该在的位置:

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)我在这里特别提到的另一种方法是，我们可以创建一个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);
相关文章：