BabylonJs Scene - PBR - Example

app.js

var app = {
  
  init() {
    this.createScene();
  },

  createScene() {

      this.scene = new BABYLON.Scene(this.engine);
      this.scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);

      this.camera = new BABYLON.ArcRotateCamera("Camera", 1.5, 1, 100, BABYLON.Vector3.Zero(), this.scene);
      this.camera.setTarget(BABYLON.Vector3.Zero());
      this.camera.attachControl(this.$refs.sceneCanvas, false);

      var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), this.scene);
      light.groundColor = new BABYLON.Color3(0.2, 0.2, 0.2);
      light.intensity = 1.3;

      var envTexture = new BABYLON.CubeTexture(App.url + '/objects/skybox/skybox', this.scene);

      var hdrSkybox = BABYLON.Mesh.CreateBox("hdrSkyBox", 1000.0, this.scene);
      var hdrSkyboxMaterial = new BABYLON.PBRMaterial("skyBox", this.scene);
      hdrSkyboxMaterial.backFaceCulling = false;
      hdrSkyboxMaterial.reflectionTexture = envTexture.clone();
      hdrSkyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
      hdrSkyboxMaterial.microSurface = 1.0;
      hdrSkyboxMaterial.disableLighting = true;
      hdrSkybox.material = hdrSkyboxMaterial;

      var loader = new BABYLON.AssetsManager(this.scene);

      this.mainObject = BABYLON.Mesh.CreateBox('mainObject', 1.0, this.scene);
      this.mainObject.visibility = 0;

      var object = loader.addMeshTask('object', '', '', App.url + '/objects/models/mug/model.obj');

      object.onSuccess = function(t) {
          t.loadedMeshes.forEach(function(mesh, index){
              var affectedMesh = t.loadedMeshes[index];

              // PBR
              affectedMesh.material = new BABYLON.PBRMetallicRoughnessMaterial("pbr" + index, this.scene);
              affectedMesh.material.baseColor = new BABYLON.Color3(1, 1, 1);
              affectedMesh.material.metallic = 0.05;
              affectedMesh.material.roughness = 0.15;
              affectedMesh.material.environmentTexture = envTexture.clone();

              affectedMesh.parent = this.mainObject;

          }.bind(this));
      }.bind(this)

      loader.load();

  },
  
}

app.init();