时间戳

首页 > 解决方案 > 使用 observables (map?) 在 threejs 中加载 fbx

angular - 使用 observables (map?) 在 threejs 中加载 fbx

问题描述

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

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

预期流程：我希望每个正在加载的网格都有一个 observable，当加载完成时，我可以执行我为该特定 observable 指定的函数。

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

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

标签： angulartypescriptthree.js

解决方案

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

试试这个方法。考虑这只是在可观察方法中转换所有加载程序回调的示例。

推荐阅读