Unable to render mesh [edit for posterity: check your imports]

[Polyterative]

I'm unable to render any kind of mesh for some reason. Scene is just blank.

Only ngt-grid-helper and ngt-soba-stars works.

My code

<ngt-canvas
    (created)="$event.camera.lookAt(0, 0, 0)"
    [shadows]="true"
    [camera]="{ fov: 35, near: 0.25, far: 1000, position: [-25, 25, 25] }"
    [scene]="{ background: '#0e0e0e' | color, fog: ['#e0e0e0', 20, 100] | fog }"
    [size]="{ width: window.innerWidth, height: window.innerHeight }"
>
  <ngt-stats></ngt-stats>
  <ngt-soba-orbit-controls></ngt-soba-orbit-controls>
  <ngt-soba-stars></ngt-soba-stars>
  <ngt-ambient-light [color]="'#ffffff' | color"></ngt-ambient-light>
  <ngt-grid-helper
      #ngtGridHelper="ngtGridHelper"
      (ready)="onGridHelperReady(ngtGridHelper.helper)"
      [args]="[100, 40, '#000000', '#000000']"
      [receiveShadow]="true"
  ></ngt-grid-helper>
  <ngt-mesh [position]="[0,0,0]">
    <ngt-box-geometry></ngt-box-geometry>
    <ngt-mesh-physical-material [parameters]="{ color: '#ff0000' | color }"></ngt-mesh-physical-material>
  </ngt-mesh>

</ngt-canvas>
<!--<ngt-soba-loader></ngt-soba-loader>-->

Result

Reopenable project: https://github.com/Polyterative/AngularReactiveP5/blob/threejs/src/app/components/generative/container/container.component.html

[IRobot1]

Quick answer is that you're missing import of NgtAmbientLightModule, in generative.module.ts. Once added, the ambient light you added to the scene has the desired effect.

Because ng3 is very modular (to keep your app size small), its easy to miss an import. I recommend organizing your imports by ng3 feature so its easy to keep track of the features you are pulling in...

  imports: [
    CommonModule,

    NgtCoreModule,
    NgtStatsModule,
    NgtColorPipeModule,
    NgtFogPipeModule,

    NgtMeshModule,

    NgtObjectInputsControllerModule,

    NgtBoxGeometryModule,
    NgtConeGeometryModule,

    NgtAmbientLightModule,
    NgtHemisphereLightModule,
    NgtDirectionalLightModule,

    NgtBoxHelperModule,
    NgtGridHelperModule,

    NgtMeshBasicMaterialModule,
    NgtMeshPhongMaterialModule,
    NgtLineBasicMaterialModule,
    NgtMeshPhysicalMaterialModule,
    NgtMeshStandardMaterialModule,

    NgtSobaStarsModule,

    NgtSobaOrbitControlsModule,

    ThreeObjectsModule,
    SimpleCubeComponentModule,
  ]

[nartc]

Thanks @IRobot1.
@Polyterative I'm working on a refactor that would help tremendously with IDEs that support auto importing modules for Angular (WebStorm). Not sure if VSCode will ever support it (or Angular Language Service for that matter) but overall, it will be easier because you'll get an error from compilation for missing a Module import instead of getting errors at runtime (or not even errors).

[IRobot1]

BTW, mixing P5 with ng3/3js is a very cool idea.

[Polyterative]

Thanks @IRobot1. @Polyterative I'm working on a refactor that would help tremendously with IDEs that support auto importing modules for Angular (WebStorm). Not sure if VSCode will ever support it (or Angular Language Service for that matter) but overall, it will be easier because you'll get an error from compilation for missing a Module import instead of getting errors at runtime (or not even errors).

Thats great news since I totally rely on webstorm for auto imports :)
I will try importing it later today. Thanks for now!

This library is hyper cool, I'm super curious about what I will be able to build with it.

[Polyterative]

Ok that worked, I will be more mindful about imports from now on. Maybe improving the documentation would help for future developers