时间戳

首页 > 解决方案 > 使用 rxjs 将 loadFBX 承诺包装在 observable 中

angular - 使用 rxjs 将 loadFBX 承诺包装在 observable 中

问题描述

我正在尝试使用threejs 加载一个fbx 文件。但是，除了 onLoad 回调之外，我无法知道何时加载了网格。所以我想使用一个可观察的。我发现 Rxjs 'from' 似乎具有加载 fromPromise 的功能（但包含在 from 中）。

    load( url: string, onLoad: ( object: Group ) => void, onProgress?: ( event: ProgressEvent ) => void, onError?: ( event: ErrorEvent ) => void ) : void;

    loadFBX = (fileName: string) => {
        MeshLoader.loader.load('../../assets/meshes/' + fileName + '.FBX', (object: THREE.Group) => {
        });
    }

    this.d = from(this.meshLoader.loadFBX('polyhedronDivided'));
    this.d = from(new FBXLoader().load('../../assets/meshes/' + 'polyhedronDivided' + '.FBX', () => {}));

这些分配都无效。我得到： ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.我以为我是在为那个功能提供一个承诺......我不知道我在哪里出错了......

更新：更改我的 loadFBX 函数以返回一个 observable 似乎可以解决问题，但我不知道如何创建和返回 observable ......

标签： angularthree.jsrxjs

解决方案

将数据保存到行为主体似乎可以获得所需的结果。

    data = new BehaviorSubject<any>(undefined);

    loadFBX = (fileName: string) => {
        MeshLoader.loader.load('../../assets/meshes/' + fileName + '.FBX', 
        (object: THREE.Group) => {
            this.data.next(object);
        });
    }

而且你可以像这样订阅，它会在加载完成后返回对象。如果主题未定义，过滤器只是确保代码不会执行。

    this.meshLoader.data.pipe(
      filter(x => x),
      tap(x => { console.log(x); }))
      .subscribe();

推荐阅读