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

   目錄

    基礎

• 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 的導航、剖切、隱藏、相機位置。這應該足以讓用戶經過全部縮放、平移和隱藏可能的障礙物來檢查建築物內部。

 一、相機位置

     根據產品的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軸旋轉時，默認軌道模式是固定的旋轉。您也可使用圍繞實際軸旋轉模型的自由旋轉，所以更自由。你能夠用這個從不一樣尋常的角度看模型。就像提示同樣 - 若是須要的話，畫圓圈來調整水平面。

二、剖切

     剖切咱們會常常使用，用戶想要看到建築物內部深處的東西。建築物內部的導航可能會很容易變得複雜，但若是您能夠剖切建築物並看到內部，則可讓用戶的操做變得更加輕鬆。這也是默認狀況下在查看器中構建的。若是您將平面上的點和平面上的點傳遞給方法，您可使用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>

 三、隱藏

      有時你也須要隱藏一個元素或一種元素，讓咱們說全部的牆壁。這能夠經過使用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>