当父 THREE.js 组的可见性更改时更改 CSS2D 对象的可见性答案

【问题标题】：Change visibility of CSS2D objects when a parent THREE.js Group has its visibility changed当父 THREE.js 组的可见性更改时更改 CSS2D 对象的可见性
【发布时间】：2021-03-12 22:52:19
【问题描述】：

我已将网格和 CSS2DObjects（标签）添加到 THREE.js 组。

当我切换 Group.visible 属性时，网格的可见性也会发生变化（如预期的那样）。

但不幸的是，CSS2DObjects 的可见性并没有改变。

这是已知行为，discourse thread from 2019 显示如何通过将 CSS2DObject（具有已知 div）的 style.display 设置为 'none' 或 'block' 来切换其可见性。（感谢 Mugen87）。

labelDiv1.style.display = 'none';
labelDiv2.style.display = 'block';

我需要一种方法来获取“在”组中的所有 CSS2DObject 的列表 - 要么（a）因为它们已直接添加到组中，要么（b）因为它们已添加到具有已添加到组中或 (c) 更复杂的层次关系，例如网格的子级，它是添加到组中的网格的子级。

然后，对于每个选定的 CSS2DObject，我需要获取关联的 div。如果有时间，我可能会敲出一些适用于我正在开发的相对简单的应用程序的东西。但我想知道是否已经有一些东西可能更灵活和未来证明可以节省重新发明轮子。（理想情况下，这样的设施应该是 THREE.js IMO 的一部分）。

【问题讨论】：

标签： javascript html css three.js

【解决方案1】：

您正在寻找Object3D.traverse()，它递归地循环遍历对象的所有后代，包括孩子、孙子等等。

https://threejs.org/docs/#api/en/core/Object3D.traverse

在遍历回调中，您可以检查对象 .type 以查看它是否为 CSS2DObject。

【讨论】：

.traverse() 函数非常有用，谢谢。实际上我的CSS2DObjects 报告为type:Object3D，但我可以简单地预先命名它们，然后使用'name' 属性过滤选择它们。然后在Object3D 中有一个element:Div，其中有style.display，这是我需要设置的属性。