Question

我正在使用three.js在浏览器中显示一些3D网格，但是我需要调用一个仅在某些元素加载后才应用的函数。一些模型仅需要导入，而其他模型也需要对其执行操作。有一些通用的加载代码可将对象添加到场景中。但是对于一个特定的网格，我需要在内部添加一些面板（该面板是fbx的子网格），并具有我编写的重复功能。我想我需要在加载开始时声明一个观察者，但是没有事件可言...并且加载函数返回void。

我的问题是：如何将函数添加到onLoad回调（使用可观察的或其他方式），在该回调中我可以在该可观察的位置访问对象：THREE：在加载函数中创建的组。

预期的流量：我希望对正在加载的每个网格都有一个可观察的对象，当加载完成时，我可以执行为该特定的可观察对象指定的功能。

更新：代码更改可以更好地反映我要实现的目标。当前行为有效，但感觉很脏。

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

    loadFBX = (name: string, materials: TextureMapper[], onComplete, raycastable: boolean = true) => {
        MeshLoader.loader.load('../../assets/meshes/' + name + '.fbx', (object: THREE.Group) => {
            // some general irrelevant loader code...
            onComplete();
        });
    }

想要的行为可能是这样的，其中捕获了对象以执行功能。但是我正在努力寻找解决方案。

    this.loader.loadFBX('Loggia-panel', [
      { meshName: 'Loggia-frame', material: 'aluminium' },
      { meshName: 'Loggia-board', material: 'woodLight' }],
      () => {
        const mesh = this.scene.getObjectByName('Loggia-board');
        for (const object of MeshManipulator.array(mesh, 33, new Vector3(0, 0, 2))) {
          mesh.parent.add(object);
        }

        mesh.parent.position.set(-70, 0, -55);
        this.scene.add(MeshManipulator.duplicate(mesh.parent, new Vector3(70, 0, -55)));
      });

更新：我正在尝试一种可以返回可观察值的方法，但是不确定如何分配它并以这种方式返回它...我仍在学习这些可观察值的工作方式。但是弄清楚了可观察对象可以返回，并且当我在onComplete函数中告知事件时，观察者将处理该事件。

    loadFBX = (fileName: string): Observable<Object3D> => {
        MeshLoader.loader.load('../../assets/meshes/' + fileName + '.FBX', (object: THREE.Group) => {
            // set the object3D observable and notify observer to fire event
        });
    }

Answer 1

public loaderObservable(fbxUrl: string): Observable<any> {
return new Observable((subscriber) => {
    loader.load(
      fbxUrl,
      (fbx) => {
        subscriber.next(fbx);
        subscriber.complete();
      },
      (event: ProgressEvent<EventTarget>) => {},
      (event) => subscriber.error(event),
    );
});}

尝试这种方法。考虑到这只是一个以可观察的方法转换所有加载程序回调的示例。

使用Observables（Map？）在Threejs中加载fbx

1 个答案: