logo标签列表

通过名称属性值获取所有网格的Three.js。

three.js
5

我有一个简单的Three.js场景，其中我生成了一些网格。其中一些具有名称属性=“quadrant”。 我只想以任何方式获取所有命名为“quadrant”的网格。 我使用了scene.getObjectByName（“quadrant”）; ，它能工作，但是它只返回找到的第一个名为“quadrant”的元素。我该怎么做？

1
你可以查看这个方法的源代码，了解它在底层是如何工作的，并编写自己的代码。 - prisoner849
1个回答
7
我翻译如下：

我花了一些时间来搞清楚这个问题。简而言之，您将无法使用 getObjectByName 的方法来访问所有的网格。它不像 CSS 中的类选择器那样工作。Three.JS 文档指出:

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

所以，您有两个选择：

  • 为每个网格分配唯一的名称
  • 遍历场景中的对象

我编写了代码片段，包括动画和材料修改，因为不清楚您想要实现什么。示例包含：

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

总之：

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();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.min.js"></script>
<html>

<head>
  <title>My first three.js app</title>
  <style>
    body {
      margin: 0;
    }
    
    canvas {
      width: 100%;
      height: 100%
    }
  </style>
</head>

<body>


</body>

</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接