Viewer

最近，我收到一个客户的需求，希望可以把Viewer的相机状态通过Revit API还原到Revit里。所以我们来看看要如何实现这个要求。在开始之前，你要先知道一些有关于Revit相机的事情: Revit预设的相机FOV值大约为50度，焦距为38.6mm，片幅尺寸为36mm。Revit默认的渲染图片尺寸为6英吋。为了调整Revit相机的FOV值，我们必须利用修改3D视图的裁剪尺寸来完成。因为Revit API没有直接的方法可以修改相机的FOV值。Viewer的相机视角比Revit的相机视角宽。注意：上述关于Revit的相机参数皆为我反复测试得出，Revit没有确切的值，即皆为近似值。 好的，我们转换过程的总思路如下（注意：接下来的步骤适用透视相机模式）: Forge Viewer的部分： 从当前视图的 Viewer 相机获取焦距，目标，位置和上向量。 调用 Viewer3D#getFocalLength 以取得焦距。调用 Viewer3D#getState({ viewport: true }) 以取得当前视图必要的相机状态，例如： { "viewport": { "name": "", "eye": [ -14.870469093323, 36.571562767029, -1.2129259109497 ], "target": [ -14.770469665527, 36.571967124939, -1.2129259109497 ], "up": [ 0, 0, 1 ], "worldUpVector": [ 0, 0, 1 ], "pivotPoint": [ -14.770469665527, 36.571967124939, -1.2129259109497 ], "distanceToOrbit": 0.10000024532334, "aspectRatio": 3.1789297658863, "projection": "perspective", "isOrthographic": false, "fieldOfView": 90.68087674208 }}获取当前加载模型的 global offset（注意：Viewer 默认使用 global offset 来调整加载模型的位置，以避免浮点运算精度和 z-buffer fighting的问题）： ...

不久前，我收到一个关于如何在不加载任何模型的情况下初始化Forge viewer的请求。据我所知，viewer的一些初始化设定是在加载模型时才被决定的，所以基本上是无法以这种方式初始化viewer的。然而，我在StackOverflow上针对此需求提供了一种暂时的解决方法: 加载一个包含两个极小点的虚拟模型(例如放置在bounding box的最小点和最大点)，让Viewer看起来像没有加载任何模型。若要加载新的模型，必须先卸除此虚拟模型，并使用Viewer3D.tearDown()释放一些内存。现在让我们来看看该如何完成(以下步骤使用了Revit的通用族样板和3D视图的bounding box)： 一、我们必须先建立一个幽灵点群代表上述提到的极小点。它的外观如下: 二、放置两个幽灵点族群的实体，并将其放置在一个非常非常接近Revit3D视图默认bounding box最大和最小点的位置，如下图所示： 为了简化工作，我写了一段Dynamo的程序来加快速度:然后根据我测试的结果，需要将这两个幽灵点的偏移调整为+30000mm（最大点）和-30000mm（最小点）。 （如果这两个点太靠近3D视图bounding box的最大点或最小点，它们会在Forge转档之后消失。） 三、将此Revit档案上传到Forge 服务器转档，并像往常一样使用viewer打开，您将会看到空的viewer。以下是视频演示:https://www.youtube.com/watch... 是不是很簡單呢？更多程序代码的细节请查看这里的源码和范例：https://github.com/yiskang/fo...

