![The name of the picture]( "Creative")
3d markup on the forge viewer
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)
1 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~
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Thank you for helping. I tried the code on github but edited a bit ( i updated the original post) Maybe this will make my question more clear
– Jolien Bergen
5 hours ago