three.jsviewerautodesk-forge

How to set up skybox in Autodesk Forge


I want to add a skybox to my Forge scene, but Forge is different from three.js. I want to know what I can do for it.

I have tried new THREE.CubeTextureLoader, but the three.js in Forge doesn't have this function. Then I tried to build a CubeGeometry, but it did't work well.

This is my code:

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

This is my scene:

scene


Solution

  • Here is some code for creating a skybox that works for the viewer (in 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)
      }
    }
    

    This is working fine on my side, as you can see in the live demo I created here.

    enter image description here

    One thing you need to take care about is that the viewer uses near/far clipping planes which are created based on the loaded model bounding box. Your skybox is probably much bigger than the model, so one workaround is to load a second model with a much bigger extents, so the scene clipping planes are updated automatically. The second model only contains tiny cubes placed at the desired extents, for example [(-500, -500, -500), (500, 500, 500)].

    The source of my extension using the skybox is here: Viewing.Extension.Showcase.