Question

你好我试图用Angular 2的DI注入变量来改变在BabylonJs中初始化的对象状态。

我使用[(ngModel)]="Service.var"来读取变量，使用ngModel Change)="methode"来调用组件中的方法。结果是节点服务器的压力很大，内存也很大。

没有删除旧组件的最佳解释，每次我触发DI时都会重新创建一个新的Babylon JS实例。

目标：WebGl Object从Injectable()类读取更改而不创建新实例：

我的目标是找到一种方法来改变第一次在Babylon JS引擎调用的createSeane()内创建的矩阵对象的状态，而无需恢复创建的第一个引用并实时查看更改。如果在菜单组件中实现了单击，则服务将发生变化，Babylon JS组件将检测到更改并再次使用新更改再次进行计算，并在画布中绘制新的更改。

如何实施最佳设计模式以及如何解决问题并实现目标？

Answer 1

如果我跟随，你想保留并重用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
  ],

更改在Angular 2组件内初始化的Babylon JS的实例状态

1 个答案: