Forge 查看器上的 3D 标记
Posted
技术标签:
【中文标题】Forge 查看器上的 3D 标记【英文标题】：3d markup on the forge viewer 【发布时间】：2018-12-31 20:33:18 【问题描述】：我找到了这个例子 (https://forge.autodesk.com/blog/3d-markup-icons-and-info-card) 在链接中找到的代码工作正常，但我想在我的私人存储桶中使用文件/模型来伪造
1) 我想知道是否有办法访问上传到在 forge 平台上创建的私有存储桶的文件？如果是这样，是否可以像本例一样以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 是示例链接上的代码）
【问题讨论】：
【参考方案1】：粘贴代码 sn-ps 时可能遗漏了什么。这个很棒的例子的资源代码放在这里（https://github.com/wallabyway/markupExt），你可以在该博客的底部找到链接。
下载后，您已经设置了一个 Web 服务器来托管此项目并在您的浏览器上导航到 http://YOUR_WEB_SITE_OF_THAT_PROJECT/docs。您将看到加载的飞机和标记没有任何问题。刚刚在我的机器上测试了一下~
==== 更新Micheal 的评论：
由于在 Airplane 和 Revit 模型中使用的 Viewer 的长度单位不同，因此您无法直接利用 markup3d 扩展而不进行任何修改。
以下代码 sn-p 是我在来自here 的示例rac_basic_sample_project.rvt 上使用的。 dbIds 是太阳模块面板，标记点的位置是太阳模块边界框的中点。
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
【讨论】：
感谢您的帮助。我在 github 上尝试了代码，但做了一些编辑（我更新了原帖）也许这会让我的问题更清楚 请确保该扩展程序的相应 javascript 文件已链接到您的网页。 我确实在标题中使用了 和 。这是正确的方法吗？ 这可能与您创建的 dummyData 的位置有关，即 x、y、z 值可能不适合您的模型。 飞机示例工作正常问题是我无法将标记应用于另一个模型。我不知道这是否与那些价值观有关？以上是关于Forge 查看器上的 3D 标记的主要内容，如果未能解决你的问题，请参考以下文章
如何禁用右键单击事件或如何隐藏 Autodesk Forge 查看器上的上下文菜单
如何在不使用扩展的情况下在 Autodesk forge 查看器上显示图标
Autodesk-forge 我们可以在查看器上打开 PDF 文件吗[关闭]