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

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

　　本篇将学习xViewer的导航，剪切和隐藏。这应该足以使用户能够通过所有缩放，平移，轨道运行和隐藏可能的障碍物来检查建筑物内部。点击这里可以看到完整的实例。

一、相机的位置和目标

可以根据产品ID轻松设置摄像机目标。可能最常见的方法是根据由用户选择或按下鼠标事件所标识的操作来设置目标。示例如下：

viewer.on('pick', function (args) {
    var id = args.id;
    viewer.setCameraTarget(id);
    pickedId = id;
});

使用 setCameraPosition()方法设置摄像机位置也很容易。以下示例使用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');">Front</button>
<button onclick="if (viewer) viewer.show('back');">Back</button>
<button onclick="if (viewer) viewer.show('top');">Top</button>
<button onclick="if (viewer) viewer.show('bottom');">Bottom</button>
<button onclick="if (viewer) viewer.show('left');">Left</button>
<button onclick="if (viewer) viewer.show('right');">Right</button>

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

<button onclick="if (viewer) viewer.navigationMode = 'orbit';">Orbit</button>
<button onclick="if (viewer) viewer.navigationMode = 'free-orbit';">Free orbit</button>
<button onclick="if (viewer) viewer.navigationMode = 'pan';">Pan</button>
<button onclick="if (viewer) viewer.navigationMode = 'zoom';">Zoom</button>

<button onclick="if (viewer) viewer.navigationMode = 'none';">Disable default navigation completely</button>

当模型绕其Z轴旋转时，默认轨道模式是固定轨道。您还可以使用围绕实际轴旋转模型的自由轨道，因此更自由。您可以使用它从不寻常的角度查看模型。就像一个提示 - 如果有必要的话，画圆圈来调整水平线。您还可以完全禁用默认导航，如示例最后一行所示，并自行实现不同的导航。API现在没有为此做好准备，但计划在下一个版本中进行。

二、剖切 

　　很多时候，用户想要在建筑物内部看到一些东西。建筑物内部的导航可能很容易变得复杂，但如果你可以切割建筑物并看到里面的东西，那么用户的生活将变得更加容易。默认情况下，它也内置在查看器中。如果将平面上的点和平面的法线传递给方法，则可以使用clip（）方法自行设置剪切平面，或者如果调用不带参数的方法，则可以让用户以交互方式定义剪切平面。使用unclip（）方法取消剪切。

<button onclick="if (viewer) viewer.clip();">Interactive clipping</button>
<button onclick="if (viewer) viewer.unclip();">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()">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>

三、隐藏

　　有时也需要隐藏一个元素或一种类型的元素，比如所有的墙壁。这可以通过使用setState（）方法设置产品的状态来实现。使用resetStates（）方法将所有状态重置为默认值。此方法有一个可选参数，您可以使用该参数显示空格。默认情况下隐藏它们，除非您手动显示它们。

<select id="cmbHide">
    <option value="noAction">No action</option>
    <option value="hideProduct">Hide product</option>
    <option value="hideType">Hide type</option>
    <option value="highlight">Highlight</option>
</select>
<button onclick="if (viewer) viewer.resetStates()">Show all</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> 

四、X-Ray渲染模式

　　xViewwe还有一个选项，那就是突出显示。它内置于引擎的核心，如果您需要在视觉上突出显示或隔离模型中的某些对象，它非常有用。它与X-Ray渲染模式结合使用时特别有用，其中所有内容都以半透明浅蓝色呈现，除了具有状态xState.HIGHLIGHTED或xState.XRAYVISIBLE的产品。要在普通和X射线渲染模式之间切换，只需设置xViewer的renderingMode属性即可。

<div>
    Rendering mode
    <label>
        <input type="radio" name="rRenderingMode" checked="checked" 
            onchange="if (viewer) viewer.renderingMode = 'normal';"/> 
        Normal
    </label>
    <label>
        <input type="radio" name="rRenderingMode" 
            onchange="if (viewer) viewer.renderingMode = 'x-ray';" /> 
        X-Ray
    </label>
</div>

 

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