如何在 Autodesk Forge 中设置天空盒

Question

我想在我的 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);

这是我的场景：

Answer 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。