Question

我有一个具有以下属性的Angular 2对象：

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

和以下方法：

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

我认为我对变量范围感到困惑。

我可以通过删除this.ThreeModel函数中的引用this.aScene和this.loader.load来使代码正常工作。

我认为外部变量（属性）在JavaScript中的函数内是可见的，但似乎并非如此。

我想使用this.ThreeModel和this.aScene的原因是我可以使用当前的模型和场景，并在加载新模型时进行一些清理。

我的假设出了什么问题？

Answer 1

尝试使用ES6箭头功能：

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

您可以使用static并在类块中访问它。

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

在功能中：

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

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

2 个答案: