Three.js中Canvas透明显示问题求助：仅显示文本而非白色矩形

核心问题分析 #

你看到的白色矩形，本质是Canvas纹理未正确处理透明通道，或是Three.js未感知到Canvas内容更新导致的默认渲染残留。以下是针对性的修复步骤：

1. 显式设置Canvas透明背景 #

默认Canvas初始为透明，但显式填充全透明背景可避免潜在的渲染异常：

const ctx = can.getContext('2d');
// 先填充全透明背景，覆盖所有像素
ctx.fillStyle = 'rgba(0, 0, 0, 0)';
ctx.fillRect(0, 0, can.width, can.height);

// 再绘制文本
ctx.fillStyle = '#000000';
ctx.font = "96px Arial";
ctx.fillText(text, 10, can.height * 0.8);

2. 强制更新纹理 #

Three.js不会自动检测Canvas内容变化，绘制完成后必须手动标记纹理需要更新：

// 文本绘制完成后添加这行代码
canvasTexture.needsUpdate = true;

3. 优化SpriteMaterial配置 #

添加alphaTest参数过滤低alpha值像素，彻底消除半透明边缘或残留的白色区域：

const spriteMaterial = new THREE.SpriteMaterial({
  map: canvasTexture,
  depthTest: false,
  depthWrite: false,
  transparent: true,
  alphaTest: 0.1, // 新增：过滤alpha值低于0.1的像素
  color: 0xffffff,
});

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