3d markup on the forge viewer

Question

I found this example ( https://forge.autodesk.com/blog/3d-markup-icons-and-info-card ) The code found in the link works fine but i would like to use a file/model in my private bucket on forge

1) I wondered if there is a way to access a file uploaded to the private bucket created on the forge platform ? If so , is it possible to access this file in the form of https://lmv-models.s3.amazonaws.com/toy_plane/toy_plane.svf like in this example ?

2) I edited the existing code to bypass the bucket and to load my onw model in the forge viewer and to add markups (the token and urn worked)

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

The model is loaded but the mark-up are not shown.(The markupExt.js is the code found on the example link)

Answer 1

Maybe there is something missed while pasting the code snippets. The resource code of this awesome example is put here ( https://github.com/wallabyway/markupExt ), you can find the link at the bottom of that blog.

After downloading, you have set up a web server to host this project and navigate to http://YOUR_WEB_SITE_OF_THAT_PROJECT/docs on your we browser. You will see the airplane and markups loaded without any problem. Just tested it on my machine~

==== Update regarding Micheal 's comment:

Since the Viewer's length units used in the Airplane and the Revit model are different, you cannot take advantage of the markup3d extension directly without any modification.

The following code snippet is I used on the sample rac_basic_sample_project.rvt from here . The dbIds are the sun module panels and the positions of the markup points are the mid-point of sun module's bounding box.

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}));

Here is the result:

If you have another question about that extension, I would like to advise you to discuss with the author directly: https://github.com/wallabyway/markupExt/issues

3d markup on the forge viewer

Question

1 answers

solution1
0 2018-07-24 09:31:11

3d markup on the forge viewer

Question

1 answers

solution1 0 2018-07-24 09:31:11

solution1
0 2018-07-24 09:31:11