对于很多人来说,只是创建了Babylon.js项目相关的gui,其实还需要场景的Observables
,特别是scene.onPointerObservable
(获取场景触摸事件)。
介绍
Babylon.js提供了很多事件(比如scene.beforeRender
),在v2.4之前没有统一的方法处理它们。从v2.4开始,我们介绍了一种新模式(不会破坏向后兼容性):Observables
。
它分为两部分:Observable
和Observer
。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
组成,Observer
对Observable
反馈的信息进行处理。
下面示例中,通过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
。