Three.js 按名称属性值获取所有网格体。

Question

我有一个简单的 Three.js 场景，其中生成了一些网格。其中一些具有名称属性=“象限”。我只想以任何方式获得名为“象限”的所有网格。我用了scene.getObjectByName("象限"); 它有效，但只返回找到的第一个名为“象限”的元素。我能怎么做？

Answer 1

我也做了一些挖掘来为自己澄清这一点。因此，长话短说，您将无法使用getObjectByName方法访问所有网格。它不像 css 中的类选择器那样工作。三.JS文档指出：

.getObjectByName ( name : String ) -- 搜索对象的子对象并返回第一个具有匹配名称的对象。

所以，你有两个选择：

• 为每个网格指定唯一的名称
• 遍历场景的对象

我制作了带有动画和材质修改的代码片段，因为不清楚您想要实现什么。

示例包含：

• 如何使用getObjectByName一个对象的方法来修改它的材质
• 如何遍历场景的子级并检查它们是否有“象限”名称

所以，简而言之：

scene.traverse(function(child) {
  if (child.name === "quadrant") {
    child.material = ClassMaterial; //apply same material to all meshes
  }
});

希望解决方案是明确的，祝你好运。

更详细的例子：

scene.traverse(function(child) {
  if (child.name === "quadrant") {
    child.material = ClassMaterial; //apply same material to all meshes
  }
});

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 50;

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
  color: 0x00ff00
});

var UniceMaterial = new THREE.MeshBasicMaterial({
  color: 0xffff00
});
var ClassMaterial = new THREE.MeshBasicMaterial({
  color: 0x00ffff
});


for (j = 0; j < 10; j++) {
  var cube = new THREE.Mesh(geometry, material);
  cube.name = "demo";
  cube.myid = j;
  cube.position.x = j * -2;
  cube.position.y = j - 2;
  cube.position.z = j / 100;
  scene.add(cube);
}

for (i = 0; i < 10; i++) {
  var cube = new THREE.Mesh(geometry, material);
  cube.name = "quadrant";
  cube.myid = i;
  cube.position.x = i * 2;
  cube.position.y = i + 2;
  cube.position.z = i / 100;
  scene.add(cube);
}

for (i = 0; i < 4; i++) {
  var cube = new THREE.Mesh(geometry, material);
  cube.name = "quadrant" + 1;
  cube.myid = i;
  cube.position.x = 0;
  cube.position.y = i * -4;
  cube.position.z = i / 100;
  scene.add(cube);
}


scene.traverse(function(child) {
  //if (child instanceof THREE.Mesh) {
  if (child.name === "quadrant") {
    child.material = ClassMaterial;
    //console.log (child);
  }
  //child.material = ClassMaterial;
  //}
});

ObjectWithGetMethod = scene.getObjectByName("quadrant1");
ObjectWithGetMethod.material = UniceMaterial;

var animate = function() {
  requestAnimationFrame(animate);

  scene.traverse(function(cube) {
    if (cube.name === "demo") {
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
    }
  });

  //despite you try to select  "quadrant" it animates last added cube:
  if (cube.name = "quadrant") {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
  }

  renderer.render(scene, camera);
};

animate();