scene.createDefaultEnvironment => TypeError: t.scenes[0] is undefined

Hey,

for a university project i wrote this website and used BabylonJS for the configurator and preview of the orders. It’s working really good, however i noticed, sometimes i can see an error in the console, tho i don’t see anything wrong in the canvas itself.

So when i select an order, it will show the preview of that order.
Sometimes when the preview is loaded, i notice this error in the console:

So this error seems to be thrown somewhere inside the scene.createDefaultEnvironment function.
This is how i construct my scene:

    async createScene() {
      this.engine = new Engine(
        this.$refs.canvas,
        true,
        { preserveDrawingBuffer: true },
        false
      );
      this.babylon.scene = new Scene(this.engine);
      var camera = new ArcRotateCamera(
        "camera",
        -Math.PI / 2,
        Tools.ToRadians(67),
        350,
        new Vector3(0, 50, 0),
        this.babylon.scene
      );
      this.scene.camera = camera;
      camera.useAutoRotationBehavior = true;
      camera.autoRotationBehavior.idleRotationSpeed = 0.25;
      camera.lowerRadiusLimit = 250;
      camera.upperRadiusLimit = 800;

      camera.attachControl(this.$refs.canvas, true);
      this.scene.highlightLayer = new HighlightLayer("hl1", this.babylon.scene);
      new HemisphericLight("light1", new Vector3(1, 1, 0), this.babylon.scene);

      this.babylon.scene.createDefaultEnvironment({
        createGround: false,
        createSkybox: true,
        skyboxSize: 1500,
        skyboxColor: new Color3(144 / 255, 202 / 255, 249 / 255),
        enableGroundMirror: false,
      });

      var defaultPipeline = new DefaultRenderingPipeline(
        "DefaultRenderingPipeline",
        false, // is HDR?
        this.babylon.scene,
        this.babylon.scene.cameras
      );
      defaultPipeline.samples = 1;
      defaultPipeline.fxaaEnabled = false;

      this.scene.plateMaterial = createPlateMaterial(this.babylon.scene);
      this.scene.cylinderMaterial = createCylinderMaterial(this.babylon.scene);
      var assetLoader = new AssetsManager(this.babylon.scene);
      loadPlateMesh(
        assetLoader,
        (mesh) => (this.scene.plateMesh = mesh),
        this.scene.plateMaterial
      );
      loadSymbolAMesh(assetLoader, (mesh) => {
        this.scene.symbolAMesh = mesh;
        this.scene.symbolAMesh.billboardMode = Mesh.BILLBOARDMODE_ALL;
      });
      loadSymbolBMesh(assetLoader, (mesh) => {
        this.scene.symbolBMesh = mesh;
        this.scene.symbolBMesh.billboardMode = Mesh.BILLBOARDMODE_ALL;
      });
      await assetLoader.loadAsync();
      this.previewConfiguration(this.selectedOrder);
    },

And my mounted() function:

  async mounted() {
    await this.createScene();
    this.babylon.sceneReady = true;
    this.babylon.canvas = this.$refs.canvas;

    this.engine.runRenderLoop(() => {
      this.babylon.scene.render();
    });
  },

Is there something wrong about the way i use createDefaultEnvironment?
This error does not occur every time, so i wonder if its some kind of race condition or sth.

Thanks alot for your help!

I don’t see a problem with your code, so without a repro in the Playground it will be hard to help more…

1 Like