xBIM 基礎12 WeXplorer xViewer的導航、相機、剖切、隱藏等操做

系列目錄    【已更新最新開發文章，點擊查看詳細】 

　　本篇將學習xViewer的導航，剪切和隱藏。這應該足以使用戶可以經過全部縮放，平移，軌道運行和隱藏可能的障礙物來檢查建築物內部。點擊這裏能夠看到完整的實例。

1、相機的位置和目標

能夠根據產品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如今沒有爲此作好準備，但計劃在下一個版本中進行。

2、剖切 

　　不少時候，用戶想要在建築物內部看到一些東西。建築物內部的導航可能很容易變得複雜，但若是你能夠切割建築物並看到裏面的東西，那麼用戶的生活將變得更加容易。默認狀況下，它也內置在查看器中。若是將平面上的點和平面的法線傳遞給方法，則可使用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>

3、隱藏

　　有時也須要隱藏一個元素或一種類型的元素，好比全部的牆壁。這能夠經過使用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> 

4、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>

 

系列目錄    【已更新最新開發文章，點擊查看詳細】