时间戳

首页 > 解决方案 > 如何在单击时从 Three.js 场景中删除组？

three.js - 如何在单击时从 Three.js 场景中删除组？

问题描述

我有一组对象（实际上是弧上的 3D 文本），我想通过特定的点击从场景中删除它们。.remove 对组不起作用吗？这基本上是我所拥有的：

$(".inscript").on("mousedown", function(event){    
  var x = scene.getObjectByName("inscriptArc");
  scene.remove(x);
});

这个答案似乎表明您可以（使用 .remove 从场景中删除一个组），但它对我不起作用。

标签： three.js

解决方案

THREE.Scene.getObjectByName 返回具有该名称的孩子的第一个实例。如果你有多个，你不会通过调用一次来捕获它们。

要删除所有实例，我将使用 THREE.Object.traverse(fn(child){}) 函数，即：

var children_to_remove = [];
scene.traverse(function(child){
    if(child.name == "inscriptArc"){
       children_to_remove.push(child);
    }
});
children_to_remove.forEach(function(child){
    scene.remove(child);
});

你也许可以做

scene.traverse(function(child){
    if(child.name == "inscriptArc"){
       scene.remove(child);
    }
});

但我认为在某些情况下，如果您从场景中异步加载/删除任何东西，这可能会导致错误 - 因为当孩子的孩子被遍历时，移除孩子可能会引发错误。不确定，所以我会尝试简单的，如果它引起问题，我会换成更复杂的。

推荐阅读