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>