如何从Viewer中移除对象？附添加文本对象的实现代码

嘿，我来帮你搞定这个移除文本对象的问题～ 其实步骤很清晰，核心就是找到你创建的文本对象引用，从它的父容器中移除，同时清理资源避免内存泄漏，具体操作如下：

第一步：给文本对象做标记/保存引用 #

在你调用createText创建文本的时候，最好给这个文本对象做个可识别的标记，或者把它存到一个数组里管理，方便后续快速定位。比如修改你的createText函数：

createText(params) {
  // ... 你原有的创建textGeometry、geometry、material的代码 ...
  const text = new THREE.Mesh(geometry, material);
  
  // 给文本设置唯一名称，方便后续查找
  text.name = `custom-text-${params.id}`; // 假设params里有唯一标识id
  // 或者把对象存到实例的数组里统一管理
  if (!this.customTexts) this.customTexts = [];
  this.customTexts.push(text);
  
  text.scale.set(params.scale, params.scale, params.scale);
  text.position.set(params.position.x, params.position.y, 10);
  this.scene.add(text); // 这里假设你把文本加到了场景scene中
}

第二步：执行移除操作 #

当需要移除文本时，通过之前的标记或数组找到目标对象，然后完成移除和资源清理：

方式一：通过名称查找并移除 #

// 替换成你给文本设置的具体名称
const textToRemove = this.scene.getObjectByName('custom-text-xxx');
if (textToRemove) {
  // 从父容器（这里是scene）中移除对象
  this.scene.remove(textToRemove);
  // 手动清理几何和材质，防止内存泄漏
  textToRemove.geometry.dispose();
  textToRemove.material.dispose();
}

方式二：通过存储的数组查找并移除 #

如果你之前把文本存在了this.customTexts数组里，可以这样操作：

// 假设你要移除的文本对应id是xxx
const targetId = 'xxx';
const textIndex = this.customTexts.findIndex(text => text.name.includes(targetId));
if (textIndex !== -1) {
  const text = this.customTexts[textIndex];
  this.scene.remove(text);
  text.geometry.dispose();
  text.material.dispose();
  // 从数组中删除该对象的引用
  this.customTexts.splice(textIndex, 1);
}

关键注意点 #

• 必须从文本对象的父容器调用remove方法：如果你的文本是加到某个Group里的，就要用group.remove(text)而不是scene.remove(text)。
• 一定要清理几何和材质：Three.js不会自动回收这些资源，频繁创建移除对象时，忽略这一步会导致内存占用持续升高。

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