时间戳

首页 > 解决方案 > 如何从场景中删除网格的子集？

javascript - 如何从场景中删除网格的子集？

问题描述

当我创建多个具有相同名称的网格时，当我想将它们从场景中移除时，我无法将它们全部选中。

我试过遍历函数无济于事。

event.preventDefault();

scene.traverse(function(child) {
   if (child.name === "blueTiles") {
      var remove_object = scene.getObjectByName( "blueTiles", true );
      scene.remove(remove_object); 
   }
});

var surroundMaterial = new THREE.MeshBasicMaterial({ color: 0x154995, side: THREE.DoubleSide, transparent: true, opacity: 0.8 });
surroundingCubes = new THREE.Mesh( geometry, surroundMaterial );
scene.add( surroundingCubes );
surroundingCubes.name = "blueTiles";
surroundingCubes.position.set(selectedObject.position.x - 1, 0.11, selectedObject.position.z);

var surroundMaterial = new THREE.MeshBasicMaterial({ color: 0x154995, side: THREE.DoubleSide, transparent: true, opacity: 0.8 });
surroundingCubes = new THREE.Mesh( geometry, surroundMaterial );
scene.add( surroundingCubes );
surroundingCubes.name = "blueTiles";
surroundingCubes.position.set(selectedObject.position.x + 1, 0.11, selectedObject.position.z);
surroundingCubes.rotation.x = Math.PI / 2;

我应该只能删除所有名为 blueTiles 的对象

编辑我从名称切换到组，这创造了奇迹下面的解决方案

function onDocumentMouseDown(event) {

for (var i = group.children.length - 1; i >= 0; i--) {
    group.remove(group.children[i]);
}

var surroundingMaterial = new THREE.MeshBasicMaterial({ color: 0x154995, side: THREE.DoubleSide, transparent: true, opacity: 0.8 });
var geometry = new THREE.PlaneGeometry(1, 1, 1, 1);

if ( selectedObject.position.x - 1 >= 0) {
    surroundingCube = new THREE.Mesh( geometry, surroundingMaterial );
    surroundingCube.position.set(selectedObject.position.x - 1, 0.11, selectedObject.position.z);
    surroundingCube.rotation.x = Math.PI / 2;
    group.add(surroundingCube);

}

if ( selectedObject.position.x + 1 <= 9) {
    surroundingCube = new THREE.Mesh( geometry, surroundingMaterial );
    surroundingCube.position.set(selectedObject.position.x + 1, 0.11, selectedObject.position.z);
    surroundingCube.rotation.x = Math.PI / 2;
    group.add(surroundingCube);

}

scene.add( group );
}

标签： javascriptthree.js

解决方案

getObjectByName只是调用getObjectByProperty（使用 name 属性），它只返回它找到的第一个对象。
你真的只需要遍历children场景/object3d，检查他们的名字，然后删除。
如果您知道要删除的所有内容都将位于顶层，那很简单。
像......（未经测试） 

for ( var i = 0, l = scene.children.length; i < l; i ++ ) {
  if (scene.children[i].name === 'blueTiles') {
    scene.remove(scene.children[i]);
  }
}

如果您还想在较低级别进行检查，则可能需要某种递归。

编辑...
在再次查看您的问题之后..并记住有一个遍历功能
您似乎已经在遍历场景并可以访问孩子。
我认为你只需要改变你的功能（而不是调用 getObjectByName ）。 

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

推荐阅读