如何在 Autodesk Forge 中设置天空盒
Posted
技术标签:
【中文标题】如何在 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/….以上是关于如何在 Autodesk Forge 中设置天空盒的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Forge Viewer 中激活“Autodesk.MemoryLimited”扩展?
如何克服 Autodesk Forge Viewer 中的窗口选择限制?
如何使用 BIM 360 Web 查看器 (Autodesk Forge)