TypeError: Cannot read property 'instancedArrays' of undefined

Questions
1

Hello guys when I try to create BABYLON.Mesh.CreateSphere got “Cannot read property ‘instancedArrays’ of undefined” Error

Actually my code was in a class and working and I just moved it to another class and I start getting this error

Blockquote

import { Component } from ‘@angular/core’;
import * as BABYLON from ‘babylonjs’;

@Component({
selector: ‘app-home’,
templateUrl: ‘./home.component.html’,
styleUrls: [‘./home.component.css’]
})
export class HomeComponent {

private _canvas: HTMLCanvasElement;
private _engine: BABYLON.Engine;
private _scene: BABYLON.Scene;
private _camera: BABYLON.TargetCamera;
private _light: BABYLON.Light;
constructor() {
this._canvas = document.getElementById(‘renderCanvas’);
this._engine = new BABYLON.Engine(this._canvas, true);

}

createScene(): void {

this._scene = new BABYLON.Scene(this._engine);
this._camera = new BABYLON.TargetCamera('camera1', new BABYLON.Vector3(0, 5, -10), this._scene);
this._camera.setTarget(BABYLON.Vector3.Zero());
this._camera.attachControl(this._canvas, false);
this._light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), this._scene);
const sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, this._scene);    //<<<<<<<<<<===================
sphere.rotation.x = Math.PI / 2;
sphere.position.y = 1;
sphere.actionManager = new BABYLON.ActionManager(this._scene);
const hl1 = new BABYLON.HighlightLayer('hl1', this._scene);
const ground = BABYLON.MeshBuilder.CreateGround('ground1',
  { width: 6, height: 6, subdivisions: 2 }, this._scene);
const pointerDragBehavior = new BABYLON.PointerDragBehavior({ dragAxis: new BABYLON.Vector3(0, 0, 0) });
pointerDragBehavior.useObjectOrienationForDragging = false;
pointerDragBehavior.updateDragPlane = false;
pointerDragBehavior.onDragStartObservable.add((event) => {
  console.log('dragStart');
  console.log(event);
})
pointerDragBehavior.onDragObservable.add((event) => {
  console.log('drag');
  console.log(event);
  sphere.position.y = event.dragPlanePoint.y;
  sphere.position.x = event.dragPlanePoint.x;
})
pointerDragBehavior.onDragEndObservable.add((event) => {
  console.log('dragEnd');
  console.log(event);

})
sphere.addBehavior(pointerDragBehavior);
const h1 = new BABYLON.HighlightLayer('hl', this._scene);
let lastClickedMesh = null;
this._scene.onPointerObservable.add((evt) => {
  if (evt.pickInfo.hit && evt.pickInfo.pickedMesh !== undefined) {
    const mesh = evt.pickInfo.pickedMesh;
    if (mesh.name.startsWith('sphere')) {
      if (lastClickedMesh !== null) {
        console.log('unhighlighting', lastClickedMesh);
        h1.removeMesh(lastClickedMesh);
      }
      lastClickedMesh = mesh;
      h1.addMesh(lastClickedMesh, BABYLON.Color3.Green());
    }
  }
}, BABYLON.PointerEventTypes.POINTERDOWN);

}

animate(): void {
// run the render loop
this._engine.runRenderLoop(() => {
this._scene.render();
});

// the canvas/window resize event handler
window.addEventListener('resize', () => {
  this._engine.resize();
});

}
public Render() {
this.createScene();

this.animate();

}

}

2

You should provide a playground example, it will be easier to look for the problem.

Each time I encountered this error, it was because the canvas was not existing / was not properly given to Babylon engine. Make sure you have a canvas into your page and that it is properly used by the engine.

3 Likes
3

yea it was because of I create canvas in constructor. when I move canvas creation into createscene method, problem was solved

2 Likes
4

Uncaught TypeError: Cannot read property ‘instancedArrays’ of undefined at GroundMesh.Mesh [as constructor]

Why this problem happened? Can any one help me?

5

As @Evgeni_Popov said earlier:

"You should provide a playground example, it will be easier to look for the problem.

Each time I encountered this error, it was because the canvas was not existing / was not properly given to Babylon engine. Make sure you have a canvas into your page and that it is properly used by the engine."

2 Likes
6

Just ran into the same error:

babylon.js:16 Uncaught (in promise) TypeError: Cannot read property 'instancedArrays' of undefined

In my case, this occured when calling document.getElementById('renderCanvas') when <canvas id="renderCanvas" /> did not exist in the HTML file.

1 Like
7

Repro in the Playground?

8

Done! https://playground.babylonjs.com/#7F75W1#1 Please view the console log for the TypeError.

Thank you for already resolving the issue. Just reproduced the console error for your reference.

Added only these lines:

// intentional wrongly initialized canvas and engine
var canvas2 = document.getElementById('nonexistantCanvas') as HTMLCanvasElement;
var engine2 = new BABYLON.Engine(canvas2, true);

var scene = new BABYLON.Scene(engine2); // using wrongly initialized engine2
2 Likes
9

@gbz, thanks! I did not have this error in TypeScript but now I need to program in JS. I spent some time to find the solution.

1 Like
10

Got to it while migrating from 4.2.0 to 5.46.
Couple of specs failed and it turned out that for 4.2.0 we could run the specs with null canvas in the specs, while later we could not.

Thanks for pointing this out