0

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

Andrew Myers
  • 2,754
  • 5
  • 32
  • 40
weijie
  • 54
  • 5
  • 1
    please add what you have tried so far. Please see this first [how-to-ask](https://stackoverflow.com/help/how-to-ask) – always-a-learner Jul 14 '17 at 03:23
  • In addition to the previous comment, I would add that the Forge viewer is using a customized version of three.js, but most of what you can do in three.js is doable with the viewer. A skybox is basically is set of textured custom meshes added to the scene. Take a look at those sample for custom meshes and materials: https://github.com/Autodesk-Forge/library-javascript-viewer-extensions/tree/master/src/Autodesk.ADN.Viewing.Extension.MeshImporter then https://github.com/Autodesk-Forge/library-javascript-viewer-extensions/tree/master/src/Autodesk.ADN.Viewing.Extension.Material – Felipe Jul 14 '17 at 04:33
  • Here is a cool skybox demo for three.js: https://stemkoski.github.io/Three.js/Skybox.html – Felipe Jul 14 '17 at 04:34
  • I edited it again,I showed my code and my scene – weijie Jul 14 '17 at 06:02

1 Answers1

1

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.

Felipe
  • 4,325
  • 1
  • 14
  • 19
  • Link to source of extensions - show 404. is still available somewhere? – Mikhail Kh Oct 07 '21 at 11:06
  • 1
    Demo: https://forge-rcdb.autodesk.io/configurator?id=59687af5fcc3fea2ac9db16c. Source: https://github.com/Autodesk-Forge/forge-rcdb.nodejs/tree/master/src/client/components/Viewer/Extensions/Dynamic/Viewing.Extension.Showcase. – Felipe Oct 08 '21 at 07:10