这是一个常被提起的问题，第一次是在「添加自定义属性到Viewer的属性面板」这篇博客被提出，但因自V4开始，Viewer的CSS有重大变更，导致该方法在新版的 Viewer已无法使用。另一个相关的是「Viewer属性检查器」这篇博客，其是通过建立一个工具栏按钮的方式来新增面板，它是可以正常运作的，但它的做法并非取代现有的属性面板，不在今天要讨论的范围。 那我们该怎么做才能取代现有的属性面板呢? 事实上，我们有一个接受内建面板 ViewerPropertyPanel 对象的方法叫 viewer.setPropertyPanel 可以使用。因此，最简单的操作方式是使用 setPropertyPanel 这个方法，再替换 setProperties 这方法的内容。为了新增更多我们想要的属性数据，让我们也复写setNodeProperties 这个接受dbId作为函数变量的方法，以下是部分程序代码: // *******************************************// Custom Property Panel// *******************************************function CustomPropertyPanel(viewer, options) { this.viewer = viewer; this.options = options; this.nodeId = -1; // dbId of the current element showing properties Autodesk.Viewing.Extensions.ViewerPropertyPanel.call(this, this.viewer);}CustomPropertyPanel.prototype = Object.create(Autodesk.Viewing.Extensions.ViewerPropertyPanel.prototype);CustomPropertyPanel.prototype.constructor = CustomPropertyPanel;CustomPropertyPanel.prototype.setProperties = function (properties, options) { Autodesk.Viewing.Extensions.ViewerPropertyPanel.prototype.setProperties.call(this, properties, options); // add your custom properties here // for example, let's show the dbId and externalId var _this = this; // dbId is right here as nodeId this.addProperty('dbId', this.nodeId, 'Custom Properties'); // externalId is under all properties, let's get it! this.viewer.getProperties(this.nodeId, function(props){ _this.addProperty('externalId', props.externalId, 'Custom Properties'); })}CustomPropertyPanel.prototype.setNodeProperties = function (nodeId) { Autodesk.Viewing.Extensions.ViewerPropertyPanel.prototype.setNodeProperties.call(this, nodeId); this.nodeId = nodeId; // store the dbId for later use};为了方便使用，我们将之包装在Viewer扩展中。这里有篇博客「扩展概念：工具栏与面板」在讨论扩充展架的基本概念，这里我们只使用它创建扩展的部分(不是工具栏或面板的部分)。以下扩展代码使用刚才建立的面板，并通过 setPropertyPanel 使之与 Viewer 连结。(这个扩充将负责注册和取消注册我们的自定义属性面板。) ...

