Angular 2对象，属性和变量范围

Question

I have a Angular 2 object with the following properties:

export class ThreedViewerComponent implements OnInit {
  private aScene: THREE.Scene; 
  private ThreeModel: THREE.Mesh;

and the following method:

private initStage() {

    // create a WebGL scene, camera and raycaster. Raycasting is used for mouse picking (working out what objects in the
    // 3d space the mouse is over) amongst other things.
    this.aCamera = new THREE.PerspectiveCamera(45, this.aSceneSettings.width / this.aSceneSettings.height, 0.1, 2000);
    this.aScene = new THREE.Scene();
    this.aRaycaster = new THREE.Raycaster;
    this.ThreeModel = new THREE.Mesh;

    this.loader = new PLYLoader();

    this.loader.load('assets/data/GuyFawkesMask.ply', function (geometry) {

      // Create 3D model
      this.ThreeModel = new THREE.Mesh(geometry,
        new THREE.MeshPhongMaterial(
          {
            color: 0xFFFFFF,
            //vertexColors: THREE.VertexColors,
            shading: THREE.FlatShading,
            shininess: 0
          })
      );

      this.aScene.add(this.ThreeModel);
    });

I think I am confused about variable scopes.

I can make the code working by getting rid of the references this.ThreeModel and this.aScene inside the this.loader.load function.

I thought that external variables (properties) are visible inside a function in JavaScript but it does not seem to be the case.

The reason why I want to use this.ThreeModel and this.aScene is that I can get old of the current model and scene and do some clean up when loading a new model.

What's wrong in my assumptions?

Answer 1

Try using ES6 arrow function:

this.loader.load('assets/data/GuyFawkesMask.ply', (geometry) => {
    // Create 3D model
    this.ThreeModel = new THREE.Mesh(geometry,
    new THREE.MeshPhongMaterial(
        {
            color: 0xFFFFFF,        
            shading: THREE.FlatShading,
            shininess: 0
        })
    );
    this.aScene.add(this.ThreeModel);
});

Answer 2

You can use static and access it within your class block.

export class ThreedViewerComponent implements OnInit {
  static aScene: THREE.Scene; 
  static ThreeModel: THREE.Mesh;

And in the function:

private initStage() {

    // create a WebGL scene, camera and raycaster. Raycasting is used for mouse picking (working out what objects in the
    // 3d space the mouse is over) amongst other things.
    this.aCamera = new THREE.PerspectiveCamera(45, this.aSceneSettings.width / this.aSceneSettings.height, 0.1, 2000);
    ThreedViewerComponent.aScene = new THREE.Scene();
    this.aRaycaster = new THREE.Raycaster;
    ThreedViewerComponent.ThreeModel = new THREE.Mesh;

    this.loader = new PLYLoader();

    this.loader.load('assets/data/GuyFawkesMask.ply', function (geometry) {

      // Create 3D model
      ThreedViewerComponent.ThreeModel = new THREE.Mesh(geometry,
        new THREE.MeshPhongMaterial(
          {
            color: 0xFFFFFF,
            //vertexColors: THREE.VertexColors,
            shading: THREE.FlatShading,
            shininess: 0
          })
      );

      ThreedViewerComponent.aScene.add(ThreedViewerComponent.ThreeModel);
    });