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>
 
posted @ 2019-06-05 17:31  张传宁  阅读(505)  评论(0编辑  收藏  举报
页脚 HTML 代码