CODEWITHSUNDEEP
javascriptoopbabylonjs
gson78
gson78

Reputation: 51

JavaScript constructor properties not being recognized- Babylon.js

The easiest thing to do instead of pasting the entire code here inconveniently is give a link to the Babylon.js playground..If you're not familiar with it, its basically an environment like jsfiddle but specifically for Babylon.js webGL rendering. It's got the canvas, engine, and render loop already initiated (term?)

http://www.babylonjs-playground.com/#LYEU3#0

I have created constructors for 3 different star types:YellowStar, WhiteStar, and RedStar. I have them pasted in the playground code, but locally, the 3 functions are in a separate file. You'll notice that YellowStar's emitting particles do not have the image rendered, which is fine as it doesn't relate to the question. The larger white spheres in the foreground are supposed to be an emissive red color(RedStar objects). The smaller white spheres in the background (WhiteStar objectcs) are white as they are supposed to be, but the emissive property isn't working on those either.

I know its a problem with the way I have them constructed. Because there aren't that many properties in common, I don't have set up to inherit from main Star constructor. Passing sphere and material parameters for the objects would sort of defeat the convenience of creating the constructors in the first place. But there is something I"m doing wrong, unaware of, or not considering that is making the .mat property not work, and the material therefore to not render. I'd like to have all my objects (including planets eventually), originating from one file.

Every time I have an issue I can't figure out, its usually related to scope. WhiteStar and RedStar's material properties are not being recognized. I dont get that because the scope of each .mat should be limited within its own function.

var YellowStar = function (position, size, scene) {
    this.sphere = BABYLON.Mesh.CreateSphere("sphere1", 30, 30*size, scene); 
    this.mat = new BABYLON.StandardMaterial("white", scene);
    this.mat.diffuseTexture = new BABYLON.Texture("textures/suntexture.jpg", scene);
    this.mat.specularColor = new BABYLON.Color3(0, 0, 0);
    this.sphere.material = this.mat;
    this.sphere.position = position;

    /*...this material works...*/
};

var WhiteStar = function(position, size, scene){
    this.sphere = BABYLON.Mesh.CreateSphere("whiteStar", 20, 15*size, scene); 
    this.mat = new BABYLON.StandardMaterial("white", scene);
    this.mat.emissiveColor = new BABYLON.Color3(1, 1, 1);
    this.sphere.material = this.mat; /* doesn't work */
}

var RedStar = function (position, size, scene) {
    this.sphere = BABYLON.Mesh.CreateSphere("redStar", 20, 30*size, scene); 
    this.mat = new BABYLON.StandardMaterial("red", scene);
    this.mat.emissiveColor = new BABYLON.Color3(0.714, 0.239, 0.169);
    this.sphere.material = this.mat;  /*doesnt work*/

};

Babylon does have a community, but the questions relate more toward the engine, and I have more success getting general Javascript questions answered here. Thanks

Upvotes: 1

Views: 189

Answers (1)

CarlBateman
CarlBateman

Reputation: 167

After fiddling about with it, it looks like you have to explicitly add/define the diffuse colour before the emissive colour to work. I don't know why.

NB The white star emissive colour is full on white, so I'm unsure how you'd know whether it's working or not.

HTH

Upvotes: 1

Related Questions