'NgOnInit undefined public variables

I have public variables in Component that are associated with ThreeJs, I try to apply them in the ngOnInt method, but I get an error

Variables

export class CustomizerComponent implements OnInit {
  public threeJsVars: {
    scene: any;
    kitchen: any;
    camera: any;
    renderer: any;
    canvas: any;
    canvasSmall: any;
    controls: any;
    mouse: any;
    raycaster: any;
    selectedTexture: any;
    INTERSECTED: any;
    loader: any;
    BACKGROUND_COLOR: 0xffffff;
  };

 // ngOn Init()
}

NgOnInit Method

  ngOnInit(): void {

    // Scene
    this.threeJsVars.scene = new THREE.Scene();
    console.log(this.threeJsVars.scene);
    this.threeJsVars.scene.background = new THREE.Color(
      this.threeJsVars.BACKGROUND_COLOR
    );
 }

Error:

core.mjs:6469 ERROR TypeError: Cannot set properties of undefined (setting 'scene')
    at CustomizerComponent.ngOnInit (customizer.component.ts:54:27)
    at callHook (core.mjs:2526:1)
    at callHooks (core.mjs:2495:1)
    at executeInitAndCheckHooks (core.mjs:2446:1)
    at refreshView (core.mjs:9484:1)
    at refreshEmbeddedViews (core.mjs:10594:1)
    at refreshView (core.mjs:9493:1)
    at refreshComponent (core.mjs:10640:1)
    at refreshChildComponents (core.mjs:9265:1)
    at refreshView (core.mjs:9519:1)
angularthree.js


Solution 1:[1]

You just defined how the threeJsVars looks like but did not initialize it.

You should first define an interface for ThreeJsVars outside of CustomizerComponent:

interface ThreeJsVars: {
  scene: any;
  kitchen: any;
  camera: any;
  renderer: any;
  canvas: any;
  canvasSmall: any;
  controls: any;
  mouse: any;
  raycaster: any;
  selectedTexture: any;
  INTERSECTED: any;
  loader: any;
}

then you initialize the variable inside CustomizerComponent:

public threeJsVars: ThreeJsVars = {} as ThreeJsVars;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions