Change Instance state of Babylon JS initialized inside an Angular 2 component

Question

Hello I'm trying to inject variable with DI of Angular 2 to change a state of object initialized inside BabylonJs.

I used [(ngModel)]="Service.var" to read the variable and ngModel Change)="methode" to recall a methode inside my component. The result is a big stress with the node server and a big augmentation with memory.

The best explanation that the old component is not removed and each time i triggered a DI a new instance of Babylon JS is recreated.

Objective: WebGl Object read the changes from the Injectable() class without create a new instance:

my goal is to find a way to change the state of matrix object created the first time inside the createSeane() called by the Babylon JS engine without reinstate the first reference that was create and see the changes in the real time. if a click is realized in the menu component the service will change and the Babylon JS component will detect the changes and do again the again the calculation with the new changes and draw in the canvas the new changes.

How can I implement the best design pattern and how should I fix the problem and achieve my objective ?

score 0 · Answer 1 · answered Jan 02 '17 at 16:47

If I'm following, you want to preserve and reuse the state of a babylon scene object among ng 2 components? I just did something similar to this for my project by creating a scene service component that is injected into each class that needs a reference to it.

I chose not to actually initialize the scene in the service component (considering that the component life cycle and the point where the scene is initialized in my code) But instead set the scene service scene when the canvas is initialized.

Once this is done, components can share and use the babylon scene service component as they need:

scene.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class SceneService {
    private _scene:BABYLON.Scene;

    get scene(): BABYLON.Scene {
        return this._scene;
    }

    set scene(scene:BABYLON.Scene){
        this._scene = scene;
    }
}

babylon.component.ts

@Component({
  selector: 'app-babylon',
  templateUrl: './babylon.component.html',
  styleUrls: ['./babylon.component.css']
})
export class BabylonComponent implements OnInit, OnDestroy  {

  constructor(private babylonEngine:BabylonEngine, private sceneSerice:SceneService, private fileSystem:FileSystem) { }

  scene:BABYLON.Scene = null;

  ngOnInit(): void { 
    var canvas = document.getElementById('renderCanvas') as HTMLCanvasElement;
    var engine = this.babylonEngine.init(canvas);

    // create a basic BJS Scene object
    this.scene = new BABYLON.Scene(engine);
    this.sceneSerice.scene = this.scene;
}
}

some user of the initialized scene:

@Component({
  selector: 'app-scene-editor',
  templateUrl: './scene-editor.component.html',
  styleUrls: ['./scene-editor.component.css']
})

export class SceneEditorComponent implements OnInit {
  @ViewChild('jscolor') input;

  constructor(private sceneService:SceneService, public fileSystem:FileSystem) {    
  }

  ngOnInit():void {
    this.meshes = this.sceneService.scene.meshes;
    this.materials = this.sceneService.scene.materials;
  }
}

app.module.ts

  providers: [
    SceneService,
    FileSystem,
    BabylonEngine
  ],

Change Instance state of Babylon JS initialized inside an Angular 2 component

1 Answers1