Javascript 动态角度组件中的Three.js渲染

目前正在处理Angular中动态创建的

three.js

组件。静态（通过选择器）创建的Plot3dComponent工作正常。但是当通过ComponentFactoryResolver动态创建它时，组件不会呈现任何内容。还尝试使用

setTimeout

添加一些延迟，但我无法让它渲染任何内容。

save

函数的图像输出只是一个具有所需宽度和高度的白色矩形，就像canvas元素一样。你有什么想法吗

用于渲染组件的我的模板

缩小的组件类如下所示

@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();
    }());
  }
}

@ViewChild（'plot3dref'，{read:ViewContainerRef}）plot3dref:ViewContainerRef；
保存（几何图形：几何图形）{
const componentFactory=此.componentFactoryResolver.resolveComponentFactory（Plot3dComponent）；
const componentRef=this.plot3dref.createComponent（componentFactory）；
const instance=（componentRef.instance）；
instance.geometry=几何体；
instance.materials=this.materials；
instance.selectedBlock=-1；
log（instance.save（））；
}, 100);

缩小的Plot3dComponent如下所示

@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();
    }());
  }
}

@组件({
选择器：“app-plot-3d”，
模板：“”，
样式：[`:主机{宽度：100%；}画布{宽度：100%；}`]，
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类Plot3dComponent实现OnInit、AfterViewInit、OnDestroy{
@ViewChild（“canvas”）私有canvasRef:ElementRef；
@输入（）几何体：几何体；
@Input（）selectedBlock：数字；
@输入（）物料：物料[]；
[...]
ngOnInit（）{this.render=this.render.bind（this）；}
save（）{返回此.canvasRef.nativeElement.toDataURL（）；}
ngAfterViewInit（）{
这就是startRendering（）；
}
私人startRendering（）{
this.renderer=new THREE.WebGLRenderer({
canvas:this.canvas，
反别名：是的，
preserveDrawingBuffer:true
});
常量组件：Plot3dComponent=此；
（函数render（）{
component.render（）；
}());
}
}

谢谢，干杯

---

编辑：该问题似乎也发生在@angular/material的

mat选项卡组中。还测试了其中的固定高度。
实际上，它可以同时创建静态和动态组件。使用工作示例创建了一个极小值。这是相关的代码片段

导出类DynamicComponent{
@ViewChild（“canvas”）私有canvasRef:ElementRef；
[...]
恩戈尼尼特（）{
const renderer=new WebGLRenderer（）；
渲染器。设置大小（200150）；
this.canvasRef.nativeElement.append（renderer.domeElement）；
[...]
}
尝试将
高度：100%
添加到主机。不起作用，在主机、画布和两者上尝试
高度：100%
。