xBIM 基礎13 WeXplorer 設置模型顏色

  默認狀況下模型具備合理的圖形表示。這是從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>
 
相關文章
相關標籤/搜索