Search the Community

I'm still a relative newbie with BJS and typescript. I've managed to get observers working in my TS class but I found that I couldn't use "this" instance references within the callback function e.g. class MyMesh extends BABYLON.Mesh { private myMeshChild:BABYLON.Mesh; constructor() { // Create child mesh and add some animation etc. this.myMeshChild.onBeforeRenderObservable.add(function () { console.log(this.myMeshChild.rotation); } } } This compiles fine but results in runtime error "Cannot read property 'rotation' of 'undefined'". But if I instead assign to a local variable first, then it works, e.g. class MyMesh extends BABYLON.Mesh { private myMeshChild:BABYLON.Mesh; constructor() { // Create child mesh and add some animation etc. let myMeshChild = this.myMeshChild; this.myMeshChild.onBeforeRenderObservable.add(function () { console.log(myMeshChild.rotation); } } } I feel like I'm using Observables all wrong in Typescript. I'm wondering what's the best way to pass variables to the callback function from within my TS classes? Also I feel like if I add an observer to a mesh then the callback function should be aware of the context i.e. the mesh object from which it's called and therefore I shouldn't have to also assign objects to local variables before I can refer to them in the function, but maybe I'm expecting too much. Any pointers on using Observables correctly from within Typescript classes would be most appreciated. @Nockawa @Deltakosh

Hello I am trying to serialize the scene with BABYLON.SceneSerializer.Serialize(scene) and am getting a "mesh.rotation.asArray is not a function". Serialization works fine when meshes are not rotated. On further exploration, I realised that that mesh.rotation was not a Vector3 object but an object with getters, setters and __op__: Observer. Could this be the issue? Can you please help me fix this. Please let me know if you need more details. Thank you

Hi, I have implemented a simple Observer Pattern library in TypeScript/JavaScript which does not require inheritance. I have called it Paon (French name for a bird with many "eyes" on its feathers). It is available in my GitHub and in npm. Any feedback would be greatly appreciated. Paon An Observer Pattern Component in TypeScript/JavaScript. No dependencies. No inheritance is required. Observable is just a component inside an object. Observers are just functions. Installation npm install paon To compile the TypeScript source to JavaScript, you would need to install the TypeScript compiler: npm install -g typescript To generate the minified JavaScript version when building, you would need to install uglifyjs: npm install -g uglifyjs Build Resulting files are created in the dist/ folder. Complete build (compilation and minification): npm run build Simple compilation (no minification): npm run compile Usage All constants, interfaces, classes and functions are accessible inside the Paon namespace. Simple example Here is a simple example where we add an observable component inside a class Subject: /// <reference path="paon.d.ts" /> class Subject { private name: string; observable: Paon.Observable; // Observer Pattern component constructor(name: string) { this.name = name; this.observable = new Paon.Observable(); // Instanciation/Initialization } changeName(name: string): string { this.name = name; this.observable.notifyObservers("nameChanged"); // A message is sent to observers return this.name; } } function onNameChanged() { alert("Name has changed"); } let subject = new Subject("Penelope"); subject.observable.addObserver("nameChanged", onNameChanged); // Function onNameChanged() subscribes to subject's messages "nameChanged" subject.changeName("Melissa"); // An alert popup appears: "Name has changed" Above, in the class Subject, the method changeName() will send a "nameChanged" message to the instance's observers. After the instanciation of Subject, the function onNameChanged() subscribes to subject's messages "nameChanged". Therefore, when changeName() is called, an alert popup appears. As we can see, with such a pattern, no inheritance with extends or implements is required. Just simple composition. Example with extra data We can send extra data to observers as we can see below: /// <reference path="paon.d.ts" /> class Subject { private name: string; observable: Paon.Observable; // Observer Pattern component constructor(name: string) { this.name = name; this.observable = new Paon.Observable(); // Instanciation/Initialization } changeName(name: string): string { this.name = name; this.observable.notifyObservers("nameChanged", { data: name }); // A message with extra data is sent to observers return this.name; } } function onNameChanged(msg: { data: string }) { alert("Name has changed into " + msg.data); } let subject = new Subject("Penelope"); subject.observable.addObserver("nameChanged", onNameChanged); // Function onNameChanged() subscribes to subject's messages "nameChanged" subject.changeName("Melissa"); // An alert popup appears: "Name has changed into Melissa" The parameter msg in function onNameChanged() contains the extra data we have sent via method changeName(). Here, this is an object with a property data, but this could be anything. Module Importation This library can also be imported as a module with the import statement: import Paon from "./paon"; // Declaration file .d.ts location class Subject { private name: string; observable: Paon.Observable; // Observer Pattern component constructor(name: string) { this.name = name; this.observable = new Paon.Observable(); // Instanciation/Initialization } changeName(name: string): string { this.name = name; this.observable.notifyObservers("nameChanged", { data: name }); // A message with extra data is sent to observers return this.name; } } function onNameChanged(msg: { data: string }) { alert("Name has changed into " + msg.data); } let subject = new Subject("Penelope"); subject.observable.addObserver("nameChanged", onNameChanged); // Function onNameChanged() subscribes to subject's messages "nameChanged" subject.changeName("Melissa"); // An alert popup appears: "Name has changed into Melissa" Only the import statement differs from previous examples. Otherwise, the code is the same. API Documentation Add an observer to a type of message (similar to the DOM function addEventListener()): Paon.Observable.addObserver(type: string, observer: Observer): Observer; Remove an observer from a type of message (similar to the DOM function removeEventListener()): Paon.Observable.removeObserver(type: string, observer: Observer): void; Remove all observers from a type of message: Paon.Observable.removeObserversType(type: string): void; Send a message to observers (similar to the DOM function dispatchEvent()): Paon.Observable.notifyObservers(type: string, msg?: any): void; Contributors yahiko Licence MIT

Hi, I prepare simple playground http://www.babylonjs-playground.com/#21STMC#0 Can anybody show us how to program switchForBall as observer and ball which trigge switchForBall? greetings