24 Babylonjs入门进阶 如何使用Observables

对于很多人来说,只是创建了Babylon.js项目相关的gui,其实还需要场景的Observables,特别是scene.onPointerObservable(获取场景触摸事件)。

介绍

Babylon.js提供了很多事件(比如scene.beforeRender),在v2.4之前没有统一的方法处理它们。从v2.4开始,我们介绍了一种新模式(不会破坏向后兼容性):Observables
它分为两部分:ObservableObserver。Observable是给定的事件(例如像beforeRender)的对象属性。用户想要触发此类事件的话需要往相应的Observable内注册一个Observer。然后,Observable的任务是在适当的时候触发执行所有的Observer
实现者将使用Observable创建一个属性,该属性将触发所有已经注册的Observer。触发后,将给定的数据从Observable传递给Observer
虽然可以创建自己的Observable(下面是一个简单的例子),但通常都是将Observer添加到Babylon.js提供的Observable中。对于那些想要深入研究的人来说,API中有更多的细节。

  • 官方示例,简单的自定义Observable
    Observable - onXChange-被添加到主球体中。两个其它球体添加到了主球体的Observable中,当主球体的x轴位置发生变化时,它们也会跟着变化。

Observable 的属性和方法

以下的方法都可用:

  • add():添加一个Observer
  • addOnce():添加一个Observer,它将执行一次然后删除
  • remove():删除之前注册的Observer
  • removeCallback():与上面方法相同,但传入的是回调函数而不是Observer实例
  • notifyObservers():用于触发所有已注册的Observer
  • notifyObserversWithPromise():调用它将执行每个回调,期望它是一个promise或返回一个值。如果链中的任何一个函数失败,则promise将失败并且执行将不会继续。
  • hasObservers:如果至少注册了一个Observer,则返回true的属性
  • hasSpecificMask(mask):如果向此掩码注册了至少一个Observer,则返回true的函数
  • clear():删除所有的 Observer
  • clone():只是克隆Observable对象而不是已注册的Observers
    许多Babylon.js对象都有一系列可用的Observable。以下是来自文档搜索工具的结果列表,其中包含指向API的链接。

添加Observer到Observable

Observable 是由一组Observer 组成,ObserverObservable 反馈的信息进行处理。
下面示例中,通过Observable.add方法创建一个Observer
onBeforeRenderObservable则在每一帧渲染前触发Observer

var alpha = 0;
scene.onBeforeRenderObservable.add(function () {
    sphere.scaling.y = Math.cos(alpha);

    alpha += 0.01;
});

删除一个Observer ,你需要在创建时存储它的引用。以下示例为如何删除一个Observer

var alpha = 0;
var observer = scene.onBeforeRenderObservable.add(function () {
    sphere.scaling.y = Math.cos(alpha);

    alpha += 0.01;
});

scene.onBeforeRenderObservable.remove(observer);

以下示例为在帧循环中删除Observer。由于无法删除不存在的Observer,因此每次要判断Observer是否还存在。

var alpha = 0;
var observer = scene.onBeforeRenderObservable.add(function () {
    sphere.scaling.y = Math.cos(alpha);

    alpha += 0.01;

    if(scene.onBeforeRenderObservable.hasObservers && alpha > 3) {
        scene.onBeforeRenderObservable.remove(observer);
    }
});

场景可用的Observable

Babylon.js的场景对象自带了超过20个各种相关的Observable。它们大多数都在每一帧渲染中检查,并且以一个固定的顺序进行检查。下面是一个渲染循环中的Observable列表:

  • onBeforeAnimationsObservable
  • onAfterAnimationsObservable
  • onBeforePhysicsObservable
  • onAfterPhysicsObservable
  • onBeforeRenderObservable
  • onBeforeRenderTargetsRenderObservable
  • onAfterRenderTargetsRenderObservable
  • onBeforeCameraRenderObservable
  • onBeforeActiveMeshesEvaluationObservable
  • onAfterActiveMeshesEvaluationObservable
  • onBeforeParticlesRenderingObservable
  • onAfterParticlesRenderingObservable
  • onBeforeRenderTargetsRenderObservable
  • onAfterRenderTargetsRenderObservable
  • onBeforeDrawPhaseObservable
  • onAfterDrawPhaseObservable
  • onAfterCameraRenderObservable
  • onAfterRenderObservable

场景对象也有Observer:onReady,onDataLoaded,onDispose,但它们不会在帧循环中触发。
此外,使用Deterministic lockstep时,onBeforeStep和onAfterStep也都可用。
然而,最有用的Observable可能是检查鼠标或者手指或控制器在屏幕上的交互事件-scene.onPointerObservable

发布了402 篇原创文章 · 获赞 544 · 访问量 212万+

猜你喜欢

转载自blog.csdn.net/qq_30100043/article/details/89344809
24