Değiştirme Babylon JS'nin Durum durumu, bir Açısal 2 bileşeninin içinde başlatıldı

Question

Merhaba, BabylonJs içinde başlatılan bir nesne durumunu değiştirmek için Angular 2'nin DI ile değişken enjekte etmeye çalışıyorum.

Değişkeni okumak için [(ngModel)]="Service.var" ve bileşenimin içinde bir yöntem çağırmak için ngModel Change)="methode" kullandım. Sonuç, düğüm sunucusuyla büyük bir stres ve bellekle büyük bir büyütme.

Eski bileşenin kaldırılmadığı ve her DI'yi tetiklediğim en iyi açıklama, Babylon JS'nin yeni bir örneğinin yeniden oluşturulmasıdır.

Amaç: Yeni bir örneğini oluşturmak olmadan WebGL Nesne Injectable() sınıftan değişiklikleri okuyun:

amacım Babylon tarafından çağrılan createSeane() içindeki ilk defa oluşturulan matris nesnesinin durumunu değiştirmek için bir yol bulmak

JS motoru, yaratılan ilk referansı eski haline getirip gerçek zamanlı değişiklikleri göremez. menü bileşeninde bir tıklama gerçekleşirse servis değişecek ve Babylon JS bileşeni değişiklikleri algılayacak ve yeni değişikliklerle tekrar hesaplama yapacak ve tuvalde yeni değişiklikler çizecektir.

En iyi tasarım kalıbını nasıl uygularım ve sorunu nasıl giderip hedefime ulaşmalıyım?

Answer 1

Takip ediyorsam, ng 2 bileşenleri arasında bir babylon sahne nesnesinin durumunu korumak ve yeniden kullanmak ister misiniz? Projemde buna benzer bir şey yaptım, her sınıfın kendisine referans gerektiren bir enjekte edilen bir sahne hizmeti bileşeni oluşturarak.

Sahneyi hizmet bileşeninde gerçekten başlatmamaya karar verdim (bileşen yaşam döngüsünün ve sahnemin kodumda başlatıldığı nokta göz önüne alındığında) Ancak bunun yerine, tuval başlatıldığında sahne hizmeti sahnesini ayarlayın.

Bu yapıldıktan sonra, bileşenler paylaşmak ve ihtiyaç duydukları olarak babylon sahne hizmeti bileşeni kullanabilirsiniz:

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

başlatılan sahnenin bazı kullanıcıları:

@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