xBIM 基础13 WeXplorer 设置模型颜色

• 2019 年 10 月 4 日
• 笔记

　　默认情况下模型具有合理的图形表示。这是从IFC模型中获取的，它应该在所有工具中看起来相同，它应该与您或您的用户的创作环境中的相同。但有时候能够改变这种表示以向用户报告某种结果（分类，错误报告，碰撞检测等）是很重要的。这将在本简短教程中介绍。您可以在这里查看完整的示例演示。

首先，有必要定义您的样式。有一个简单的函数defineStyle（）来做到这一点。您最多可以定义224种样式。因为我没有真是数据，这里使用随机颜色来显示。我们将在以下代码中为每种产品类型定义新颜色：

<button onclick="Recolour()">Recolour by type</button>  <button onclick="if (viewer) viewer.resetStyles();">Reset styles</button>  <script type="text/javascript">      function Recolour() {          if (!viewer) return;          var index = 0;          for (var i in xProductType) {              var type = xProductType[i];              var colour = [Math.random() * 255, Math.random() * 255, Math.random() * 255, 255];              viewer.defineStyle(index, colour);              viewer.setStyle(index, type);              index++;          }      };  </script>

您可以根据需要扩展此示例。只需定义0 – 224种颜色样式，并将它们设置为产品或产品类型的叠加样式。如果要将样式重置为默认值，请使用resetStyles（）函数。

　　还有一个视觉特征，即突出显示。您可以将其视为一种选择，但它并不那么聪明。它将所有最终选择逻辑留给您。这只是一种视觉表现。因此，这种状态比风格还要严格。

<select id="cmbSelection">      <option value="noAction">No action</option>      <option value="select">Select</option>  </select>  <button onclick="if (viewer) viewer.resetStates()">Reset</button>  <script type="text/javascript">      function initHighlighting() {          viewer.on('pick', function (args) {              var cmb = document.getElementById('cmbSelection');              var option = cmb.value;              switch (option) {                  case 'select':                      viewer.setState(xState.HIGHLIGHTED, [args.id]);                      break;                  case 'hide':                      viewer.setState(xState.HIDDEN, [args.id]);                      break;                  default:                      break;              }          });      };  </script>