Currently immersed in developing a dynamically generated three.js component within Angular. The statically created Plot3dComponent (via selector) functions flawlessly. However, encountering difficulties in rendering the component dynamically using ComponentFactoryResolver - despite attempts to introduce delays with setTimeout, the rendering remains unsuccessful. The resulting image from the save function displays only a white rectangle matching the intended width and height, akin to the canvas element. Any suggestions or insights?
Here's a snippet of my template for rendering the component:
<ng-container #plot3dref></ng-container>
The condensed component class code snippet is as follows:
@ViewChild('plot3dref', {read: ViewContainerRef}) plot3dref: ViewContainerRef;
save(geometry: Geometry) {
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(Plot3dComponent);
const componentRef = this.plot3dref.createComponent(componentFactory);
const instance = (<Plot3dComponent>componentRef.instance);
instance.geometry = geometry;
instance.materials = this.materials;
instance.selectedBlock = -1;
console.log(instance.save());
}, 100);
The abbreviated Plot3dComponent component code snippet is outlined below:
@Component({
selector: 'app-plot-3d',
template: '<canvas #canvas></canvas>',
styles: [`:host { width: 100%; } canvas { width: 100%; }`],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class Plot3dComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild('canvas') private canvasRef: ElementRef;
@Input() geometry: Geometry;
@Input() selectedBlock: number;
@Input() materials: Material[];
[...]
ngOnInit() { this.render = this.render.bind(this); }
save() { return this.canvasRef.nativeElement.toDataURL(); }
ngAfterViewInit() {
this.startRendering();
}
private startRendering() {
this.renderer = new THREE.WebGLRenderer({
canvas: this.canvas,
antialias: true,
preserveDrawingBuffer: true
});
const component: Plot3dComponent = this;
(function render() {
component.render();
}());
}
}
Many thanks and cheers!
Edit: Noteworthy issue detected within @angular/material's mat-tab-groups. Experimented with fixed heights but the problem persists.