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