关键词：
【中文标题】如何在 nuxt js Autodesk forge 查看器中使用 IconMarkupExtension？【英文标题】：How to use the IconMarkupExtension in nuxt js autodesk forge viewer? 【发布时间】：2020-09-22 02:21:52 【问题描述】：我试图按照示例使用 IconMarkupExtension，
https://forge.autodesk.com/blog/placing-custom-markup-dbid
我尝试将其转换为 nuxt js 并使用它。但是，当查看器加载时，我创建了工具栏并显示了工具提示，但是当我单击该工具栏时，没有添加任何标记。
有人可以更正我的代码，使其在基于 nuxt 的应用程序中工作。我将在下面留下我的示例代码。
//index.vue
<template>
<div>
<div id="forgeViewer"></div>
</div>
</template>
<script>
export default
components:
,
data()
return
,
mounted()
this.initAutodesk();
,
methods:
async initAutodesk()
var htmlDiv = document.getElementById('forgeViewer');
const IconMarkupExtension = await import('./extensions/IconMarkupExtension.js').then(mod=>mod.default)
Autodesk.Viewing.theExtensionManager.registerExtension('IconMarkupExtension', IconMarkupExtension);
const viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv, extensions: ['IconMarkupExtension'] );
window.viewer = viewer;
window.viewer.loadExtension('IconMarkupExtension',
button:
icon: 'fa-thermometer-half',
tooltip: 'Show Temperature'
,
icons: [
dbId: 1942, label: '300°C', css: 'fas fa-thermometer-full' ,
dbId: 10876, label: '356°C', css: 'fas fa-thermometer-full' ,
dbId: 2648, label: '450°C', css: 'fas fa-thermometer-empty' ,
dbId: 2228, css: 'fas fa-exclamation-triangle' ,
],
onClick: (id) =>
viewers.select(id);
viewers.utilities.fitToView();
switch (id)
case 2228:
alert('Sensor offline');
)
var options =
env: 'AutodeskProduction',
api: 'derivativeV2', // for models uploaded to EMEA change this option to 'derivativeV2_EU'
getAccessToken: function(onTokenReady)
var token = 'eyJhbGciOiJIUzI1NiIsImtpZCI6Imp3dF9zeW1tZXRyaWNfa2V5In0.eyJzY29wZSI6WyJjb2RlOmFsbCIsImRhdGE6d3JpdGUiLCJkYXRhOnJlYWQiLCJidWNrZXQ6Y3JlYXRlIiwiYnVja2V0OmRlbGV0ZSIsImJ1Y2tldDpyZWFkIl0sImNsaWVudF9pZCI6Ikp2Vk40bzdBQ0V0ZE81T***Z21QMk9WM1RoNFJnRW54IiwiYXVkIjoiaHR0cHM6Ly9hdXRvZGVzay5jb20vYXVkL2p3dGV4cDYwIiwianRpIjoiMkhNbElFTnhpVEthb3VueXpPN2NTUVNFeDhvMWJDWnlDYWs5WGVEM2c5V0xjbldRY3gwdXRsendhcG1tS3lkRyIsImV4cCI6MTU5MTE4NjIyN30.wmYOe6nZEo9IpWxVLtF1E6FUR4WRjNgF4BjNshzCZvI';
var timeInSeconds = 3600; // Use value provided by Forge Authentication (OAuth) API
onTokenReady(token, timeInSeconds);
;
Autodesk.Viewing.Initializer(options, function()
var startedCode = viewer.start();
if (startedCode > 0)
console.error('Failed to create a Viewer: WebGL not supported.');
return;
console.log('Initialization complete, loading a model next...');
);
var documentId = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6ZmFjaWxpb25ld2NsaWVudGJ1Y2tldC9yYWNfYWR2YW5jZWRfc2FtcGxlX3Byb2plY3QucnZ0';
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, this.onDocumentLoadFailure);
function onDocumentLoadSuccess(viewerDocument)
var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
viewer.loadDocumentNode(viewerDocument, defaultModel);
viewer.addEventListener( Autodesk.Viewing.SELECTION_CHANGED_EVENT, event=>
console.log(event.dbIdArray.length);
)
,
onDocumentLoadFailure()
console.error('Failed fetching Forge manifest');
,
</script>
<style>
body
margin: 0;
#forgeViewer
width: 100%;
height: 100%;
margin: 0;
background-color: #F0F8FF;
</style>
/pages/extensions/IconMarkupExtension.js
class IconMarkupExtension extends Autodesk.Viewing.Extension
constructor(viewer, options)
super(viewer, options);
this._group = null;
this._button = null;
this._icons = options.icons || [];
load()
const updateIconsCallback = () =>
if (this._enabled)
this.updateIcons();
;
this.viewer.addEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT, updateIconsCallback);
this.viewer.addEventListener(Autodesk.Viewing.ISOLATE_EVENT, updateIconsCallback);
this.viewer.addEventListener(Autodesk.Viewing.HIDE_EVENT, updateIconsCallback);
this.viewer.addEventListener(Autodesk.Viewing.SHOW_EVENT, updateIconsCallback);
return true;
unload()
// Clean our UI elements if we added any
if (this._group)
this._group.removeControl(this._button);
if (this._group.getNumberOfControls() === 0)
this.viewer.toolbar.removeControl(this._group);
return true;
onToolbarCreated()
// Create a new toolbar group if it doesn't exist
this._group = this.viewer.toolbar.getControl('customExtensions');
if (!this._group)
this._group = new Autodesk.Viewing.UI.ControlGroup('customExtensions');
this.viewer.toolbar.addControl(this._group);
// Add a new button to the toolbar group
this._button = new Autodesk.Viewing.UI.Button('IconExtension');
this._button.onClick = (ev) =>
this._enabled = !this._enabled;
this.showIcons(this._enabled);
this._button.setState(this._enabled ? 0 : 1);
;
this._button.setToolTip(this.options.button.tooltip);
this._button.container.children[0].classList.add('fas', this.options.button.icon);
this._group.addControl(this._button);
showIcons(show)
console.log('entering into showIcons')
const $viewer = $('#' + this.viewer.clientContainer.id + ' div.adsk-viewing-viewer');
// remove previous...
$('#' + this.viewer.clientContainer.id + ' div.adsk-viewing-viewer label.markup').remove();
if (!show) return;
// do we have anything to show?
if (this._icons === undefined || this.icons === null) return;
// do we have access to the instance tree?
const tree = this.viewer.model.getInstanceTree();
if (tree === undefined) console.log('Loading tree...'); return;
const onClick = (e) =>
if (this.options.onClick)
this.options.onClick($(e.currentTarget).data('id'));
;
this._frags =
for (var i = 0; i < this._icons.length; i++)
// we need to collect all the fragIds for a given dbId
const icon = this._icons[i];
this._frags['dbId' + icon.dbId] = []
// create the label for the dbId
const $label = $(`
<label class="markup update" data-id="$icon.dbId">
<span class="$icon.css"> $icon.label || ''</span>
</label>
`);
$label.css('display', this.viewer.isNodeVisible(icon.dbId) ? 'block' : 'none');
$label.on('click', onClick);
$viewer.append($label);
// now collect the fragIds
const _this = this;
tree.enumNodeFragments(icon.dbId, function (fragId)
_this._frags['dbId' + icon.dbId].push(fragId);
_this.updateIcons(); // re-position of each fragId found
);
getModifiedWorldBoundingBox(dbId)
var fragList = this.viewer.model.getFragmentList();
const nodebBox = new THREE.Box3()
// for each fragId on the list, get the bounding box
for (const fragId of this._frags['dbId' + dbId])
const fragbBox = new THREE.Box3();
fragList.getWorldBounds(fragId, fragbBox);
nodebBox.union(fragbBox); // create a unifed bounding box
return nodebBox
updateIcons()
for (const label of $('#' + this.viewer.clientContainer.id + ' div.adsk-viewing-viewer .update'))
const $label = $(label);
const id = $label.data('id');
// get the center of the dbId (based on its fragIds bounding boxes)
const pos = this.viewer.worldToClient(this.getModifiedWorldBoundingBox(id).center());
// position the label center to it
$label.css('left', Math.floor(pos.x - $label[0].offsetWidth / 2) + 'px');
$label.css('top', Math.floor(pos.y - $label[0].offsetHeight / 2) + 'px');
$label.css('display', this.viewer.isNodeVisible(id) ? 'block' : 'none');
Autodesk.Viewing.theExtensionManager.registerExtension('IconMarkupExtension', IconMarkupExtension);
我在控制台中没有收到任何错误。在使用 console.log 进行调试时发现它正在进入 showIcons 函数。但是不知道我是否必须对此进行一些更改才能使其正常工作。给出的 dbId 是正确的，它存在于文件中。
提前致谢。
【问题讨论】：
要添加更多内容，我尝试记录此输出，还注意到这些值是在扩展内设置的。附上截图，ibb.co/zXhtFxx 【参考方案1】：您是否应用了正确显示图标所需的 CSS？他们可以找到here
因为我在您发布的代码的样式块中看不到那些...
为了进一步检查标签是否被渲染到浏览器的开发工具中的视口进行故障排除？如果他们正在检查他们的样式以查看他们是否被遮挡或定位在视口之外......
【讨论】：
如何在 Autodesk Forge 中动态更新 THREE.js PointCloud 覆盖
】如何在AutodeskForge中动态更新THREE.jsPointCloud覆盖【英文标题】：HowtodynamicallyupdateTHREE.jsPointCloudoverlayinAutodeskForge【发布时间】：2019-12-0507:58:21【问题描述】：我正在为Autodeskforge开发一个标记扩展。我希望能够单击一个位置，并... 查看详情
如何将 Autodesk Forge 扩展与 React.js 一起使用？
】如何将AutodeskForge扩展与React.js一起使用？【英文标题】：HowtouseAutodeskForgeExtensionswithReact.js?【发布时间】：2020-12-0103:31:32【问题描述】：我想将我的Forge扩展添加到React。例如，我使用ForgeRCDB存储库，但我无法理解这个项目的结... 查看详情
在three.js / Autodesk 3D Viewer（Autodesk Forge Viewer）中调整对象的大小
】在three.js/Autodesk3DViewer（AutodeskForgeViewer）中调整对象的大小【英文标题】：resizeanobjectinthree.js/Autodesk3DViewer(AutodeskForgeViewer)【发布时间】：2020-01-1623:36:27【问题描述】：如何调整对象的大小、移动或平移对象？这个变化让我不... 查看详情
在 Autodesk forge 查看器中升级三个 js 版本
】在Autodeskforge查看器中升级三个js版本【英文标题】：upgradethreejsversioninautodeskforgeviewer【发布时间】：2021-03-0902:03:42【问题描述】：我正在寻找在幕后升级Autodeskforge中使用的三个js，升级的原因是我正在尝试使用this库，这需要... 查看详情
如何在 Forge Viewer 中激活“Autodesk.MemoryLimited”扩展？
】如何在ForgeViewer中激活“Autodesk.MemoryLimited”扩展？【英文标题】：Howtoactive"Autodesk.MemoryLimited"ExtensioninForgeViewer?【发布时间】：2021-03-0920:52:56【问题描述】：我在本地环境forge查看器中加载大型模型时遇到问题。我已经... 查看详情
Autodesk forge 查看器 js 依赖项存储在本地项目中
】Autodeskforge查看器js依赖项存储在本地项目中【英文标题】：Autodeskforgeviewerjsdependenciesstoringinlocalproject【发布时间】：2018-12-2319:54:34【问题描述】：我正在使用angular和typescript使用Autodesk查看器。我正在使用https://developer.api.autodes... 查看详情
Dashboard.js Autodesk Forge
】Dashboard.jsAutodeskForge【英文标题】：【发布时间】：2021-07-0304:44:04【问题描述】：我正在尝试从BIM360Construction云Revit文件创建仪表板面板请指导我如何将属性更改为类别？以及如何创建除“条形图”和“饼图”之外的不同类型的... 查看详情
如何将 Autodesk Forge 查看器扩展添加到 React？
】如何将AutodeskForge查看器扩展添加到React？【英文标题】：HowtoaddAutodeskForgeViewerExtensionstoReact?【发布时间】：2020-10-0413:03:26【问题描述】：我想将我的Autodeskforge查看器扩展添加到React。有可能吗？我该怎么做？现在我有一个在Rea... 查看详情
如何在 Forge Autodesk 中仅显示特定视图
】如何在ForgeAutodesk中仅显示特定视图【英文标题】：HowtoshowonlyspecificaviewinForgeAutodesk【发布时间】：2020-12-2219:14:23【问题描述】：我已经在Autodesk的ForgeApi上工作了几天，我最近根据要求在实施方面做得很好我正在尝试渲染特定/... 查看详情
你如何在亚马逊上部署伪造查看器？ #autodesk #forge 查看器
】你如何在亚马逊上部署伪造查看器？#autodesk#forge查看器【英文标题】：howdoyoudeployforgevieweronamazon?#autodesk#forgeviewer【发布时间】：2021-06-1010:00:47【问题描述】：我是锻造新手。我已经设置好aws并拥有accessKeyId和secretAccessKey。当我... 查看详情
如何使用 OSS、Autodesk forge 获得 URN
】如何使用OSS、Autodeskforge获得URN【英文标题】：HowDoIgetURNwithOSS,Autodeskforge【发布时间】：2017-12-3118:52:26【问题描述】：我已通过developer.autodesk.com了解有关Forge平台的更多信息，但我仍在寻找获取obj文件URN的方法。我只需要一个... 查看详情
如何从 Autodesk Forge 获取 node.js axios 中的缩略图
】如何从AutodeskForge获取node.jsaxios中的缩略图【英文标题】：Howgetathumbnailinnode.jsaxiosfromAutodeskForge【发布时间】：2020-07-0619:48:22【问题描述】：如何获取和解析翻译后的PNG缩略图？我尝试了this，但它不起作用。后端：get_thumbnail=(ac... 查看详情
Autodesk Forge 三个 JS 版本支持 ShapeBufferGeometry
】AutodeskForge三个JS版本支持ShapeBufferGeometry【英文标题】：AutodeskForgeThreeJSversiontosupportShapeBufferGeometry【发布时间】：2018-01-1418:47:54【问题描述】：我们目前正尝试在Autodesk查看器中即时绘制3D形状。我们通过向底层Three.JS引擎注入... 查看详情
如何在对象上调整大小 - Autodesk Forge Viewer
】如何在对象上调整大小-AutodeskForgeViewer【英文标题】：Howtoresizeonobject-AutodeskForgeViewer【发布时间】：2020-01-1801:59:30【问题描述】：如何更改对象的大小？我需要改变物体的高度例如，我们需要改变门或窗帘的高度在这段代码中... 查看详情
如何在 Autodesk Forge 查看器中更改选择颜色？
】如何在AutodeskForge查看器中更改选择颜色？【英文标题】：Howdoyouchangeselectioncolorintheautodeskforgeviewer?【发布时间】：2019-07-1908:50:50【问题描述】：在ForgeViewerv3中，我们像这样设置选择的颜色：onRequestClick(e)constTHREE_RED_COLOR=newTHREE.... 查看详情
如何在聚合模型 Autodesk Forge 上选择多个元素
】如何在聚合模型AutodeskForge上选择多个元素【英文标题】：HowtoselectmultielementsonaggregatemodelAutodeskForge【发布时间】：2020-02-1018:36:53【问题描述】：我在Viewer中加载了2个模型，当我尝试遍历这些模型并使用此方法select(dbids,model,sele... 查看详情
如何克服 Autodesk Forge Viewer 中的窗口选择限制？
】如何克服AutodeskForgeViewer中的窗口选择限制？【英文标题】：HowtoovercometheWindowSelectionlimitationintheAutodeskForgeViewer?【发布时间】：2021-10-2908:58:03【问题描述】：我刚刚在我的Forge应用程序中实现了一个自定义窗口选择“https://forge.a... 查看详情
如何使用 BIM 360 Web 查看器 (Autodesk Forge)
】如何使用BIM360Web查看器(AutodeskForge)【英文标题】：HowtousetheBIM360WebViewer(AutodeskForge)【发布时间】：2021-02-1712:05:28【问题描述】：如何使用本文中提到的BIM360Viewer(https://forge.autodesk.com/blog/bim-360-viewer-vs-forge-viewer)？我试图在Autodeskf... 查看详情