默認狀況下模型具備合理的圖形表示。這是從IFC模型中獲取的,它應該在全部工具中看起來相同,它應該與您或您的用戶的創做環境中的相同。但有時候可以改變這種表示以向用戶報告某種結果(分類,錯誤報告,碰撞檢測等)是很重要的。這將在本簡短教程中介紹。您能夠在這裏查看完整的示例演示。javascript
首先,有必要定義您的樣式。有一個簡單的函數defineStyle()來作到這一點。您最多能夠定義224種樣式。由於我沒有真是數據,這裏使用隨機顏色來顯示。咱們將在如下代碼中爲每種產品類型定義新顏色:html
<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()函數。java
還有一個視覺特徵,即突出顯示。您能夠將其視爲一種選擇,但它並不那麼聰明。它將全部最終選擇邏輯留給您。這只是一種視覺表現。所以,這種狀態比風格還要嚴格。dom
<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>