React Three Fiber单画布多对象布局与文本创建问题

一、解决元素堆叠问题：自动换行的网格排列 #

核心思路是预先定义每个元素（二十面体+文本）的尺寸与间距，计算每行可容纳的元素数量，再通过元素索引推导其在画布中的坐标：

1. 配置基础参数：

   • 单个元素的宽度/高度（含预留间距）
   • 元素间的间距
   • 画布的实际可用宽度

2. 计算每行元素数量：

   const itemWidth = 100; // 单个二十面体的宽度（含左右间距）
   const itemHeight = 120; // 元素总高度（二十面体+文本+上下间距）
   const gap = 20; // 元素间的间距
   const canvasWidth = window.innerWidth - 40; // 画布可用宽度
   const cols = Math.floor((canvasWidth + gap) / (itemWidth + gap)); // 每行最多容纳的元素数
   

3. 循环计算每个元素的位置：
   遍历所有元素，通过索引i计算其所在的行row和列col，再换算成3D场景中的坐标：

   texts.forEach((text, i) => {
     const group = createIcosahedronWithText(text);
     const col = i % cols;
     const row = Math.floor(i / cols);
     // 计算x坐标（水平居中对齐）
     const x = col * (itemWidth + gap) - (canvasWidth / 2) + (itemWidth / 2) + gap/2;
     // 计算y坐标（垂直居中对齐）
     const y = -(row * (itemHeight + gap)) + (window.innerHeight / 2) - (itemHeight / 2) - gap/2;
     group.position.set(x, y, 0);
     scene.add(group);
   });
   

   用Group将二十面体和文本打包，方便统一控制位置，避免单独调整的繁琐。

二、画布内添加文本的两种方案 #

方案1：CSS2D渲染（灵活可控，支持HTML样式） #

适合需要文本交互或复杂样式的场景，依赖CSS2DRenderer：

function createIcosahedronWithText(text) {
  // 创建二十面体
  const geometry = new THREE.IcosahedronGeometry(40);
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const icosahedron = new THREE.Mesh(geometry, material);

  // 创建HTML文本元素
  const textDiv = document.createElement('div');
  textDiv.style.color = '#fff';
  textDiv.style.fontSize = '14px';
  textDiv.style.textAlign = 'center';
  textDiv.textContent = text;
  // 转成CSS2D对象
  const textObj = new THREE.CSS2DObject(textDiv);
  textObj.position.set(0, -60, 0); // 放在二十面体正下方

  // 打包成组
  const group = new THREE.Group();
  group.add(icosahedron);
  group.add(textObj);
  return group;
}

// 注意需要同时初始化WebGLRenderer和CSS2DRenderer
const renderer = new THREE.WebGLRenderer();
const cssRenderer = new THREE.CSS2DRenderer();
// 配置渲染器尺寸和位置后，将两个渲染器的DOM元素添加到页面

方案2：CanvasTexture渲染（纯WebGL，无HTML依赖） #

适合无需交互的静态文本，直接在Canvas上绘制文本作为纹理贴到平面上：

function createTextTexture(text) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = 100;
  canvas.height = 30;
  ctx.fillStyle = '#fff';
  ctx.font = '14px Arial';
  ctx.textAlign = 'center';
  ctx.fillText(text, canvas.width/2, 20);
  return new THREE.CanvasTexture(canvas);
}

function createIcosahedronWithText(text) {
  // 创建二十面体（同方案1）
  const icosahedron = new THREE.Mesh(new THREE.IcosahedronGeometry(40), new THREE.MeshBasicMaterial({ color: 0x00ff00 }));

  // 创建文本平面
  const textGeometry = new THREE.PlaneGeometry(80, 20);
  const textMaterial = new THREE.MeshBasicMaterial({ 
    map: createTextTexture(text), 
    transparent: true,
    side: THREE.DoubleSide
  });
  const textMesh = new THREE.Mesh(textGeometry, textMaterial);
  textMesh.position.set(0, -60, 0);

  // 打包成组
  const group = new THREE.Group();
  group.add(icosahedron);
  group.add(textMesh);
  return group;
}

内容的提问来源于stack exchange，提问作者Ken W.