如何在 Autodesk Forge 中动态更新 THREE.js PointCloud 覆盖

     2023-03-16     292

关键词:

【中文标题】如何在 Autodesk Forge 中动态更新 THREE.js PointCloud 覆盖【英文标题】:How to dynamically update THREE.js PointCloud overlay in Autodesk Forge 【发布时间】:2019-12-05 07:58:21 【问题描述】:

我正在为 Autodesk forge 开发一个标记扩展。我希望能够单击一个位置,并将标记动态显示为点云。

下面是扩展的加载函数。我第一次加载点云时它可以工作,但是当我尝试向几何体添加顶点并渲染它时,新点不会出现。但是,光线投射器能够检测到该点。我知道这一点,因为当我第二次单击某个位置时,我收到一条日志,告诉我光线投射器截获了点云(即使该点未在屏幕上呈现)。

ClickableMarkup.prototype.load = function () 
    const self = this;

    /* Initizialize */
    console.log('Start loading clickableMarkup extension');
    this.camera = this.viewer.navigation.getCamera(); // Save camera instance
    console.log(this.camera);
    this.initCameraInfo(); // Populate cameraInfo array
    this.overlayManager.addScene(this.sceneName); // Add scene to overlay manager
    this.scene = this.viewer.impl.overlayScenes[this.sceneName].scene; // Save reference to the scene

    /* Create pointCloud */
    this.geometry = new THREE.Geometry();
    this.cameraInfo.forEach( function(e) 
            // console.log(`   > add $e.position`)
            self.geometry.vertices.push(e.position);
        
    );
    this.geometry.computeBoundingBox();
    // const material = new THREE.PointCloudMaterial(  size: 50, color: 0Xff0000, opacity: 100, sizeAttenuation: true  );
    const texture = THREE.ImageUtils.loadTexture(this.pointCloudTextureURL);
    this.material = new THREE.ShaderMaterial(
        vertexColors: THREE.VertexColors,
        opacity: this.prefs.POINT_CLOUD_OPACITY,
        fragmentShader: this.fragmentShader,
        vertexShader: this.vertexShader,
        depthWrite: true,
        depthTest: true,
        uniforms: 
            size: type: "f", value: self.size,
            tex: type: "t", value: texture
        
    );
    this.points = new THREE.PointCloud( this.geometry, this.material );

    /* Add the pointcloud to the scene */
    this.overlayManager.addMesh(this.points, this.sceneName); /* >>> THIS WORKS  SO IT RENDERS THE POINTCLOUD AT THE BEGINNING OF LAOD <<< */

    /* Set up event listeners */
    document.addEventListener('click', event => 
        event.preventDefault();

        this.setRaycasterIntersects(event); // Fill this.intersects with pointcloud indices that are currently selected

        if (this.intersects.length > 0) 
            console.log('Raycaster hit index: ' + this.hitIndex + JSON.stringify(this.intersects[0]));
            this.setCameraView(this.hitIndex);
         else 
            /*  >>>>  THE PROBLEM IS HERE - IT DOESN'T RENDER THE NEW POINTCLOUD POINTS <<<< */
            const mousePos = this.screenToWorld(event);
            if (mousePos)  // Only add point to scene if the user clicked on the building
                const vertexMousePos = new THREE.Vector3(mousePos.x, mousePos.y, mousePos.z);
                this.geometry.vertices.push(vertexMousePos);
                this.geometry.verticesNeedUpdate = true;
                this.geometry.computeBoundingBox();

                this.points = new THREE.PointCloud(this.geometry, this.material);
                this.overlayManager.addMesh(this.points, this.sceneName);
                this.viewer.impl.invalidate(true); // Render the scene again
            
        

    , false);

    console.log('ClickableMarkup extension is loaded!');
    return true;
;

如何渲染新的点云顶点?

【问题讨论】:

【参考方案1】:

看起来有问题的代码中可能有错字。

this.overlayManager.addMesh(this.points, 'this.sceneName');

应该是

this.overlayManager.addMesh(this.points, this.sceneName);

【讨论】:

我修正了错字,但问题仍然存在 在某处可以找到完整的代码吗?或者,您能否制作一个简单的查看器扩展程序来重现问题并在此处分享? 我在github.com/anjalee-narenthiren/PointcloudBug 上传了一个简单的项目到github。运行 index.html 文件。您必须使用 postman 获取访问密钥并更新 main.js 第 33 行的 accessToken 变量。

如何在 Forge Viewer 中激活“Autodesk.MemoryLimited”扩展?

】如何在ForgeViewer中激活“Autodesk.MemoryLimited”扩展?【英文标题】:Howtoactive"Autodesk.MemoryLimited"ExtensioninForgeViewer?【发布时间】:2021-03-0920:52:56【问题描述】:我在本地环境forge查看器中加载大型模型时遇到问题。我已经... 查看详情

如何在 Autodesk forge 查看器 setTheming 颜色方法中使用十六进制颜色代码?

】如何在Autodeskforge查看器setTheming颜色方法中使用十六进制颜色代码?【英文标题】:HowcanIusehexadecimalcolorcodeinautodeskforgeviewersetThemingcolormethod?【发布时间】:2020-09-2415:38:53【问题描述】:我有一些从API动态返回的颜色代码。我想... 查看详情

如何在 nuxt js Autodesk forge 查看器中使用 IconMarkupExtension?

】如何在nuxtjsAutodeskforge查看器中使用IconMarkupExtension?【英文标题】:HowtousetheIconMarkupExtensioninnuxtjsautodeskforgeviewer?【发布时间】:2020-09-2202:21:52【问题描述】:我试图按照示例使用IconMarkupExtension,https://forge.autodesk.com/blog/placing-c... 查看详情

如何在 Autodesk Forge 查看器中更改选择颜色?

】如何在AutodeskForge查看器中更改选择颜色?【英文标题】:Howdoyouchangeselectioncolorintheautodeskforgeviewer?【发布时间】:2019-07-1908:50:50【问题描述】:在ForgeViewerv3中,我们像这样设置选择的颜色:onRequestClick(e)constTHREE_RED_COLOR=newTHREE.... 查看详情

如何在 Autodesk Forge 中设置天空盒

】如何在AutodeskForge中设置天空盒【英文标题】:HowtosetupskyboxinAutodeskForge【发布时间】:2017-12-1823:49:17【问题描述】:我想在我的Forge场景中添加一个天空盒,但Forge与three.js不同。我想知道我能为它做些什么。我试过newTHREE.CubeTex... 查看详情

Autodesk forge 在 Forge Configurator 发明者中自定义转换对象

】Autodeskforge在ForgeConfigurator发明者中自定义转换对象【英文标题】:Autodeskforgetranslateobjectcustominforgeconfiguratorinventor【发布时间】:2021-08-0120:35:27【问题描述】:我想自定义翻译forgeconfiguratorinventor中的模型。该模型将是在更新过... 查看详情

如何在 Autodesk Forge Viewer 中嵌入 pdf?

】如何在AutodeskForgeViewer中嵌入pdf?【英文标题】:HowtoembedapdfintheAutodeskForgeViewer?【发布时间】:2017-11-2912:30:45【问题描述】:我目前无法开始编写将查看器转换为pdf视图的扩展程序。或多或少,扩展按钮在单击/激活时,会使查... 查看详情

如何在 Typescript 中更改 Autodesk Forge Viewer 标记扩展中的编辑模式?

】如何在Typescript中更改AutodeskForgeViewer标记扩展中的编辑模式?【英文标题】:HowtochangeEditModeinAutodeskForgeViewerMarkupExtensioninTypescript?【发布时间】:2020-07-2813:00:48【问题描述】:我一直在尝试在TypescriptforAutodeskForgeviewerv6中实现标... 查看详情

如何使用 Autodesk Forge Viewer 在 PDF 文件中添加 Puspin

】如何使用AutodeskForgeViewer在PDF文件中添加Puspin【英文标题】:HowtoaddPuspininPDFfilewithAutodeskForgeViewer【发布时间】:2020-04-0622:20:47【问题描述】:我们正在为我们的应用程序集成AutodeskForgeViewer,就像在BIM360中一样,我们需要使用图... 查看详情

在 AutoDesk Forge 中如何使用 C# html 编码来旋转组件

】在AutoDeskForge中如何使用C#html编码来旋转组件【英文标题】:InAutoDeskForgehowtospinacomponentbyusingC#htmlcoding【发布时间】:2019-08-2418:35:31【问题描述】:您能否解释一下在Autodeskforge中旋转组件(节点)的c#html代码。我正在使用dotnetco... 查看详情

Autodesk Forge 中自定义模型的动态位置

】AutodeskForge中自定义模型的动态位置【英文标题】:DynamicpositionofcustommodelinAutodeskForge【发布时间】:2021-10-0714:43:55【问题描述】:我想构建一个连接到BIM360的查看器锻造。THREE.js中的一个新对象形式的附加功能可以跟踪GPS位置... 查看详情

如何在对象上调整大小 - Autodesk Forge Viewer

】如何在对象上调整大小-AutodeskForgeViewer【英文标题】:Howtoresizeonobject-AutodeskForgeViewer【发布时间】:2020-01-1801:59:30【问题描述】:如何更改对象的大小?我需要改变物体的高度例如,我们需要改变门或窗帘的高度在这段代码中... 查看详情

如何在聚合模型 Autodesk Forge 上选择多个元素

】如何在聚合模型AutodeskForge上选择多个元素【英文标题】:HowtoselectmultielementsonaggregatemodelAutodeskForge【发布时间】:2020-02-1018:36:53【问题描述】:我在Viewer中加载了2个模型,当我尝试遍历这些模型并使用此方法select(dbids,model,sele... 查看详情

如何在 Autodesk forge 2d 查看器中确定对象的起点和终点

】如何在Autodeskforge2d查看器中确定对象的起点和终点【英文标题】:Howtodeterminestartandendpointofanobjectinautodeskforge2dviewer【发布时间】:2021-02-2110:31:54【问题描述】:我正在寻找一种将我的坐标从2D模型传递到3D模型的方法。我遇到... 查看详情

Autodesk Forge 检索/更新自定义属性

】AutodeskForge检索/更新自定义属性【英文标题】:AutodeskForgeretrieve/updatecustomattributes【发布时间】:2019-04-0515:01:59【问题描述】:我们正在使用BIM360文档,并且我们定义了几个自定义属性来标记上传到docs文件夹中的那些文件。现... 查看详情

Autodesk Forge 模型衍生 API:在 Autodesk Forge 衍生子项中找不到“图形”角色

】AutodeskForge模型衍生API:在AutodeskForge衍生子项中找不到“图形”角色【英文标题】:AutodeskForgeModelDerivativeAPI:Can\'tnotfind\'graphics\'roleinautodeskforgederivativeschildren【发布时间】:2020-11-1010:20:22【问题描述】:我想将.rvt文件转换为.svf... 查看详情

如何使用 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... 查看详情

如何将 Autodesk Forge Viewer 嵌入移动应用程序?

】如何将AutodeskForgeViewer嵌入移动应用程序?【英文标题】:HowtoembedAutodeskForgeViewerwithmobileapp?【发布时间】:2020-02-2022:05:50【问题描述】:我正在使用ionic和Angular开发一个可以在forge查看器中显示pdf、图像或dwg文件的移动应用程... 查看详情