Angular 2コンポーネント内で初期化されたBabylon JSのインスタンス状態を変更します。

Question

こんにちは私は、BabylonJs内で初期化されたオブジェクトの状態を変更するために、角度2のDIを変数に注入しようとしています。

変数を読み取るために[(ngModel)]="Service.var"を使用し、ngModel Change)="methode"を使用して、コンポーネント内のメソッドを呼び出しました。 その結果、ノードサーバーに大きなストレスが加わり、メモリが大幅に増加します。

古いコンポーネントが削除されず、DIがトリガーされるたびにBabylon JSの新しいインスタンスが再作成されるという最も良い説明です。

目的：新しいインスタンスを作成することなく、WebGLのオブジェクトはInjectable()クラスからの変更をお読みください。

私の目標は、バビロンによって呼び出さ createSeane()内部を初めて作成したマトリックスオブジェクトの状態を変更する方法を見つけることである

JSエンジンは、作成された最初の参照を元に戻すことなく、リアルタイムで変更を表示できます。 メニューコンポーネントでクリックが実現された場合、サービスが変更され、Babylon JSコンポーネントが変更を検出し、新しい変更で再度計算を行い、キャンバスに新しい変更を描画します。

どのようにして最適なデザインパターンを実装できますか？問題をどのように修正して目的を達成する必要がありますか？

Answer 1

私が従っている場合、2つのコンポーネントの間でバビロンシーンオブジェクトの状態を保持して再利用したいとしますか？私はちょうどそれに参照が必要な各クラスに注入されるシーンサービスコンポーネントを作成して、私のプロジェクトのためにこれに似た何かをしました。

サービスコンポーネントでシーンを実際に初期化しないようにしました（コンポーネントのライフサイクルとシーンがコードで初期化される点を考慮してください）。代わりに、キャンバスが初期化されたときにシーンサービスシーンを設定します。

これが完了すると、コンポーネントが共有し、彼らが必要としてバビロンシーンサービス・コンポーネントを使用することができます。

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を

scene.service.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 
    ],