xBIM 基础13 WeXplorer 设置模型颜色

系列目录【已更新最新开发文章，点击查看详细】

　　默认情况下模型具有合理的图形表示。这是从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>