如何在Autodesk Forge中設置Skybox

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)
  }
}

正如我在此處創建的實時演示中所見，這對我而言很好。

您需要注意的一件事是，查看器使用基於加載的模型邊界框創建的近/遠剪切平面。 您的Skybox可能比模型大得多，因此一種解決方法是加載更大范圍的第二個模型，以便場景修剪平面自動更新。 第二個模型僅包含放置在所需范圍內的微小立方體，例如[（-500，-500，-500），（500，500，500）]。

使用skybox的擴展程序的來源在這里： Viewing.Extension.Showcase 。