为什么我不能加载3D模型与Mapbox GL JS和Threebox与此角度代码

Question

谁能帮我理解一下，我需要如何在Angular中构建这个mapbox w/ threebox项目的代码？

我不明白为什么这样的代码：

 this.tb.loadObj(options, function (model) {
     var house = model.setCoords(origin);
     this.tb.add(house);
});

抛出以下错误：

错误错误:未捕获(在promise中)：ReferenceError: tb未定义ReferenceError: tb未定义

即使在此代码块中运行console.log语句时，似乎识别出定义的tb之后也是如此。但是之后这个错误就出现了，我的3D模型永远不会加载。

以下是组件的完整代码，任何关于如何解决此问题的建议都将不胜感激：

import { Component, OnInit } from '@angular/core';
import { environment } from '../../../environments/environment';

import {Threebox} from 'threebox-plugin';
import * as M from 'mapbox-gl';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  
  /// default settings
  long = -122.4192;
  lat = 37.7793;
  map: M.Map;
  style = 'mapbox://styles/mapbox/light-v10';

  // data
  source: any;
  markers: any;

  // render
  tb: Threebox;

  constructor() { }

  ngOnInit(): void {
    (M as any).accessToken = environment.mapbox.accessToken;
    this.buildMap();
    
  this.map.on('style.load', this.onLoad.bind(this));

  this.map.on('load', (event)  => {
    /// register source
    this.map.addSource('localdata', {
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features: [
        {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [this.long, this.lat]
          },
          properties: {
            title: 'Mapbox',
            description: 'San Francisco, California'
          }
        }]
      }
    });

    /// get source
    this.source = this.map.getSource('localdata')

    // markers
    this.source._data.features.forEach((marker) => {
      var lng = marker['geometry']['coordinates'][0]
      var lat = marker['geometry']['coordinates'][1]

      // create a HTML element for each feature
      var el = document.createElement('div');
      el.className = 'marker';

      // make a marker for each feature and add to the map
    new M.Marker({color: 'black'})
        .setLngLat([lng, lat])
        .addTo(this.map);
    });
  });

  // Add map controls
  this.map.addControl(new M.NavigationControl());
  this.map.on('mousemove', function (e) {
      document.getElementById('info').innerHTML =
      // e.point is the x, y coordinates of the mousemove event relative
      // to the top-left corner of the map
      // e.lngLat is the longitude, latitude geographical position of the event
      e.lngLat.lat.toFixed(6) + ', ' + e.lngLat.lng.toFixed(6) ;
      });
      
  };

    // functions
    buildMap() {
        this.map = new M.Map({
          container: 'map',
          style: 'mapbox://styles/mapbox/light-v10',
          zoom: 18,
          center: [this.long, this.lat],
          pitch: 60,
      });
    }
    onLoad(){
      this.map.addLayer({
        id: 'house',
        type: 'custom',
        // renderingMode: '3d',
  
        onAdd(map, mbxContext) {

          this.tb = new Threebox(
              map,
              mbxContext,
              { defaultLights: true }
          );
          
          //starting location for both map and eventual sphere
          var origin = [this.long, this.lat];
          var options = {
              // obj: 'src/assets/3d/house.gltf',
              obj: 'https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf',
              type: 'gltf',
              scale: 1,
              units: 'meters',
              rotation: { x: 90, y: 0, z: 0 } //default rotation
          }
  
          this.tb.loadObj(options, function (model) {
            var house = model.setCoords(origin);
            this.tb.add(house);
          });
      },
      render: function (gl, matrix) {
        this.tb.update();
      }
    });
  };

}

Answer 1

tb需要是全局的：https://github.com/jscastro76/threebox/blob/master/docs/Threebox.md#threebox-instance尝试：

(window as any).tb = new Threebox(map, mbxContext, {defaultLights: true});

和

window['tb'].loadObj(options, function (model) {
            var house = model.setCoords(origin);
            window['tb'].add(house);
          });

Answer 2

看起来window.tb解决了这个问题。

在onAdd函数外部初始化tb。

this.tb = new Threebox(map, mbxContext, options);
window.tb = this.tb;

现在您可以使用this.tb或window.tb，因为两者是相同的。