你可以设置 Three.js TextGeometry 对象的背景颜色吗？答案

【问题标题】：Can you set background color of a Three.js TextGeometry object?你可以设置 Three.js TextGeometry 对象的背景颜色吗？
【发布时间】：2022-01-09 09:14:45
【问题描述】：

我的场景中有一个基本的 THREE.js TextGeometry 对象：

const loader = new THREE.FontLoader();
const linkToFont ='link-to-font';
let textGeo;
const self = this;
loader.load(linkToFont, function (font) {
  textGeo = new THREE.TextGeometry('Hello three.js!', {
    font,
    size: 0.3,
    height: 0.01,
  });
  textGeo.computeBoundingBox();
  const textMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
  const textMesh = new THREE.Mesh(textGeo, textMaterial);
  textMesh.position.set(-100, 0, 0);
  textMesh.updateMatrixWorld();
  self.addToScene(textMesh);
});

这会将我的场景中的文本呈现为红色。是否可以给这个区域的文本一个“背景颜色”？ IE。文本本身后面的矩形纯色？

【问题讨论】：

标签： javascript typescript colors three.js

【解决方案1】：

你有两个选择：

如果您想用单一颜色覆盖整个画布，请使用scene.background 覆盖整个画布scene.background = new THREE.Color(0x9900ff)。
如果您想限制背景颜色覆盖的区域，只需在MeshBasicMaterial 中使用您想要的颜色在文本后面创建一个plane。

【讨论】：