正文

xBIM WeXplorer xViewer的导航，相机、剖切、隐藏 等操作

IP云
IP云V管理员/3 阅读
12/01
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

目录

基础
  • xBIM WeXplorer 简要介绍
  • xBIM WeXplorer xViewer 基本应用
  • xBIM WeXplorer xViewer 浏览器检查
  • xBIM WeXplorer xViewer的导航，相机、剖切、隐藏 等操作
  • xBIM WeXplorer  设置模型颜色
高级应用
  • xBIM 综合使用案例与 ASP.NET MVC 集成（一）
  • xBIM 综合使用案例与 ASP.NET MVC 集成（二）
  • xBIM 综合使用案例与 ASP.NET MVC 集成（三）

在本次我们探讨xViewer 的导航、剖切、隐藏、相机位置。这应该足以让用户通过所有缩放、平移和隐藏可能的障碍物来检查建筑物内部。

1、相机位置

根据产品的ID设置相机目标很容易。可能最常见的方法是根据用户操作设置一个目标。这些需要用户选择按钮或者鼠标操作来设置。如下例子： 

viewer.on('pick', function (args) {

    var id = args.id;

    viewer.setCameraTarget(id);

    pickedId = id;

});

使用 setCameraTarget() 方法设置相机位置也很容易，如下实例将使用HTML输入来设置值。 

<input type="text" id="camX" value="-15000" />

<input type="text" id="camY" value="-15000" />

<input type="text" id="camZ" value="15000" />

<button onclick="SetCamera()">Set camera</button>

<script type="text/javascript">

    function SetCamera() {

        if (viewer) {

            var iX = document.getElementById('camX');

            var iY = document.getElementById('camY');

            var iZ = document.getElementById('camZ');

            viewer.setCameraPosition([iX.value, iY.value, iZ.value]);

        }

    }

</script>

能够向模型或零件显示默认轴对齐视图总是很重要的。这是xViewer的内置功能。它始终根据setCameraTarget（）方法设置的原点和距离进行操作。在该示例中，每当用户选择如上所列的元素时，相机目标被设置。 

<button onclick="if (viewer) viewer.show('front');">前</button>

<button onclick="if (viewer) viewer.show('back');">后</button>

<button onclick="if (viewer) viewer.show('top');">上</button>

<button onclick="if (viewer) viewer.show('bottom');">下</button>

<button onclick="if (viewer) viewer.show('left');">左</button>

<button onclick="if (viewer) viewer.show('right');">右</button>

xViewer 只使用浏览器的默认导航功能，这些功能在鼠标左键轨道上运行，平移中键和放大滚动键。这应该是 直观的。请注意，查看器的最佳做法是将其放在一个没有垂直滚动条的页面上。因为缩放模型并同时滚动网站，缩放很难。如果您希望这样做，可以使用以下代码更改左按钮的默认行为： 

<button onclick="if (viewer) viewer.navigationMode = 'orbit';"> 旋转 </button>

<button onclick="if (viewer) viewer.navigationMode = 'free-orbit';"> 自由旋转 </button>

<button onclick="if (viewer) viewer.navigationMode = 'pan';"> 平移 </button>

<button onclick="if (viewer) viewer.navigationMode = 'zoom';"> 缩放 </button>

<button onclick="if (viewer) viewer.navigationMode = 'none';"> 完全禁用默认导航 </button>

当模型绕Z轴旋转时，默认轨道模式是固定的旋转。您也可以使用围绕实际轴旋转模型的自由旋转，因此更自由。你可以用这个从不同寻常的角度看模型。就像提示一样 - 如果需要的话，画圆圈来调整水平面。

2、剖切

剖切我们会经常使用，用户想要看到建筑物内部深处的东西。建筑物内部的导航可能会很容易变得复杂，但如果您可以剖切建筑物并看到内部，则可以让用户的操作变得更加轻松。这也是默认情况下在查看器中构建的。如果您将平面上的点和平面上的点传递给方法，您可以使用clip(）方法自己设置裁剪平面，或者如果您调用没有参数的方法，您可以让用户以交互方式定义裁剪平面。使用unclip()方法比完全放弃剪辑。 

<button onclick="if (viewer) viewer.clip();">开始剖切</button>

<button onclick="if (viewer) viewer.unclip();">取消剖切</button> 

<input type="text" id="clipOrigX" value="0" />

<input type="text" id="clipOrigY" value="0" />

<input type="text" id="clipOrigZ" value="0" />

<input type="text" id="clipNormX" value="-1" />

<input type="text" id="clipNormY" value="0" />

<input type="text" id="clipNormZ" value="0" />

<button onclick="Clip()">剖切</button>

<script type="text/javascript">

    function Clip() {

        var oX = document.getElementById('clipOrigX').value;

        var oY = document.getElementById('clipOrigY').value;

        var oZ = document.getElementById('clipOrigZ').value;

        var nX = document.getElementById('clipNormX').value;

        var nY = document.getElementById('clipNormY').value;

        var nZ = document.getElementById('clipNormZ').value;

        if (viewer)

            viewer.clip([oX, oY, oZ], [nX, nY, nZ]);

    }

</script>

3、隐藏

有时你也需要隐藏一个元素或一种元素，让我们说所有的墙壁。这可以通过使用setState（）方法设置产品的状态来实现。使用resetStates（）方法将所有状态重置为默认状态。此方法有一个可选参数，您可以使用它来显示空格。这些都是默认隐藏的，除非您将它们显示为manualy。 

<select id="cmbHide">

    <option value="noAction">无操作</option>

    <option value="hideProduct">隐藏产品</option>

    <option value="hideType">隐藏类型</option>

    <option value="highlight">高亮</option>

</select>

<button onclick="if (viewer) viewer.resetStates()">显示所有</button>

<script type="text/javascript">

    function initHiding() {

        viewer.on('pick', function (args) {

            var cmb = document.getElementById('cmbHide');

            var option = cmb.value;

            switch (option) {

                case 'hideProduct':

                    viewer.setState(xState.HIDDEN, [args.id]);

                    break;

                case 'hideType':

                    var type = viewer.getProductType(args.id);

                    viewer.setState(xState.HIDDEN, type);

                    break;

                case 'highlight':

                    viewer.setState(xState.HIGHLIGHTED, [args.id]);

                    break;

                default:

                    break;

            }

        });

    };

</script>

相关阅读

目录[+]