vue2-viewervue2-viewer 是一款强大的图像浏览插件，可以实现图像的放大预览，旋转，任意比例放大和缩小等功能vue2-viewer 是viewer.js vue的实现，效果以及样式完全移植自viewer.js关于viewer.js可以参考链接[http://fengyuanchen.github.io…]插件中所有的效果均大量地使用了css3的新特性替换了viewer.js中的js动画，所以vue2-viewer主要实用场景是现代浏览器中。使用文档安装npm install –save vue2-viewer在main.js中引入并使用插件import ImageViewer from ‘vue2-viewer’;Vue.use(ImageViewer);插件会在全局注册vue-viewer组件使用组件vue2-viewer 提供两种使用模式，单图片模式和多图列表模式。单图片模式props参数说明类型必须thumb要显示的小图的链接stringtruefull点击放大后的大图链接stringtrue示例：<vue-viewer style=“display: inline-block” :thumb=“image” :full=“image”></vue-viewer><script>export default { name: ‘app’, data () { return { msg: ‘vue2-viewer-test’, image: ‘https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3427452369,2586833644&fm=173&app=25&f=JPEG?w=580&h=347&s=908FF35A050626E2428C001E030090D6', } }}</script>效果展示：多图片模式props参数说明类型必须thumb要显示的小图列表的链接数组arraytruefull点击放大后的大图的链接数组arraytruelist-ul-class默认小图的列表外层ul的自定义class 用于自定义列表的样式，包括ul内部的slot的内容的样式都可以通过这个方式自定义stringfalseScoped Slotname说明~列表中的每一个元素中除了默认图以外的内容示例：<vue-viewer multiple :thumb=“imageList” list-ul-class=“image-list” :full=“imageList”> <!–在列表中加入右上角删除按钮–> <template slot-scope=“target”> <span class=“icon-remove” @click.stop=“onRemove(target.index)” style="">&times;</span> </template></vue-viewer><script>export default { name: ‘app’, data () { return { msg: ‘vue2-viewer-test’, imageList: [ ‘https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550224739247&di=512032866bea6329b1e46c735d50ac8b&imgtype=0&src=http%3A%2F%2Fimglf2.ph.126.net%2FdHH6OM2rD8JucPGAotUfag%3D%3D%2F6608219914074710297.jpg’, ‘https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=488030022,1694816207&fm=173&app=25&f=JPEG?w=580&h=347&s=A08FB35A5E0616C664F5631C030010D6’, ‘https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2574767313,3929397124&fm=173&app=25&f=JPEG?w=580&h=868&s=B784EEA3460236E17A1F137F0300A058’ ] } }, methods: { onRemove(index) { alert(index); } }}</script><style>.image-list{ margin: 0; padding: 0}.image-list li { display: inline-block; margin: 0 10px; list-style: none; position: relative;}.image-list li img { box-shadow: 0 0 5px #333;}.icon-remove{ width: 20px; height:20px; text-align: center; line-height: 20px; background:#f33; position:absolute; top:-10px; right:-10px; border-radius: 10px; cursor: pointer; color:#fff;}a { color: #42b983;}</style>效果展示： ...

最近有两个不同的台湾客户都反映材质图档消失的问题。当Forge Viewer加载模型时，他们看不到自定义的材质图档。经过一番研究，我发现这个问题相当容易，本文章将会以简单的方式描述该如何解决此问题，就让我们开始吧!在开始之前，有一些关于Revit材质转档的事你必须先知道:Revit 3D视图中的视觉樣式必须是真实。以下项目应仅包含ASCII字符或应以ASCII字符命名：材质图档的文档名，例如: red-brick.jpg。材质图档路径(即为Revit材质浏览器中自定义材质的外观选项中的材质图档)，例如:C:adntexturesred-brick.jpg。RVT文档名(Revit项目名称)。所有被使用的自定义材质图档应该要跟RVT文档放在一起，即JPG、PNG和RVT的所有文档应放置于文件夹的同一层。所有材质图档和RVT档案应该要被打包成一个 ZIP 压缩包里。让我们开始准备要转换的模型吧!一、 将3D视图中的视觉樣式切换成真实:二、 确定所有文档名及路径皆为ASCII字符:三、 选择视图并加入Revit的发布设置(Publish Settings)窗口的视图集中:四、 将所有自定义义材质图档跟RVT档案放在同一层文件夹:五、 将步骤4打包成 ZIP 压缩包:六、 将ZIP上传到Forge OSS 桶(Bucket)并使用此设置开始文档转换作业：{ “input”: { “urn”: “{BASE64_URN_OF_THE_ZIP}”, //!<<< e.g. dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6bXlidWNrZXQvRm9yZ2UgVGV4dHVyZSBEZW1vLnppcA “compressedUrn”: true, “rootFilename”: “{THE_HOST_RVT_FILENAME}” //!<<< e.g. adn-brick-test.rvt }, “output”: { “formats”: [ { “type”: “svf”, “views”: [ “2d”, “3d” ] } ] } }七、 在Forge Viewer上加载转换好的模型，并会看到屏幕上的自定义材质：此篇文章同步发表在 Forge 官方博客：https://forge.autodesk.com/bl…

最近一些Forge客户都在询问我同一个的问题，他们希望将Revit的网格呈现在viewer中，藉此让我有机会来完成这件事，并将它记录在本文章里，就让我们开始吧!在开始之前，有件事你必须先知道:由于在Revit里格子线只能在2D视图(例如平面图、立面图、表单等等)中显示，并不会在3D视图中被看见。因此，我们也无法在ForgeViewer的3D视图中看到这些格子线，网格会在模型转文件时被忽略。据我所知，这是目前的限制。但是，这并非完全不可能。为了实现这一点，我们可以利用Rvit族群的通用线基准的模型样板创建3D格子线族，以下是他的样子：在之后，我们可以将此族组件放置在平面图中Revit格子线的位置上：为了加快速度，我写了一个Dynamo脚本来正确放置3D格子线：下图是此Dynamo脚本的运行结果：注意，此脚本将获取Revit中所有网格的位置，然后仅将3D网格放置在所选楼层中；如果您必须在多个楼层显示3D格子线，请修改此脚本或编写您自己的Revit插件以实现它。现在准备将此RVT模型上传到Forge进行转档。 只需等待转档完成，然后您就会看到格子线！此篇文章同步发表在 Forge 官方博客：https://forge.autodesk.com/bl…