如何将ThreeJS中Points的形状从方形改为圆形？（React+R3F场景）

问题根源 #

你的圆形点显示在方形里，是因为Canvas生成的纹理默认非绘制区域是不透明的黑色，而PointsMaterial默认不会识别透明通道，所以方形背景被渲染出来了。

修复方案 #

只需两步就能得到纯圆形点：

1. 让Canvas纹理背景透明 #

修改getTexture函数，在绘制圆形前先清空画布为透明：

const getTexture = (size, color) => {
    const matCanvas = document.createElement('canvas');
    matCanvas.width = matCanvas.height = size;
    const matContext = matCanvas.getContext('2d');
    const texture = new THREE.Texture(matCanvas);

    // 新增：清空画布为透明背景
    matContext.clearRect(0, 0, size, size);

    const center = size / 2;
    matContext.beginPath();
    matContext.arc(center, center, size/2, 0, 2 * Math.PI, false);
    matContext.closePath();
    matContext.fillStyle = color;
    matContext.fill();

    texture.needsUpdate = true;
    return texture;
}

2. 开启PointsMaterial的透明处理 #

在R3F的pointsMaterial中添加透明相关属性，剔除透明区域：

return (
    <points args={[geometry]}>
        <pointsMaterial
            size={1}
            map={getTexture(10, 'red')}
            transparent={true}
            alphaTest={0.5}
        />
    </points>
)

额外说明 #

• alphaTest={0.5}的作用是：像素透明度低于0.5时直接不渲染，这样圆形外的透明区域就不会显示成方形背景。
• 相比alphaBlend，alphaTest性能更好，适合这种简单的圆形点场景。

内容的提问来源于stack exchange，提问作者stopbanningmelmao123