How to highlight imported mesh from ImportMeshAsync()

this question has already been asked but it hasn’t really been effectively answered. (at least not for my issue).
I am trying to import meshes from a .glb file that was exported from blender. As I load the meshes in, I want to highlight them in the scene. I am doing this for now just to get highlighting going. I want to highlight the mesh’s family of meshes when the user moves their mouse over a mesh, and have the highlight persist if the user clicks on a mesh. When I print out the highlight layer, it seems meshes are being added, but none of the meshes are highlighted in the scene.

this is the code I have now:

//class MyComponent implements AfterViewInit
ngAfterViewInit() {
const self = this;

document.addEventListener("DOMContentLoaded", () => {

  this._canvas = this.setupCanvas();
  //initialize the babylon scene and engine
  this._engine = new Engine(this._canvas, true);
  this._scene = this.setupScene();
  this.loading = false; //loading the scene is done
  console.log("loading: ", this.loading);

  this.hl1 = new HighlightLayer("hl1", this._scene);

  if (this.modelID) {
    //setTimeout(() => {
    console.log("load finished");
    //}, 1000);

  console.log("HIGHLIGHT LAYER: ", this.hl1);
  // run the main render loop
  this._engine.runRenderLoop(() => {

  window.addEventListener("resize", function () { 

  // hide/show the Inspector
  window.addEventListener("keydown", (ev) => {
    // Shift+Ctrl+Alt+I
    if (ev.shiftKey && ev.ctrlKey && ev.altKey && ev.keyCode === 73) {
        if (this._scene.debugLayer.isVisible()) {
        } else {



private setupCanvas(): any {
var canvas = this.renderCanvas.nativeElement; = “100%”; = “100%”;


return canvas;


private setupScene(): any {
var scene = new Scene(this._engine);

scene.collisionsEnabled = true;

var cameraStartPos = new Vector3(2.25,1.5,0); //6ft = 1.8m

this._camera = new UniversalCamera("Camera", cameraStartPos, scene);

scene.gravity = new Vector3(0, -9.81, 0);
// camera.applyGravity = true;
this._camera.ellipsoid = new Vector3(0.1, 0.01, 0.1);
this._camera.speed = .1;

this._camera.keysDown = [83, 40];
this._camera.keysUp = [87, 38];
this._camera.keysLeft = [65, 37];
this._camera.keysRight = [68, 39];
this._camera.keysDownward = [81];
this._camera.keysUpward = [69];

this._camera.minZ = 0;

this._camera.collisionMask = 1; //check to see if needed
this._camera.checkCollisions = true;

var light1: HemisphericLight = new HemisphericLight("light1", new Vector3(1, 1, 0), scene);

return scene;


//Load all necessary meshes for the environment
public async _loadAsset() {

//loads game environment
const result = await SceneLoader.ImportMeshAsync(null, "assets/babylon-models/", this.modelID, this._scene);
//const result = await SceneLoader.LoadAssetContainerAsync("assets/babylon-models/", this.modelID, this._scene);

console.log("_loadAsset()", result);

let env = result.meshes[0];
let allMeshes = env.getChildMeshes();

 console.log("allMeshes", allMeshes);

return {
    env: env,
    allMeshes: allMeshes


public async load() {
console.log(“load reached”);

const assets = await this._loadAsset();

const self = this;

//Loop through all environment meshes that were imported
assets.allMeshes.forEach(m => {

  if(m.getClassName() == "Mesh"){
    var mesh = m as Mesh;
    //self.hl1.addMesh(mesh.subMeshes[0].getRenderingMesh(), Color3.Green(), true);
    self.hl1.addMesh(mesh, Color3.Green(), true);
  else if(m.getClassName() == "InstancedMesh"){
    var im = m as InstancedMesh;
    const newMesh = im.sourceMesh.clone(, im.parent)
    // newMesh.position = im.position.clone();
    // newMesh.rotation = im.rotation.clone(); // Make sure this is not rotationQuaternion instead
    // newMesh.scaling = im.scaling.clone();
    // newMesh.parent = im.parent;
    // im.dispose()
    newMesh.position = im.position.clone();
      newMesh.rotationQuaternion = im.rotationQuaternion.clone();
    newMesh.scaling = im.scaling.clone();

    //self.hl1.addMesh(newMesh.subMeshes[0].getRenderingMesh(), Color3.Green(), true);
    self.hl1.addMesh(newMesh, Color3.Green(), true);

console.log("highlights:", self.hl1);


hey I would recommend doing a PG to get help faster
that being said, let me ping @sebavan

Yup would be really hard to troubleshoot without a repro in the playground.

I would love to but my code uses angular and the DOM, so I’m not sure how to get that to work without copying over my entire codebase. Not quite sure if there’s any async issue that arises as well.

This is actually the best way to find out but normally importing a simpler model (similar to yours) in the PG and trying to highlight should put us in a similar setup.

Here is the best I understood how to set it up. Sorry I couldn’t be more of help setting it up. I’m not that familiar with this.

here’s an updated version without the angular and imports. I still get a “null is not a function” error. I’m not very familiar with the playground, but hopefully this is easier to plug into.:

Might this help to get you started ? Introduction to the Playground - Babylon.js Documentation