簡體   English   中英

在偽造查看器上的3d標記

[英]3d markup on the forge viewer

我找到了這個示例( https://forge.autodesk.com/blog/3d-markup-icons-and-info-card )在鏈接中找到的代碼可以正常工作,但我想私下使用文件/模型偽造的斗

1)我想知道是否有辦法訪問上傳到在偽造平台上創建的專用存儲桶的文件? 如果是這樣,是否可以像本例一樣以https://lmv-models.s3.amazonaws.com/toy_plane/toy_plane.svf的形式訪問此文件?

2)我編輯了現有代碼以繞過存儲桶,將我的onw模型加載到偽造查看器中並添加標記(令牌和urn起作用)

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/style.min.css?v=3.3" type="text/css">
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/three.min.js?v=v3.3"></script>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js?v=v3.3"></script>
<div id="forgeViewer"></div>
<!--3D markup-->
<script src="markupExt.js"></script>
</head>
<body>
<script>
var $ = function (div) {
return document.getElementById(div)
}

var options = {
   env: 'AutodeskProduction',
   accessToken: '$TOKEN'
};

var documentId = 'urn:URN';
Autodesk.Viewing.Initializer(options, onInitialized);

function onInitialized() {
window.devicePixelRatio = 1
viewer = new Autodesk.Viewing.ViewingApplication('MyViewerDiv');
const config3D = {
    'extensions': ['markup3d']
}
viewer.registerViewer(viewer.k3D, Autodesk.Viewing.Viewer3D, config3D);
model = viewer.loadDocument(documentId, onDocumentLoaded);
//viewer.loadExtension("markup3d");


function onDocumentLoaded() {
    var modelNodes = viewer.bubble.search(av.BubbleNode.MODEL_NODE); // 3D designs
    var sheetNodes = viewer.bubble.search(av.BubbleNode.SHEET_NODE); // 2D designs
    var allNodes = modelNodes.concat(sheetNodes);
    if (allNodes.length) {
        viewer.selectItem(allNodes[0].data);
        if (allNodes.length === 1) {
            alert('This tutorial works best with documents with more than one viewable!');
        }
    } else {
        alert('There are no viewables for the provided URN!');

    }
    onSuccess()
}

function onSuccess() {
    initializeMarkup();
}
}
///////////markup/////////////////

var elem = $("label");

function initializeMarkup() {
// plaatsing van een punt
var dummyData = [];
for (let i = 0; i < 20; i++) {
    dummyData.push({
        icon: 0,
        x: Math.round(200),
        y: Math.round(190),
        z: Math.round(50)
    });
}


window.dispatchEvent(new CustomEvent('newData', {
    'detail': dummyData
}));
}
window.addEventListener("onMarkupClick", e => {
//elem.style.display = elem.style.display == 'block' ? "block" : "none";
elem.style.display = "block";
moveLabel(e.detail);
console.log(e.detail.id)
if (e.detail.id == 20) {
    elem.innerHTML = `<img src="sen.jpg"><br>Sensor ` + e.detail.id;
})
window.addEventListener("onMarkupMove", e => {
moveLabel(e.detail)
}, false)

function moveLabel(p) {
elem.style.left = ((p.x + 1) / 2 * window.innerWidth) + 'px';
elem.style.top = (-(p.y - 1) / 2 * window.innerHeight) + 'px';
}
</script>
</body>

已加載模型,但未顯示標記。(markupExt.js是在示例鏈接上找到的代碼)

粘貼代碼片段時可能遺漏了一些東西。 這個很棒的示例的資源代碼放在此處( https://github.com/wallabyway/markupExt ),您可以在該博客的底部找到鏈接。

下載后,您已經設置了一個Web服務器來托管該項目,並在我們的瀏覽器中導航到http:// YOUR_WEB_SITE_OF_THAT_PROJECT / docs 您會看到飛機和標記已加載,沒有任何問題。 剛在我的機器上測試過〜

====有關Micheal的評論的更新:

由於在Airplane和Revit模型中使用的Viewer長度單位不同,因此,未經任何修改就無法直接利用markup3d擴展名。

以下代碼段是我在此處使用的示例rac_basic_sample_project.rvt所使用的代碼段。 dbIds是sun模塊面板,標記點的位置是sun模塊邊界框的中點。

const dbIds = [ 3873, 3903, 3909, 3910, 3912, 3913, 3918, 3919, 3924, 3925, 3930, 3931 ];
const model = event.model;
const instanceTree = model.getData().instanceTree;
const globalOffset = model.getData().globalOffset;
const fragList = model.getFragmentList();
const dummyData = [];

for( let i=0; i<dbIds.length; i++ ) {
    const dbId = dbIds[i];
    let bounds = new THREE.Box3();
    let box = new THREE.Box3();

    instanceTree.enumNodeFragments( dbId, ( fragId ) => {
        fragList.getWorldBounds( fragId, box );
        bounds.union( box );
    }, true );

    const worldPoint = new THREE.Vector3(
        ( bounds.max.x + bounds.min.x ) / 2 + globalOffset.x,
        ( bounds.max.y + bounds.min.y ) / 2 + globalOffset.y,
        ( bounds.max.z + bounds.min.z ) / 2 + globalOffset.z + 0.5
    );

    console.log( worldPoint );


    dummyData.push({
        icon:  Math.round(Math.random()*3),  
        x: worldPoint.x, 
        y: worldPoint.y, 
        z: worldPoint.z
    });
}

window.dispatchEvent(new CustomEvent('newData', {'detail': dummyData}));

結果如下: 在此處輸入圖片說明

如果您對該擴展名還有其他疑問,我建議您直接與作者討論: https : //github.com/wallabyway/markupExt/issues

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM