如何在 Autodesk Forge 中设置天空盒

     2023-03-16     33

关键词:

【中文标题】如何在 Autodesk Forge 中设置天空盒【英文标题】:How to set up skybox in Autodesk Forge 【发布时间】:2017-12-18 23:49:17 【问题描述】:

我想在我的 Forge 场景中添加一个天空盒,但 Forge 与 three.js 不同。我想知道我能为它做些什么。

我试过new THREE.CubeTextureLoader,但是Forge中的three.js没有这个功能。然后我尝试构建一个CubeGeometry,但效果不佳。

这是我的代码:

var materialArr=[];
var directions = ["aa_RT","aa_LF","aa_UP","aa_DN","aa_FR","aa_BK"]  ;
for (var i = 0; i < 6; i++)
    materialArray.push( new THREE.MeshBasicMaterial(
      map: THREE.ImageUtils.loadTexture( "lib/img/aa/"+ directions[i] + ".jpg" ),
      side: THREE.BackSide
    ));
 
var skyBoxGeom = new THREE.CubeGeometry(80,80,80);
var skyBoxMaterial = new THREE.MeshFaceMaterial(materialArr);
var skyBox = new THREE.Mesh(skyBoxGeom,skyBoxMaterial);
viewer.impl.scene.add(skyBox);

这是我的场景:

【问题讨论】:

请添加您迄今为止尝试过的内容。请先看这个how-to-ask 除了前面的评论,我要补充一点,Forge 查看器使用的是自定义版本的three.js,但是您可以在three.js 中执行的大部分操作都可以使用查看器来实现。天空盒基本上是添加到场景中的一组带纹理的自定义网格。查看自定义网格和材质的示例:github.com/Autodesk-Forge/library-javascript-viewer-extensions/… 然后github.com/Autodesk-Forge/library-javascript-viewer-extensions/… 这里是three.js的一个很酷的天空盒演示:stemkoski.github.io/Three.js/Skybox.html 我再次编辑它,我展示了我的代码和我的场景 【参考方案1】:

以下是一些用于创建适用于查看器的天空盒的代码(在 ES6 中):

export default class ViewerSkybox 
  
  constructor (viewer, options) 
    
    const faceMaterials = options.imageList.map((url) => 
      return new THREE.MeshBasicMaterial(
        map: THREE.ImageUtils.loadTexture(url),
        side: THREE.BackSide
      )
    )
    
    const skyMaterial = new THREE.MeshFaceMaterial(
      faceMaterials)
    
    const geometry = new THREE.CubeGeometry(
      options.size.x,
      options.size.y,
      options.size.z,
      1, 1, 1,
      null, true)
    
    const skybox = new THREE.Mesh(
      geometry, skyMaterial)
    
    viewer.impl.scene.add(skybox)
  

这对我来说运行良好,正如您在我创建的现场演示中看到的那样 here。

您需要注意的一件事是查看器使用基于加载的模型边界框创建的近/远剪切平面。您的天空盒可能比模型大得多,因此一种解决方法是加载具有更大范围的第二个模型,以便自动更新场景剪裁平面。第二个模型仅包含放置在所需范围内的微小立方体,例如 [(-500, -500, -500), (500, 500, 500)]。

我使用天空盒的扩展的来源在这里:Viewing.Extension.Showcase。

【讨论】:

链接到扩展源 - 显示 404。在某处仍然可用? 演示:forge-rcdb.autodesk.io/configurator?id=59687af5fcc3fea2ac9db16c。来源:github.com/Autodesk-Forge/forge-rcdb.nodejs/tree/master/src/….

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

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

如何在 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。当我... 查看详情

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

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

如何使用 OSS、Autodesk forge 获得 URN

】如何使用OSS、Autodeskforge获得URN【英文标题】:HowDoIgetURNwithOSS,Autodeskforge【发布时间】:2017-12-3118:52:26【问题描述】:我已通过developer.autodesk.com了解有关Forge平台的更多信息,但我仍在寻找获取obj文件URN的方法。我只需要一个... 查看详情

如何在对象上调整大小 - 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... 查看详情

如何动态更改球体对象的颜色(在 Autodesk forge 中使用 SceneBuilder)

】如何动态更改球体对象的颜色(在Autodeskforge中使用SceneBuilder)【英文标题】:Howtochangethecolorofsphereobjectsdynamically(usedSceneBuilderinAutodeskforge)【发布时间】:2020-09-1913:11:49【问题描述】:我正在研究PetrBroz的CustommodelsinForgeViewer博... 查看详情

如何在 Autodesk Forge Viewer 中嵌入 pdf?

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

如何检查上下文菜单是不是在 Autodesk Forge 上打开

】如何检查上下文菜单是不是在AutodeskForge上打开【英文标题】:HowtocheckifthecontextmenuisopenonAutodeskForge如何检查上下文菜单是否在AutodeskForge上打开【发布时间】:2021-11-0812:49:47【问题描述】:有什么方法可以检查上下文菜单是否... 查看详情

如何使用 Autodesk Forge 查看器离线查看模型?

】如何使用AutodeskForge查看器离线查看模型?【英文标题】:Howtoviewmodelofflineusingautodeskforgeviewer?【发布时间】:2019-05-0214:33:22【问题描述】:我也尝试过来自Git的示例项目https://github.com/Autodesk-Forge/viewer-javascript-offline.sample这也不... 查看详情

如何在 Autodesk Forge 查看器上通过拖放添加对象

】如何在AutodeskForge查看器上通过拖放添加对象【英文标题】:HowcanIaddobjectsbydraganddroponautodeskforgeviewer【发布时间】:2021-05-2720:43:51【问题描述】:如何通过拖放添加我们在查看器上生成的对象。就像在房子的墙上加一扇窗户?... 查看详情

如何使用 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 中动态更新 THREE.js PointCloud 覆盖

】如何在AutodeskForge中动态更新THREE.jsPointCloud覆盖【英文标题】:HowtodynamicallyupdateTHREE.jsPointCloudoverlayinAutodeskForge【发布时间】:2019-12-0507:58:21【问题描述】:我正在为Autodeskforge开发一个标记扩展。我希望能够单击一个位置,并... 查看详情