文章/答案/技术大牛

发布

社区首页 >问答首页 >Three.js通过名称属性值获取所有网格。

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

Stack Overflow用户

提问于 2018-11-02 16:11:16

回答 1查看 8K关注 0票数 5

我有一个简单的Three.js场景，我在其中生成了一些网格。其中一些具有名称属性=‘象限’。我只想以任何方式得到所有被命名为象限的网格。我使用了scene.getObjectByName(“象限”)；它可以工作，但只返回第一个元素‘象限’查找。我该怎么做？

three.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-11-03 02:55:59

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

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

所以，你有两个选择：

给出每个网格唯一的名称
穿越场景中的物体

我用动画和材料修改制作了代码片段，因为它不清楚你想要实现什么。

示例包含：

tu如何对一个对象使用getObjectByName方法修改其材料
如何遍历场景的孩子并检查他们是否有“象限”的名字

因此，简而言之：

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>

票数 7

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53122208

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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