Forge 查看器上的 3D 标记

Posted 2023-03-16

技术标签:

【中文标题】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 标记的主要内容，如果未能解决你的问题，请参考以下文章