Fatal编程技术网
  • javascript/
  • Javascript forge viewer上的三维标记

Javascript forge viewer上的三维标记

javascript autodesk-forge

Javascript forge viewer上的三维标记,javascript,autodesk-forge,autodesk-viewer,Javascript,Autodesk Forge,Autodesk Viewer,我找到了这个例子（） 链接中的代码运行良好，但我想在forge上使用我的私有bucket中的文件/模型 <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://de

我找到了这个例子（） 链接中的代码运行良好，但我想在forge上使用我的私有bucket中的文件/模型

<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>
1） 我想知道是否有办法访问上传到forge平台上创建的私有bucket的文件？如果是这样，是否可以像本例中那样访问此文件

<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>
2） 我编辑了现有代码以绕过bucket，在forge viewer中加载我的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>


var$=函数（div）{
返回文档.getElementById（div）
}
变量选项={
环境：“AutodeskProduction”，
accessToken:“$TOKEN”
};
var documentId='urn:urn'；
Autodesk.Viewing.Initializer（选项，初始化）；
函数初始化（）{
window.devicePixelRatio=1
查看器=新的Autodesk.Viewing.ViewingApplication（'MyViewerDiv'）；
常量config3D={
“扩展”：[“markup3d”]
}
viewer.registerViewer（viewer.k3D、Autodesk.Viewing.Viewer3D、config3D）；
model=viewer.loadDocument（documentId，onDocumentLoaded）；
//viewer.loadExtension（“markup3d”）；
函数onDocumentLoaded（）{
var modelNodes=viewer.bubble.search（av.BubbleNode.MODEL_NODE）；//3D设计
var sheetNodes=viewer.bubble.search（av.BubbleNode.SHEET_NODE）；//二维设计
var allNodes=modelNodes.concat（sheetNodes）；
if（allNodes.length）{
viewer.selectItem（所有节点[0]。数据）；
if（allNodes.length==1）{
警报（'本教程最适用于具有多个可视对象的文档！'）；
}
}否则{
警报（'提供的URN没有可查看的！'）；
}
onSuccess（）
}
函数onSuccess（）{
初始化标记（）；
}
}
///////////加价/////////////////
变量元素=$（“标签”）；
函数初始化标记（）{
//普拉辛·范恩平底船
var dummyData=[]；
for（设i=0；i<20；i++）{
dummyData.push({
图标：0，
x：数学四舍五入（200），
y:数学四舍五入（190），
z:数学。第四轮（50）
});
}
window.dispatchEvent（新CustomEvent（'newData'）{
“详细信息”：dummyData
}));
}
addEventListener（“onMarkupClick”，e=>{
//elem.style.display=elem.style.display==“块”？“块”：“无”；
elem.style.display=“块”；
移动标签（如详图）；
console.log（e.detail.id）
如果（e.detail.id==20）{
elem.innerHTML=`
传感器`+e.detail.id；
})
addEventListener（“onMarkupMove”，e=>{
移动标签（如详图）
}，错）
函数移动标签（p）{
elem.style.left=（（p.x+1）/2*window.innerWidth）+'px'；
elem.style.top=（（p.y-1）/2*窗口内部高度）+“px”；
}
模型已加载，但标记未显示。（markupExt.js是示例链接上的代码）

粘贴代码段时可能遗漏了一些内容。此精彩示例的资源代码放在此处（），您可以在该博客底部找到该链接

<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>
下载后，您已经设置了一个web服务器来承载此项目，并在您的we浏览器上导航到。您将看到加载的飞机和标记没有任何问题。只是在我的机器上测试了它~

<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>
==有关的评论更新：

<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>
由于飞机和Revit模型中使用的查看器的长度单位不同，因此在不进行任何修改的情况下，无法直接利用
markup3d
扩展

<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>
下面的代码片段是我在sample
rac\u basic\u sample\u项目中使用的。rvt
from.
dbid
是sun模块面板，标记点的位置是sun模块边界框的中点

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

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

constdbids=[387339033909391039123913913391839193924392539303931]；
const model=event.model；
const instanceTree=model.getData（）.instanceTree；
const globalOffset=model.getData（）.globalOffset；
const fragList=model.getFragmentList（）；
常量dummyData=[]；
for（设i=0；i{
fragList.getWorldBounds（fragId，box）；
界限.联合（框）；
}，对）；
const worldPoint=新的3.Vector3(
（bounds.max.x+bounds.min.x）/2+globalOffset.x，
（bounds.max.y+bounds.min.y）/2+全局偏移量.y，
（bounds.max.z+bounds.min.z）/2+globalOffset.z+0.5
);
控制台日志（worldPoint）；
dummyData.push({
图标：Math.round（Math.random（）*3），
x:worldPoint.x，
y:worldPoint.y，
z:worldPoint.z
});
}
dispatchEvent（新CustomEvent（'newData'，{'detail'：dummyData}））；
结果如下： 

<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>
如果您对该扩展还有其他问题，我建议您直接与作者讨论：

谢谢您的帮助。我在github上尝试了代码，但编辑了一点（我更新了原始帖子），也许这会让我的问题更清楚。请确保该扩展的相应JavaScript文件链接到您的网页。我在标题中使用了和。这是正确的方法吗？这可能与您创建的dummyData的位置有关，即x、y、z值可能不适合您的模型。飞机的示例工作正常。问题是我无法将标记应用于其他模型。我不知道这是否与那些价值观有关？ 
<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>