Изменить состояние экземпляра Babylon JS, инициализированного внутри компонента Angular 2

Здравствуйте, я пытаюсь ввести переменную с DI Angular 2, чтобы изменить состояние объекта, инициализированного внутри BabylonJs.

Я использовал [(ngModel)]="Service.var" для чтения переменной и ngModel Change)="methode" для вызова метода внутри моего компонента. Результатом является большая нагрузка на сервер узла и большое увеличение объема памяти.

Лучшее объяснение того, что старый компонент не удаляется, и каждый раз, когда я запускаю DI, воссоздается новый экземпляр Babylon JS.

Цель: объект WebGl считывает изменения из класса Injectable() без создания нового экземпляра:

Моя цель - найти способ изменить состояние матричного объекта, созданного в первый раз внутри createSeane(), вызванного движком Babylon JS, без восстановления первой ссылки, которая была создана, и увидеть изменения в реальном времени. если в компоненте меню реализован щелчок, служба изменится, и компонент Babylon JS обнаружит изменения и снова выполнит расчет с новыми изменениями и нарисует на холсте новые изменения.

Как я могу реализовать лучший шаблон дизайна и как мне решить проблему и достичь своей цели?


angular design-patterns babylonjs
person Zied Sellami    schedule 04.04.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если я следую, вы хотите сохранить и повторно использовать состояние объекта сцены вавилона среди компонентов ng 2? Я только что сделал что-то подобное для своего проекта, создав компонент службы сцены, который вводится в каждый класс, которому нужна ссылка на него.

Я решил не инициализировать сцену в сервисном компоненте (учитывая, что жизненный цикл компонента и точка инициализации сцены в моем коде), а вместо этого установил сцену сервиса сцены при инициализации холста.

Как только это будет сделано, компоненты могут совместно использовать и использовать компонент службы сцены babylon по мере необходимости:

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;
}
}

какой-то пользователь инициализированной сцены:

@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
  ],
person jchristof    schedule 02.01.2017